/*Scroll Bar*/
::-webkit-scrollbar {
    width: 10px;
    background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
    background-color: #0022ff;
}
/*------------------------------------------------------------------------------------*/
body > div:nth-child(3) {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    opacity: 0.9;
    background-color: #000000;
    z-index: 99;
}

body > div:nth-child(3) > div {
    width: 500px;
    height: 400px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: url("../images/loading/loadingImg1.gif");
    background-size: cover;
    background-position: center;
    z-index: 100;
}




body {
    position: relative;
}

/*------------------------------------------------------------------------------------*/
/*HEADER SECTION*/
/*Add Header */
header {
    width: 100%;
    height: 70px;
    position: sticky;
    top: 0;
    z-index: 15;
    background: #FFFFFF;
}

/*add div box for add header image*/
header > div:nth-child(1) {
    position: relative;
    left: 15px;
    top: 4px;
    /*border: 1px solid red;*/
    width: 60px;
    height: 60px;
}

/*add header image sizes*/
header > div:nth-child(1) > img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 55px;
    height: 55px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 17px;
}

/*add header headlines inside articele*/
header > nav > article {
    /*border: 1px solid red;*/
    position: absolute;
    right: 35px;
    top: 22px;
    font-weight: bold;
    font-size: 24px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Nunito', sans-serif;
}

/*remove headlines underlines and add paddings*/
body > header > nav > article > a, u {
    text-decoration: none;
    color: #000;
    padding-right: 10px;
}

/*Added hover colors into header nav*/
body > header > nav > article > a:hover {
    color: red;
}

/*for burger menu*/
body > header > nav > div:last-child {
    /*border: 1px solid red;*/
    position: absolute;
    right: 10px;
    bottom: 19px;
    font-size: 24px;
    visibility: hidden;
}

/*-----------------------------------------------------------------------*/
/*go to up div*/
/*add  div for go top up*/
body > div:nth-child(2) {
    width: 40px;
    height: 40px;
    position: fixed;
    top: 645px;
    right: 15px;
    z-index: 9;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 58px;
    cursor: pointer;
}

body > div:nth-child(2):hover {
    width: 50px;
    height: 50px;
}

/*add image to div go top up*/
body > div:nth-child(2) > a > img {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 50px;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}


/*------------------------------------------------------------------------------------*/
/*Profile*/
/*add styles for Profile section*/
body > main > section:nth-child(1) {
    background: #F8F4F4;
    width: 100%;
    height: 710px;
    position: relative;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/*add div for hi there im kasun weerasinghe*/
body > main > section:nth-child(1) > div:nth-child(1) {
    /*border: 1px solid red;*/
    display: inline-block;
    position: relative;
    top: 125px;
    left: 20px;
}

/*h1 hi there im kasun weerasinghe text*/
body > main > section:nth-child(1) > div:nth-child(1) > h1 {
    font-size: 60px;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

}

/*added div for  i am front end developer text*/
body > main > section:nth-child(1) > div:nth-child(2) {
    /*border: 1px solid red;*/
    position: relative;
    display: inline-block;
    top: 260px;
    left: -670px;
}

/*h1 i am front end developer*/
body > main > section:nth-child(1) > div:nth-child(2) > h1 {
    font-weight: bold;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-size: 44px;
    font-family: 'Nunito', sans-serif;
}

/*add border for social nav*/
body > main > section:nth-child(1) > nav:nth-child(3) {
    /*border: 1px solid red;*/
    width: 570px;
    height: 90px;
    position: relative;
    left: 20px;
    top: 320px;
    display: flex;
    justify-content: space-around;
}

/*add social all divs*/
body > main > section:nth-child(1) > nav:nth-child(3) > div {
    /*border: 1px solid blue;*/
    position: relative;
    width: 100%;
    /*height: 90px;*/
}

body > main > section:nth-child(1) > nav:nth-child(3) > div > a {
    position: absolute;
    left: 0px;
    top: 20px;
    right: 0;
    text-align: center;

}

/*social icons add*/
body > main > section:nth-child(1) > nav:nth-child(3) > div > a > i {
    /*position: absolute;*/
    font-size: 50px;
    /*left: 20px;*/
    /*top: 21px;*/
    text-decoration: none;
    color: black;
    transition: 0.5s;

    /*left: 0px;*/
    /*top: 0px;*/
    /*right:0;*/
    /*bottom: 0;*/
    /*margin: auto;*/

}

/*add hover color linkedin*/
body > main > section:nth-child(1) > nav:nth-child(3) > div:nth-child(1) > a > i:hover {
    font-size: 51px;
    color: #007bb6;
    transition: 0.5s;
}

/*add hover color github*/
body > main > section:nth-child(1) > nav:nth-child(3) > div:nth-child(2) > a > i:hover {
    font-size: 51px;
    color: #040204;
    transition: 0.5s;
}

/*add hover color twitter*/
body > main > section:nth-child(1) > nav:nth-child(3) > div:nth-child(3) > a > i:hover {
    font-size: 51px;
    color: #00B6F1;
    transition: 0.5s;
}

/*add hover color facebook*/
body > main > section:nth-child(1) > nav:nth-child(3) > div:nth-child(4) > a > i:hover {
    font-size: 51px;
    color: #3B5998;
    transition: 0.5s;
}

/*add hover color instagram*/
body > main > section:nth-child(1) > nav:nth-child(3) > div:nth-child(5) > a > i:hover {
    font-size: 51px;
    color: #2C6A93;
    transition: 0.5s;
}

/*add hover color medium*/
body > main > section:nth-child(1) > nav:nth-child(3) > div:nth-child(6) > a > i:hover {
    font-size: 51px;
    color: #040204;
    transition: 0.5s;
}


/*add div for gif*/
body > main > section:nth-child(1) > div:nth-child(4) {
    /*border: 1px solid red;*/
    width: 600px;
    height: 600px;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 50px;
}

/*Added gif into profile section */
body > main > section:nth-child(1) > div:nth-child(4) > img {
    width: 553px;
    height: 583px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 215px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}


/*add 2 colors using span to h1 tags*/
#span1 {
    color: #002057;
}

#span2 {

    color: #FE7B01;
}

#span3 {
    color: #930A09;
}

/*------------------------------------------------------------------------------------*/
/*Main Section About Me*/
/*add background color*/
body > main > section:nth-child(2) {
    width: 100%;
    height: 710px;
    position: relative;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: #fff;
}

/*add Headline About Me*/
body > main > section:nth-child(2) > div:nth-child(1) {
    position: absolute;
    font-size: 20px;
    display: inline-block;
    text-align: center;

    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
}

/*add font to about me*/
body > main > section:nth-child(2) > div:nth-child(1) > h2 {
    font-family: 'Poppins', sans-serif;
}

/*remove dfn italic style in About section*/
body > main > section:nth-child(2) > div:nth-child(1) > h2 > dfn {
    font-style: normal;
}

/*add colors to about me*/
#span4 {
    color: #000000;
}

#span5 {
    color: #8E44AD;
}

/*introduction under Headline*/
body > main > section:nth-child(2) > div:nth-child(2) {
    position: absolute;
    font-size: 15px;
    display: inline-block;
    text-align: center;
    top: 42px;
    left: -8px;
    right: 0;
    margin: auto;
}

/*add font to under Headline*/
body > main > section:nth-child(2) > div:nth-child(2) > h6 {
    font-family: 'Nunito', sans-serif;
    font-style: italic;
}

/*add div for profile image*/
body > main > section:nth-child(2) > aside:nth-child(3) {
    width: 400px;
    height: 400px;
    /*border: 1px solid red;*/
    position: relative;
    top: 140px;
    left: 160px;
}

/*my profile image*/
body > main > section:nth-child(2) > aside:nth-child(3) > img {
    position: absolute;
    width: 350px;
    height: 350px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

/*add hover for my profile picture*/
body > main > section:nth-child(2) > aside:nth-child(3) > img:hover {
    transform: translateY(-3px);
}

/*adds styles for intro about me section*/
body > main > section:nth-child(2) > section:nth-child(4) {
    /*border: 1px solid red;*/
    position: relative;
    left: 597px;
    bottom: 200px;
    width: 580px;

}

/*my name details description position */
body > main > section:nth-child(2) > section:nth-child(4) > article:nth-child(1) {
    position: relative;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
}

/*bold my name in introduction*/
#span6 {
    font-weight: bold;
}

/*border to add my details*/
body > main > section:nth-child(2) > div:nth-child(5) {
    /*border: 1px solid blue;*/
    position: relative;
    width: 580px;
    left: 598px;
    bottom: 150px;
    height: 162px;
}

/*!*add positions for all p inside div*!*/
body > main > section:nth-child(2) > div:nth-child(5) > p {
    position: absolute;
    display: inline-block;
    font-size: 14px;
    font-family: 'Nunito', sans-serif;
}

/*!*Maintain my details p tags*!*/
/*name*/
body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(1) {
    left: 0;
}

/*age*/
body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(2) {
    height: 30px;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/*email*/
body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(3) {
    left: 0;
    bottom: 0;
}

/*phone*/
body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(4) {
    right: 0;
    top: 0;
}

/*place*/
body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(5) {
    height: 30px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/*!*add colors for my details topics*!*/
.my-details {
    color: #021BFF;
}

/*!*Add hire me button*!*/
body > main > section:nth-child(2) > div:nth-child(5) > a:nth-child(6) {
    border: 2px solid black;
    text-decoration: none;
    padding: 5px 15px;
    font-size: 1.25rem;

    position: absolute;
    right: 0;
    bottom: 0;

    overflow: hidden;
    color: black;
    border-radius: 30px;
    box-shadow: 0 0 0 0 rgba(143, 64, 248, 0.5), 0 0 0 0 rgba(39, 200, 255, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body > main > section:nth-child(2) > div:nth-child(5) > a:nth-child(6)::after {
    content: '';
    width: 400px;
    height: 400px;
    position: absolute;
    top: -50px;
    left: -100px;
    background-color: #ff3cac;
    background-image: linear-gradient(225deg, #27d86c 0%, #26caf8 50%, #c625d0 100%);
    z-index: -1;
    transition: transform 0.5s ease;
}

/*add animation*/
body > main > section:nth-child(2) > div:nth-child(5) > a:nth-child(6):hover {
    border: 1px solid white;
    color: white;
    transform: translate(0, -6px);
    box-shadow: 10px -10px 25px 0 rgba(143, 64, 248, 0.5), -10px 10px 25px 0 rgba(39, 200, 255, 0.5);
}

body > main > section:nth-child(2) > div:nth-child(5) > a:nth-child(6):hover::after {
    transform: rotate(150deg);
}

/*------------------------------------------------------------------------------------*/
/*Main Section My Service*/
/*add background color*/
body > main > section:nth-child(3) {
    background: #F8F4F4;
    width: 100%;
    height: 710px;
    position: relative;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/*!*add Headline My Service*!*/
body > main > section:nth-child(3) > div:nth-child(1) {
    position: absolute;
    font-size: 20px;
    display: inline-block;
    text-align: center;

    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
}

/*!*add font to my service*!*/
body > main > section:nth-child(3) > div:nth-child(1) > h2 {
    font-family: 'Poppins', sans-serif;
}

/*remove dfn italic style in About section*/
body > main > section:nth-child(3) > div:nth-child(1) > h2 > dfn {
    font-style: normal;
}

/*introduction under Headline*/
body > main > section:nth-child(3) > div:nth-child(2) {
    position: absolute;
    font-size: 15px;
    display: inline-block;
    text-align: center;
    top: 43px;
    left: -8px;
    right: 0;
    margin: auto;
}

/*add colors to my service me*/
#span7 {
    color: #000000;
}

#span8 {
    color: #8E44AD;
}

/*Add flex box for add my services*/
body > main > section:nth-child(3) > article:nth-child(3) {
    display: flex;
    position: relative;
    width: 100%;
    height: 570px;
    top: 115px;
    /*border: 1px solid red;*/
}

/*Add sizes all divs in flex box*/
body > main > section:nth-child(3) > article:nth-child(3) > div {
    /*border: 1px solid orange;*/
    width: 100%;
    height: 570px;
}

/*add div for  UX/UI h3*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(1) {
    /*border: 1px solid red;*/
    width: 100%;
    text-align: center;
}

/*add style UX/UI h3*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(1) > h3 {
    position: relative;
    font-size: 20px;
    color: #EA1DBD;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Nunito', sans-serif;
}

/*add div for UX/UI image*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
    position: relative;
    /*border: 1px solid red;*/
    width: 100%;
    height: 300px;
}

/*add image into UX/UI*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(2) > img {
    height: 228px;
    width: 228px;
    border-radius: 40px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/*description styles UX/UI*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > pre {
    position: relative;
    text-align: center;
    display: inline-block;
    top: 20px;
    font-size: 18px;
    font-family: 'Nunito', sans-serif;
    color: #EA1DBD;
    left: -20px;

}

/*add div for Software Development h3 text*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(1) {
    /*border: 1px solid red;*/
    width: 100%;
    text-align: center;
}

/*add style Software Development h3 text*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(1) > h3 {
    position: relative;
    font-size: 20px;
    color: #0057FF;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Nunito', sans-serif;
}

/*add div for image into Software Development*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(2) {
    position: relative;
    /*border: 1px solid red;*/
    width: 100%;
    height: 300px;
}

/*add image into Software Development*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(2) > img {
    height: 228px;
    width: 228px;
    border-radius: 40px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/*description styles Software Development*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > pre {
    position: relative;
    text-align: center;
    display: inline-block;
    top: 20px;
    font-size: 18px;
    font-family: 'Nunito', sans-serif;
    color: #0057FF;
    left: -39px;
}

/*add div for Mobile Development h3 text*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(1) {
    /*border: 1px solid red;*/
    width: 100%;
    text-align: center;
}

/*add style Mobile Development h3*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(1) > h3 {
    position: relative;
    font-size: 20px;
    color: #930A09;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Nunito', sans-serif;
}

/*add div for image  Mobile Development*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(2) {
    /*border: 1px solid red;*/
    width: 100%;
    height: 300px;
    position: relative;
}

/*add image into Mobile Development*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(2) > img {
    height: 228px;
    width: 228px;
    border-radius: 40px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/*description styles Mobile Development*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > pre {
    position: relative;
    text-align: center;
    display: inline-block;
    top: 20px;
    font-size: 18px;
    font-family: 'Nunito', sans-serif;
    color: #930A09;
    left: -39px;
}

/*add div for Web Development h3 text*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(1) {
    /*border: 1px solid red;*/
    width: 100%;
    text-align: center;
}

/*add style Web Development h3*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(1) > h3 {
    position: relative;
    font-size: 20px;
    color: #8E44AD;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Nunito', sans-serif;
}

body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(2) {
    /*border: 1px solid red;*/
    position: relative;
    width: 100%;
    height: 300px;
}

/*add image into Web Development*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(2) > img {
    height: 228px;
    width: 228px;
    border-radius: 40px;
    position: absolute;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

/*description styles Web Development*/
body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > pre {
    position: relative;
    text-align: center;
    display: inline-block;
    top: 20px;
    font-size: 18px;
    font-family: 'Nunito', sans-serif;
    color: #8E44AD;
    left: -39px;
}

/*------------------------------------------------------------------------------------*/
/*Main Section Skill*/
/*add background color*/
body > main > section:nth-child(4) {
    background: #fff;
    width: 100%;
    height: 710px;
    position: relative;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/*!*add Headline Skill*!*/
body > main > section:nth-child(4) > div:nth-child(1) {
    position: absolute;
    font-size: 20px;
    display: inline-block;
    text-align: center;

    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
}

/*!*add font to Skill*!*/
body > main > section:nth-child(4) > div:nth-child(1) > h2 {
    font-family: 'Poppins', sans-serif;
}

/*remove dfn italic style in Skill*/
body > main > section:nth-child(4) > div:nth-child(1) > h2 > dfn {
    font-style: normal;
}

/*introduction under Headline*/
body > main > section:nth-child(4) > div:nth-child(2) {
    position: absolute;
    font-size: 15px;
    display: inline-block;
    text-align: center;
    top: 44px;
    left: 10px;
    right: 0;
    margin: auto;
}

/*add colors to Skill */
#span9 {
    color: #000000;
}

#span10 {
    color: #8E44AD;
}

/*add grid box for languages*/
body > main > section:nth-child(4) > section:nth-child(3) {
    /*border: 1px solid blue;*/
    top: 90px;
    position: relative;
    display: grid;
    height: 600px;

    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(6, 1fr);
}

/*add little div box for languages*/
body > main > section:nth-child(4) > section:nth-child(3) > div {
    background: #FAFAFC;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    position: relative;
    /*border: 1px solid green;*/
    width: 90px;
    height: 90px;
    top: 30px;
    left: 50px;
    border-radius: 15px;
    transition: 1s;
    transition-property: background, color;
    cursor: none;
}

/*add over effect on skiils*/
body > main > section:nth-child(4) > section:nth-child(3) > div:hover {
    background: linear-gradient(45deg, #ED4264, #FFEDBC);
    color: white;
    /*border-radius: 25px;*/
    transition: 1s;
    transition-property: background, color;
}

/*add languages  & tools image*/
body > main > section:nth-child(4) > section:nth-child(3) > div > img {
    width: 50px;
    height: 50px;
    position: relative;
    left: 17px;
    top: 5px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 20px;
    transition: 1.5s;
}


/*add languages  & tools names */
body > main > section:nth-child(4) > section:nth-child(3) > div > p {
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    position: absolute;
    bottom: 9px;
    left: -5px;
    right: 0;
    margin: auto;
    text-align: center;

}


/*------------------------------------------------------------------------------------*/
/*Main Section Project*/
/*add background color*/
body > main > section:nth-child(5) {
    background: #F8F4F4;
    width: 100%;
    height: 710px;
    position: relative;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/*!*add Headline Project*!*/
body > main > section:nth-child(5) > div:nth-child(1) {
    position: absolute;
    font-size: 20px;
    display: inline-block;
    text-align: center;

    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
}

/*!*add font to Project*!*/
body > main > section:nth-child(5) > div:nth-child(1) > h2 {
    font-family: 'Poppins', sans-serif;
}

/*remove dfn italic style in Project*/
body > main > section:nth-child(5) > div:nth-child(1) > h2 > dfn {
    font-style: normal;
}

/*introduction under Headline*/
body > main > section:nth-child(5) > div:nth-child(2) {
    position: absolute;
    font-size: 15px;
    display: inline-block;
    text-align: center;
    top: 44px;
    left: 10px;
    right: 0;
    margin: auto;
}

/*add colors to Project */
#span11 {
    color: #000000;
}

#span12 {
    color: #8E44AD;
}

/*add flex box into my project*/
body > main > section:nth-child(5) > section:nth-child(3) {
    /*border: 1px solid green;*/
    display: flex;
    position: relative;
    top: 86px;
    width: 100%;
    height: 550px;
}

/*div projects boxes*/
body > main > section:nth-child(5) > section:nth-child(3) > div {
    /*border: 1px solid orange;*/
    width: 100%;
    height: 550px;
}

/*add div for all projects p tags*/
body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(1) {
    position: relative;
    /*border: 1px solid red;*/
    width: 100%;
    text-align: center;
}

/*add all projects names p tags styles*/
body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(1) > p {
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Nunito', sans-serif;
    color: #3900ff;
    font-size: 22px;
    width: 100%;
}

/*add div for Hostel-Management-System project image*/
body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
    /*border: 1px solid red;*/
    position: relative;
    width: 100%;
    height: 300px;
}

/*Hostel-Management-System project image*/
body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) > img {
    width: 373px;
    height: 260px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

/*add div for Git hyper image for  Hostel-Management-System*/
body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(3) {
    /*border: 1px solid red;*/
    width: 60px;
    height: 60px;
    position: relative;
    left: 200px;
    top: 50px;
}

/*add Git hyper image into  Hostel-Management-System */
body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(3) > a > img {
    width: 50px;
    height: 50px;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

/*add div for add Pet & Product Manage System project image*/
body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(2) {
    /*border: 1px solid red;*/
    width: 100%;
    height: 300px;
    position: relative;
}

/*Pet & Product Manage System project image*/
body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(2) > img {
    width: 370px;
    height: 250px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/*add div for add git hyper image for  Pet & Product Manage System project*/
body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(3) {
    /*border: 1px solid red;*/
    position: relative;
    width: 60px;
    height: 60px;
    left: 200px;
    top: 50px;
}

/*add git hyper image into  Pet & Product Manage System project */
body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(3) > a > img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
}

/*add div for Super Market Manage System project image*/
body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(2) {
    /*border: 1px solid red;*/
    width: 100%;
    height: 300px;
    position: relative;
}

/*Super Market Manage System project image*/
body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(2) > img {
    width: 342px;
    height: 250px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

}

/*add hover for git hyper image into Super Market Manage System project*/
body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(3) {
    /*border: 1px solid red;*/
    width: 60px;
    height: 60px;
    position: relative;
    left: 200px;
    top: 50px;
}

/*add git hyper image into Super Market Manage System project */
body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(3) > a > img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
}

/*add hover for all git divs*/
body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(3):hover {
    width: 61px;
    height: 61px;
    background: linear-gradient(90deg, #d53369 0%, #daae51 100%);
    border-radius: 60px;
}

/*view all button*/
body > main > section:nth-child(5) > button:last-child {
    /*background: #FFFFFF;*/
    border: 2px solid #000000;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    /*border-radius: 100px;*/

    width: 120px;
    height: 40px;

    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    margin: auto;

    background: #000;
    color: white;
    border-radius: 30px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

/*add view all button after and  before effect*/
body > main > section:nth-child(5) > button:last-child::after, body > main > section:nth-child(5) > button:last-child::before {
    content: '';
    position: absolute;
    opacity: 0.3;
    background: #000;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: -1;
    transition: transform 0.3s ease;
}

/*add hover effect*/
body > main > section:nth-child(5) > button:last-child:hover {
    transform: translate(-12px, -12px);
}

/*add hover after*/
body > main > section:nth-child(5) > button:last-child:hover::after {
    transform: translate(6px, 6px);
}

/*add hover before*/
body > main > section:nth-child(5) > button:last-child:hover::before {
    transform: translate(12px, 12px);
}


/*remove underline*/
body > main > section:nth-child(5) > button:nth-child(4) > a {
    text-decoration: none;
}

/*add styles to view all button next icon*/
body > main > section:nth-child(5) > button:last-child > a > i {
    position: relative;
    left: 16px;
}

/*add styles view all text*/
body > main > section:nth-child(5) > button:nth-child(4) > a, u {
    position: absolute;
    left: 11px;
    top: 6px;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    color: white;
    font-size: 18px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/*------------------------------------------------------------------------------------*/
/*Main Section Assessment*/
/*add background color*/
body > main > section:nth-child(10) {
    /*border: 1px solid red;*/
    background: #fff;
    width: 100%;
    height: 710px;
    position: relative;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/*add Headline Assessment*/
body > main > section:nth-child(10) > div:nth-child(1) {
    position: absolute;
    font-size: 20px;
    display: inline-block;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
}

/*add font to Project*/
body > main > section:nth-child(10) > div:nth-child(1) > h2 {
    font-family: 'Poppins', sans-serif;
}

/*add colors to Project */
#span21 {
    color: #000000;
}

#span22 {
    color: #8E44AD;
}

/*add flex for assessments section*/
body > main > section:nth-child(10) > section:nth-child(2) {
    /*border: 1px solid green;*/
    display: flex;
    position: relative;
    top: 80px;
    height: 600px;
    width: 100%;
}

/*div Assessment boxes*/
body > main > section:nth-child(10) > section:nth-child(2) > div {
    /*border: 1px solid orange;*/
    width: 100%;
    height: 100%;
}

/*add div for add all p tags*/
body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(1) {
    /*border: 1px solid red;*/
    width: 100%;
    text-align: center;
}

/*add all Assessment names p tags styles*/
body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(1) p {
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Nunito', sans-serif;
    color: #000000;
    font-size: 22px;
    width: 350px;
}

/*add div for add CSS Basics image*/
body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(1) > div:nth-child(2) {
    /*border: 1px solid red;*/
    width: 100%;
    height: 360px;
    position: relative;
}

/*CSS Basics image*/
body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(1) > div:nth-child(2) > img {
    width: 445px;
    height: 307px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 60px
}

/*add all view button in here one code*/
body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(3) {
    /*border: 1px solid red;*/
    width: 55px;
    height: 55px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
    position: relative;
    left: 200px;
    top: 60px;
    cursor: pointer;
}

/*add eye image into button*/
body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(3) > a > img {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/* add div for add CSS Animation image*/
body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
    /*border: 1px solid red;*/
    width: 100%;
    height: 360px;
    position: relative;

}

/*CSS Animation image*/
body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(2) > div:nth-child(2) > img {
    width: 411px;
    height: 314px;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0;
    right: 0;
    margin: auto;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 60px
}

/*add div for JA Animation image*/
body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) {
    /*border: 1px solid red;*/
    width: 100%;
    height: 360px;
    position: relative;
}

/*JA Animation image*/
body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) > img {
    width: 383px;
    height: 314px;
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0px;
    right: 0;
    margin: auto;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 60px
}

/*view all button*/
body > main > section:nth-child(10) > button:last-child {
    /*background: #FFFFFF;*/
    border: 2px solid #000000;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    /*border-radius: 100px;*/

    width: 120px;
    height: 40px;

    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    margin: auto;

    background: #000;
    color: white;
    border-radius: 30px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

/*add view all button after and  before effect*/
body > main > section:nth-child(10) > button:last-child::after, body > main > section:nth-child(10) > button:last-child::before {
    content: '';
    position: absolute;
    opacity: 0.3;
    background: #000;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: -1;
    transition: transform 0.3s ease;
}

/*add hover effect*/
body > main > section:nth-child(10) > button:last-child:hover {
    transform: translate(-12px, -12px);
}

/*add hover after*/
body > main > section:nth-child(10) > button:last-child:hover::after {
    transform: translate(6px, 6px);
}

/*add hover before*/
body > main > section:nth-child(10) > button:last-child:hover::before {
    transform: translate(12px, 12px);
}


/*remove underline*/
body > main > section:nth-child(10) > button:nth-child(3) > a {
    text-decoration: none;
}

/*add styles to view all button next icon*/
body > main > section:nth-child(10) > button:last-child > a > i {
    position: relative;
    left: 16px;
}

/*add image into view all button*/
body > main > section:nth-child(10) > button:nth-child(3) > a > img {
    width: 20px;
    height: auto;
    position: relative;
    top: 3px;
    left: 7px;
}

/*add styles view all text*/
body > main > section:nth-child(10) > button:nth-child(3) > a, u {
    position: absolute;
    left: 11px;
    top: 6px;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    color: white;
    font-size: 18px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}


/*------------------------------------------------------------------------------------*/
/*Main Section Journey*/
/*add background color*/
body > main > section:nth-child(11) {
    background: #fff;
    width: 100%;
    height: 1000px;
    position: relative;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/*!*add Headline Journey*!*/
body > main > section:nth-child(11) > div:nth-child(1) {
    position: absolute;
    font-size: 20px;
    display: inline-block;
    text-align: center;
    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
}

/*!*add font to Journey*!*/
body > main > section:nth-child(11) > div:nth-child(1) > h2 {
    font-family: 'Poppins', sans-serif;
}

/*remove dfn italic style in Journey*/
body > main > section:nth-child(11) > div:nth-child(1) > h2 > dfn {
    font-style: normal;
}

/*introduction under Headline*/
body > main > section:nth-child(11) > div:nth-child(2) {
    position: absolute;
    font-size: 15px;
    display: inline-block;
    text-align: center;
    top: 44px;
    left: 10px;
    right: 0;
    margin: auto;
}

/*add colors to Project */
#span13 {
    color: #000000;
}

#span14 {
    color: #8E44AD;
}

/*get flex for add all details and images*/
body > main > section:nth-child(11) > section:nth-child(3) {
    /*border: 1px solid red;*/
    width: 100%;
    height: 902px;
    position: relative;
    top: 95px;
    display: flex;
    flex-direction: column;
}

/*add height and width for individual sections*/
body > main > section:nth-child(11) > section:nth-child(3) > section {
    /*border: 1px solid green;*/
    width: 100%;
    height: 100%;
    position: relative;
}

/*add all div for images*/
body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) {
    /*border: 1px solid red;*/
    width: 110px;
    height: 110px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    transition: 0.5s;
}

/*add hover for divs*/
body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) :hover {
    width: 110px;
    height: 110px;
    transition: 0.5s;
    border: 1px solid #fff;
}

/*add styles for all  image*/
body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) > img {
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 100px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

/*add ijse & ccnp description*/
body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(1) > article:nth-child(2), body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(3) > article:nth-child(2) {
    /*border: 1px solid red;*/
    width: 300px;
    position: absolute;
    right: 300px;
    top: 70px;
    font-size: 14px;
    font-family: 'Nunito', sans-serif;
}

/*add all hr*/
body > main > section:nth-child(11) > section:nth-child(3) > section > hr:nth-child(3) {
    width: 100px;
    height: 2px;
    position: relative;
    bottom: -216px;
    transform: rotate(90deg);
    background-color: black;
}


/*add greatlake & school description*/
body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(2) > article:nth-child(2), body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(4) > article:nth-child(2) {
    /*border: 1px solid red;*/
    width: 300px;
    position: absolute;
    left: 300px;
    top: 70px;
    font-size: 14px;
    font-family: 'Nunito', sans-serif;
    text-align: right;
}

/*add journey headlines bold and shadow*/
.journey-headlines {
    font-weight: bold;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/*------------------------------------------------------------------------------------*/
/*Main Section Contact*/
/*add background color*/
body > main > section:nth-child(12) {
    background: #F8F4F4;
    width: 100%;
    height: 710px;
    position: relative;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/*!*add Headline Contact*!*/
body > main > section:nth-child(12) > div:nth-child(1) {
    position: absolute;
    font-size: 20px;
    display: inline-block;
    text-align: center;
    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
}

/*!*add font to Contact*!*/
body > main > section:nth-child(12) > div:nth-child(1) > h2 {
    font-family: 'Poppins', sans-serif;
}

/*remove dfn italic style in Contact*/
body > main > section:nth-child(12) > div:nth-child(1) > h2 > dfn {
    font-style: normal;
}

/*introduction under Headline*/
body > main > section:nth-child(12) > div:nth-child(2) {
    position: absolute;
    font-size: 15px;
    display: inline-block;
    text-align: center;
    top: 44px;
    left: 10px;
    right: 0;
    margin: auto;
}

/*add colors to Project */
#span15 {
    color: #000000;
}

#span16 {
    color: #8E44AD;
}

/*add section into contact section for add contact form*/
body > main > section:nth-child(12) > section:nth-child(3) {
    width: 90%;
    height: 80%;
    /*border: 1px solid red;*/
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 100px;
}

/*add border atyles for contact big git aside*/
body > main > section:nth-child(12) > section:nth-child(3) > aside:nth-child(1) {
    /*border: 1px solid red;*/
    height: 500px;
    width: 500px;
    position: relative;
    left: 90px;
    top: 30px;
}

/*add contact section gif*/
body > main > section:nth-child(12) > section:nth-child(3) > aside:nth-child(1) > img {
    height: 450px;
    width: 450px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 281px;
    position: absolute;
    left: 0px;
    right: 0;
    bottom: 0;
    top: 0px;
    margin: auto;
}

/*add form section*/
body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) {
    position: absolute;
    right: 50px;
    bottom: 40px;
}

/*!*add space in between form sections*!*/
body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div {
    position: relative;
    padding-bottom: 20px;
}

/*styles name, email, subject as a group selector*/
body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div > input {
    width: 450px;
    height: 40px;
    border: none;
    background: #D6EFED;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
}

/*add styles message area*/
body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div:nth-child(4) > textarea {
    height: 200px;
    width: 450px;
    border: none;
    outline-width: 0;

    background: #D6EFED;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
}

/*send button*/
body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5) {
    background: #3742FA;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border: 2px solid #FFFFFF;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    color: #FFFFFF;
    position: relative;
    left: 190px;
    cursor: pointer;
}

/*get fir left icon*/
body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5) > i {
    position: relative;
    left: -2px;
}

/*add hover for send button*/
body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5):hover {
    width: 51px;
    height: 51px;
    background: #fff;
    color: #3742FA;

}


/*------------------------------------------------------------------------------------*/
/*footer Links*/
/*add background color*/
body > footer {
    background: #231955;
    width: 100%;
    height: 450px;
    position: relative;
}

/*!*add Headline Links*!*/
body > footer > div:nth-child(1) {
    position: absolute;
    font-size: 20px;
    display: inline-block;
    text-align: center;

    top: -77px;
    left: 0;
    right: 0;
    margin: auto;
}

/*!*add font to  Links*!*/
body > footer > div:nth-child(1) > h2 {
    font-family: 'Poppins', sans-serif;
}

/*remove dfn italic style in Links*/
body > footer > div:nth-child(1) > h2 > dfn {
    font-style: normal;
}

/*introduction under Headline*/
body > footer > div:nth-child(2) {
    position: absolute;
    font-size: 15px;
    display: inline-block;
    text-align: center;
    top: -46px;
    left: 10px;
    right: 0;
    margin: auto;
}

/*add colors to Links */
#span17 {
    color: #000000;
}

#span18 {
    color: #8E44AD;
}

/*add flex into footer section*/
footer > section {
    display: flex;
    /*border: 1px solid red;*/
    position: relative;
    width: 100%;
    top: 10px;
}

/*add all divs under footer section*/
footer > section > div {
    /*border: 1px solid orange;*/
    width: 100%;
    height: 380px;
}

/*add all footer headlines border and center*/
footer > section:nth-child(3) > div > div:nth-child(1) {
    /*border: 1px solid red;*/
    width: 100%;
    text-align: center;
}

/*add styles for all footer headlines  portfolio text*/
footer > section:nth-child(3) > div > div:nth-child(1) > p {
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Nunito', sans-serif;
    color: #DC1515;
    font-size: 24px;
    position: relative;
}

/*add border and center description under kasun's portfolio*/
footer > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
    /*border: 1px solid red;*/
    width: 100%;
    text-align: center;
}

/*description under kasun's portfolio*/
footer > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) > article {
    color: #FFFFFF;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    position: relative;
}

/*add quick links nav section styles*/
footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) {
    /*border: 1px solid yellow;*/
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
}

/*add quick links nav section text styles*/
footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a {
    /*border: 1px solid red;*/
    width: 100%;
    height: 50px;
}

/*remove underline and default style in navigation*/
footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a, u {
    text-decoration: none;
    color: #FFFFFF;
    width: 100%;
    position: relative;
    text-align: center;
}

/*add hover for footer quick links*/
footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a:hover {
    font-size: 17px;
}

/*add point image in front of navigations*/
footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a > img {
    width: 20px;
    height: auto;
    position: absolute;
    left: 175px;
}

/*add over to change color in navigation links*/
footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a:hover {
    color: #F29393;
}

/*add border for conatct into section*/
footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) {
    /*border: 1px solid gold;*/
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
}

/*add flex for add email,name,phone and social images*/
footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address {
    /*border: 1px solid red;*/
    width: 100%;
    height: 300px;
}

/*add border and width and height for all image(gmail,location,phone) div*/
footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(1) {
    height: 50px;
    width: 50px;
    position: relative;
    /*border: 1px solid yellow;*/
    top: 11px;
    left: 40px;
}

/*add all image(gmail,location,phone)  into div*/
footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(1) > img {
    height: 40px;
    width: 40px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/*add div for all p tags in contact info*/
footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(2) {
    width: 100%;
    text-align: center;
    position: relative;
    bottom: 22px;
}

/*add styles for all p tags in contact info*/
footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(2) > p {
    color: #CFCFCF;
    font-family: 'Nunito', sans-serif;
    font-style: normal;
    display: inline-block;
    margin-bottom: 0px;
    margin-top: 0px;
}

/*add hr between footer*/
footer > hr:nth-child(4) {
    width: 90%;
    border: 1px solid #777777;
    position: relative;
    bottom: -7px;
}

/*developed by  text*/
footer > p:nth-child(5) {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    position: absolute;
    top: 403px;
    left: 566px;
    width: 140px;
}

/*loading gif*/
footer > img:nth-child(6) {
    width: 33px;
    height: 16px;
    position: absolute;
    top: 400px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 16px;
    transform: rotate(-90deg);
}

/*add colors developed by text*/
#span19 {
    color: #CFCFCF;
}

#span20 {
    color: #FF0000;
}

/*@ 2022 All Rights Reserved text*/
footer > p:nth-child(7) {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: white;
    position: absolute;
    right: 525px;
    bottom: 2px;
}


/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*Laptop Large*/
@media all and (max-width: 1024px) {
    /*------------------------------------------------------------------------------------*/
    /*HEADER SECTION*/
    /*Add Header */
    header {
        width: 100%;
        height: 70px;
        position: sticky;
        top: 0;
        z-index: 15;
        background: #FFFFFF;
    }

    /*add div box for add header image*/
    header > div:nth-child(1) {
        position: relative;
        left: 15px;
        top: 4px;
        /*border: 1px solid red;*/
    }

    /*add header image sizes*/
    header > div:nth-child(1) > img {
        width: 50px;
        height: 50px;
    }

    /*add header headlines inside articele*/
    header > nav > article {
        /*border: 1px solid red;*/
        position: absolute;
        right: 35px;
        top: 24px;
        font-size: 20px;
    }

    /*remove headlines underlines and add paddings*/
    body > header > nav > article > a, u {
        padding-right: 8px;
    }

    /*-----------------------------------------------------------------------*/
    /*go to up div*/
    /*add  div for go top up*/
    body > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: fixed;
        top: 520px;
        right: 20px;
    }

    body > div:nth-child(2):hover {
        width: 50px;
        height: 50px;
    }

    /*add image to div go top up*/
    body > div:nth-child(2) > a > img {
        width: 30px;
        height: 30px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Profile*/
    /*add styles for Profile section*/
    body > main > section:nth-child(1) {
        width: 100%;
        height: 440px;
    }

    /*add div for hi there im kasun weerasinghe*/
    body > main > section:nth-child(1) > div:nth-child(1) {
        /*border: 1px solid red;*/
        display: inline-block;
        position: relative;
        top: 85px;
        left: 20px;
    }

    /*h1 hi there im kasun weerasinghe text*/
    body > main > section:nth-child(1) > div:nth-child(1) > h1 {
        font-size: 30px;
    }

    /*added div for  i am front end developer text*/
    body > main > section:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        display: inline-block;
        top: 170px;
        left: -330px;
    }

    /*h1 i am front end developer*/
    body > main > section:nth-child(1) > div:nth-child(2) > h1 {
        font-size: 28px;
    }

    /*add border for social nav*/
    body > main > section:nth-child(1) > nav:nth-child(3) {
        /*border: 1px solid red;*/
        width: 570px;
        height: 90px;
        position: relative;
        left: 20px;
        top: 210px;
        display: flex;
        justify-content: space-around;
    }

    /*add social all divs*/
    body > main > section:nth-child(1) > nav:nth-child(3) > div {
        /*border: 1px solid blue;*/
        position: relative;
        width: 100%;
        height: 90px;
    }

    /*social icons add*/
    body > main > section:nth-child(1) > nav:nth-child(3) > div > a > i {
        position: absolute;
        font-size: 40px;
        left: 32px;
        top: 21px;
        text-decoration: none;
        color: black;
        transition: 0.5s;
    }

    /*add hover*/
    body > main > section:nth-child(1) > nav:nth-child(3) > div > a > i:hover {
        font-size: 45px;
    }

    /*add div for gif*/
    body > main > section:nth-child(1) > div:nth-child(4) {
        /*border: 1px solid red;*/
        display: inline-block;
        position: absolute;
        right: 20px;
        top: 70px;
        width: 300px;
        height: 300px;
    }

    /*Added gif into profile section */
    body > main > section:nth-child(1) > div:nth-child(4) > img {
        width: 300px;
        height: 300px;
    }


    /*add 2 colors using span to h1 tags*/
    #span1 {
        color: #002057;
    }

    #span2 {

        color: #FE7B01;
    }

    #span3 {
        color: #930A09;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section About Me*/
    /*add background color*/
    body > main > section:nth-child(2) {
        width: 100%;
        height: 600px;
        position: relative;
    }

    /*add Headline About Me*/
    body > main > section:nth-child(2) > div:nth-child(1) {
        position: absolute;
        font-size: 20px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*introduction under Headline*/
    body > main > section:nth-child(2) > div:nth-child(2) {
        position: absolute;
        font-size: 15px;
        display: inline-block;
        text-align: center;
        top: 34px;
        left: -8px;
        right: 0;
        margin: auto;
    }


    /*add div for profile image*/
    body > main > section:nth-child(2) > aside:nth-child(3) {
        width: 300px;
        height: 300px;
        /*border: 1px solid red;*/
        position: relative;
        top: 180px;
        left: 60px;
    }

    /*my profile image*/
    body > main > section:nth-child(2) > aside:nth-child(3) > img {
        width: 300px;
        height: 300px;
    }

    /*add hover for my profile picture*/
    body > main > section:nth-child(2) > aside:nth-child(3) > img:hover {
        transform: translateY(-3px);
    }

    /*adds styles for intro about me section*/
    body > main > section:nth-child(2) > section:nth-child(4) {
        /*border: 1px solid red;*/
        position: relative;
        left: 471px;
        bottom: 120px;
        width: 460px;

    }

    /*my name details description position */
    body > main > section:nth-child(2) > section:nth-child(4) > article:nth-child(1) {
        position: relative;
        font-size: 14px;
    }

    /*border to add my details*/
    body > main > section:nth-child(2) > div:nth-child(5) {
        /*border: 1px solid blue;*/
        position: relative;
        width: 450px;
        left: 471px;
        bottom: 70px;
        height: 162px;
    }

    /*!*add positions for all p inside div*!*/
    body > main > section:nth-child(2) > div:nth-child(5) > p {
        position: absolute;
        display: inline-block;
        font-size: 12px;
    }

    /*!*Maintain my details p tags*!*/
    /*name*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(1) {
        left: 0;
    }

    /*age*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(2) {
        height: 30px;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /*email*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(3) {
        left: 0;
        bottom: 0;
    }

    /*phone*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(4) {
        right: 0;
        top: 0;
    }

    /*place*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(5) {
        height: 30px;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /*!*add colors for my details topics*!*/
    .my-details {
        color: #021BFF;
    }

    /*!*Add hire me button*!*/
    body > main > section:nth-child(2) > div:nth-child(5) > a:nth-child(6) {
        padding: 3px 9px;
        font-size: 1.05rem;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section My Service*/
    /*add background color*/
    body > main > section:nth-child(3) {
        width: 100%;
        height: 540px;
        position: relative;
    }

    /*!*add Headline My Service*!*/
    body > main > section:nth-child(3) > div:nth-child(1) {
        position: absolute;
        font-size: 20px;
        display: inline-block;
        text-align: center;

        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(3) > div:nth-child(2) {
        position: absolute;
        font-size: 15px;
        display: inline-block;
        text-align: center;
        top: 34px;
        left: -8px;
        right: 0;
        margin: auto;
    }

    /*Add flex box for add my services*/
    body > main > section:nth-child(3) > article:nth-child(3) {
        display: flex;
        position: relative;
        width: 100%;
        height: 460px;
        top: 75px;
        /*border: 1px solid red;*/
    }

    /*Add sizes all divs in flex box*/
    body > main > section:nth-child(3) > article:nth-child(3) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 460px;
    }

    /*add div for  UX/UI h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style UX/UI h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 16px;
    }

    /*add div for UX/UI image*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        height: 200px;
    }

    /*add image into UX/UI*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(2) > img {
        height: 128px;
        width: 128px;
        border-radius: 40px;
    }

    /*description styles UX/UI*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 20px;
        font-size: 14px;
        left: -20px;

    }

    /*add div for Software Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Software Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 16px;
    }

    /*add div for image into Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(2) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        height: 200px;
    }

    /*add image into Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(2) > img {
        height: 128px;
        width: 128px;
    }

    /*description styles Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 20px;
        font-size: 14px;
        left: 2px;
        white-space: normal;
    }

    /*add div for Mobile Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Mobile Development h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 16px;
    }

    /*add div for image  Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 200px;
        position: relative;
    }

    /*add image into Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(2) > img {
        height: 128px;
        width: 128px;
    }

    /*description styles Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > pre {
        position: relative;
        text-align: center;
        top: 20px;
        font-size: 14px;
        left: -30px;
    }

    /*add div for Web Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Web Development h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 16px;
    }

    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        height: 200px;
    }

    /*add image into Web Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(2) > img {
        height: 128px;
        width: 128px;
    }

    /*description styles Web Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 20px;
        font-size: 14px;
        left: -39px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Skill*/
    /*add background color*/
    body > main > section:nth-child(4) {
        width: 100%;
        height: 690px;
    }

    /*!*add Headline Skill*!*/
    body > main > section:nth-child(4) > div:nth-child(1) {
        position: absolute;
        font-size: 20px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(4) > div:nth-child(2) {
        position: absolute;
        font-size: 15px;
        display: inline-block;
        text-align: center;
        top: 34px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add grid box for languages*/
    body > main > section:nth-child(4) > section:nth-child(3) {
        /*border: 1px solid blue;*/
        top: 80px;
        position: relative;
        display: grid;
        height: 590px;

        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(6, 1fr);
    }

    /*add little div box for languages*/
    body > main > section:nth-child(4) > section:nth-child(3) > div {
        position: relative;
        /*border: 1px solid green;*/
        width: 90px;
        height: 90px;
        top: 30px;
        left: 50px;
    }

    /*add languages  & tools image*/
    body > main > section:nth-child(4) > section:nth-child(3) > div > img {
        width: 50px;
        height: 50px;
        position: relative;
        left: 17px;
        top: 5px;
    }


    /*add languages  & tools names */
    body > main > section:nth-child(4) > section:nth-child(3) > div > p {
        font-size: 16px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Project*/
    /*add background color*/
    body > main > section:nth-child(5) {
        width: 100%;
        height: 510px;
        position: relative;
    }

    /*!*add Headline Project*!*/
    body > main > section:nth-child(5) > div:nth-child(1) {
        position: absolute;
        font-size: 20px;
        display: inline-block;
        text-align: center;

        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(5) > div:nth-child(2) {
        position: absolute;
        font-size: 15px;
        display: inline-block;
        text-align: center;
        top: 34px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add flex box into my project*/
    body > main > section:nth-child(5) > section:nth-child(3) {
        /*border: 1px solid green;*/
        display: flex;
        position: relative;
        top: 80px;
        width: 100%;
        height: 370px;
    }

    /*div projects boxes*/
    body > main > section:nth-child(5) > section:nth-child(3) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 370px;
    }

    /*add div for all projects p tags*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(1) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add all projects names p tags styles*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(1) > p {
        font-size: 16px;
        width: 100%;
    }

    /*add div for Hostel-Management-System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        height: 250px;
    }

    /*Hostel-Management-System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) > img {
        width: 270px;
        height: 190px;
    }

    /*add div for Git hyper image for  Hostel-Management-System*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 50px;
        height: 50px;
        position: relative;
        left: 140px;
        top: 7px;
    }

    /*add Git hyper image into  Hostel-Management-System */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(3) > a > img {
        width: 40px;
        height: 40px;
    }

    /*add div for add Pet & Product Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 250px;
        position: relative;
    }

    /*Pet & Product Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(2) > img {
        width: 250px;
        height: 170px;
    }

    /*add div for add git hyper image for  Pet & Product Manage System project*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(3) {
        /*border: 1px solid red;*/
        position: relative;
        width: 50px;
        height: 50px;
        left: 140px;
        top: 7px;
    }

    /*add git hyper image into  Pet & Product Manage System project */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(3) > a > img {
        width: 40px;
        height: 40px;
    }

    /*add div for Super Market Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 250px;
        position: relative;
    }

    /*Super Market Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(2) > img {
        width: 250px;
        height: 169px;

    }

    /*add  div for add image into Super Market Manage System project*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 50px;
        height: 50px;
        position: relative;
        left: 140px;
        top: 7px;
    }

    /*add git hyper image into Super Market Manage System project */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(3) > a > img {
        width: 40px;
        height: 40px;
    }

    /*add hover for all git divs*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(3):hover {
        width: 51px;
        height: 51px;
    }

    /*view all button*/
    body > main > section:nth-child(5) > button:last-child {
        width: 97px;
        height: 35px;
    }

    /*add styles to view all button next icon*/
    body > main > section:nth-child(5) > button:last-child > a > i {
        position: relative;
        left: 5px;
    }

    /*add styles view all text*/
    body > main > section:nth-child(5) > button:nth-child(4) > a, u {
        position: absolute;
        left: 11px;
        top: 6px;
        font-size: 14px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Assessment*/
    /*add background color*/
    body > main > section:nth-child(10) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 462px;
        position: relative;
    }

    /*add Headline Assessment*/
    body > main > section:nth-child(10) > div:nth-child(1) {
        position: absolute;
        font-size: 20px;
        display: inline-block;
        text-align: center;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*add flex for assessments section*/
    body > main > section:nth-child(10) > section:nth-child(2) {
        /*border: 1px solid green;*/
        display: flex;
        position: relative;
        top: 64px;
        height: 340px;
        width: 100%;
    }

    /*div Assessment boxes*/
    body > main > section:nth-child(10) > section:nth-child(2) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add div for add all p tags*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add all Assessment names p tags styles*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(1) p {
        font-size: 16px;
        width: 330px;
    }

    /*add div for add CSS Basics image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 200px;
        position: relative;
    }

    /*CSS Basics image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(1) > div:nth-child(2) > img {
        width: 200px;
        height: 160px;
        border-radius: 20px
    }

    /*add all view buttons in here one code*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 50px;
        height: 50px;
        border-radius: 50px;
        position: relative;
        left: 150px;
        top: 20px;
        cursor: pointer;
    }

    /*add eye image into button*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(3) > a > img {
        width: 30px;
        height: 30px;
    }

    /* add div for add CSS Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 200px;
        position: relative;

    }

    /*CSS Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(2) > div:nth-child(2) > img {
        width: 200px;
        height: 160px;
        border-radius: 20px
    }

    /*add div for JA Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 200px;
        position: relative;
    }

    /*JA Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) > img {
        width: 200px;
        height: 160px;
        border-radius: 20px
    }

    /*view all button*/
    body > main > section:nth-child(10) > button:last-child {
        width: 97px;
        height: 35px;
    }


    /*remove underline*/
    body > main > section:nth-child(10) > button:nth-child(3) > a {
        text-decoration: none;
    }

    /*add styles to view all button next icon*/
    body > main > section:nth-child(10) > button:last-child > a > i {
        position: relative;
        left: 5px;
    }


    /*add styles view all text*/
    body > main > section:nth-child(10) > button:nth-child(3) > a, u {
        position: absolute;
        left: 11px;
        top: 6px;
        font-size: 14px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Journey*/
    /*add background color*/
    body > main > section:nth-child(11) {
        width: 100%;
        height: 941px;
        position: relative;
    }

    /*!*add Headline Journey*!*/
    body > main > section:nth-child(11) > div:nth-child(1) {
        position: absolute;
        font-size: 20px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*introduction under Headline*/
    body > main > section:nth-child(11) > div:nth-child(2) {
        position: absolute;
        font-size: 15px;
        display: inline-block;
        text-align: center;
        top: 34px;
        left: 10px;
        right: 0;
        margin: auto;
    }


    /*get flex for add all details and images*/
    body > main > section:nth-child(11) > section:nth-child(3) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 840px;
        position: relative;
        top: 95px;
        display: flex;
        flex-direction: column;
    }

    /*add height and width for individual sections*/
    body > main > section:nth-child(11) > section:nth-child(3) > section {
        /*border: 1px solid green;*/
        width: 100%;
        height: 100%;
        position: relative;
    }

    /*add all div for images*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) {
        /*border: 1px solid red;*/
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        transition: 0.5s;
    }

    /*add hover for divs*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) :hover {
        width: 100px;
        height: 100px;
    }

    /*add styles for all  image*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) > img {
        width: 90px;
        height: 90px;
    }

    /*add ijse & ccnp description*/
    body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(1) > article:nth-child(2), body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(3) > article:nth-child(2) {
        /*border: 1px solid red;*/
        width: 300px;
        position: absolute;
        right: 140px;
        top: 70px;
        font-size: 12px;
    }

    /*add all hr*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > hr:nth-child(3) {
        width: 90px;
        height: 2px;
        position: relative;
        bottom: -201px;
        transform: rotate(90deg);
        background-color: black;
    }


    /*add greatlake & school description*/
    body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(2) > article:nth-child(2), body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(4) > article:nth-child(2) {
        /*border: 1px solid red;*/
        width: 300px;
        position: absolute;
        left: 140px;
        top: 70px;
        font-size: 12px;
        text-align: right;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Contact*/
    /*add background color*/
    body > main > section:nth-child(12) {
        width: 100%;
        height: 481px;
        position: relative;
    }

    /*!*add Headline Contact*!*/
    body > main > section:nth-child(12) > div:nth-child(1) {
        position: absolute;
        font-size: 20px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*introduction under Headline*/
    body > main > section:nth-child(12) > div:nth-child(2) {
        position: absolute;
        font-size: 15px;
        display: inline-block;
        text-align: center;
        top: 34px;
        left: 10px;
        right: 0;
        margin: auto;
    }


    /*add section into contact section for add contact form*/
    body > main > section:nth-child(12) > section:nth-child(3) {
        width: 80%;
        height: 80%;
        /*border: 1px solid red;*/
        position: absolute;
        top: 60px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 40px;
    }

    /*add border atyles for contact big git aside*/
    body > main > section:nth-child(12) > section:nth-child(3) > aside:nth-child(1) {
        height: 300px;
        width: 300px;
        /*border: 1px solid red;*/
        position: relative;
        left: 10px;
        top: 30px;
    }

    /*add contact section gif*/
    body > main > section:nth-child(12) > section:nth-child(3) > aside:nth-child(1) > img {
        height: 300px;
        width: 300px;
        border-radius: 60px;
    }

    /*add form section*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) {
        position: absolute;
        right: 50px;
        bottom: 50px;
    }

    /*!*add space in between form sections*!*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div {
        position: relative;
        padding-bottom: 10px;
    }

    /*styles name, email, subject as a group selector*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div > input {
        width: 300px;
        height: 30px;
        border: none;
        font-size: 10px;
    }

    /*add styles message area*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div:nth-child(4) > textarea {
        height: 100px;
        width: 300px;
        border: none;
        outline-width: 0;
        font-size: 10px;
    }

    /*send button*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5) {
        border-radius: 50px;
        width: 40px;
        height: 40px;
        position: relative;
        left: 140px;
    }

    /*get fir left icon*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5) > i {
        position: relative;
        left: -2px;
    }

    /*add hover for send button*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5):hover {
        width: 41px;
        height: 41px;
    }

    /*------------------------------------------------------------------------------------*/
    /*footer Links*/
    /*add background color*/
    body > footer {
        width: 100%;
        height: 250px;
        position: relative;
    }

    /*!*add Headline Links*!*/
    body > footer > div:nth-child(1) {
        position: absolute;
        font-size: 20px;
        display: inline-block;
        text-align: center;

        top: -76px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > footer > div:nth-child(2) {
        position: absolute;
        font-size: 15px;
        display: inline-block;
        text-align: center;
        top: -46px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add flex into footer section*/
    footer > section {
        display: flex;
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        top: 0px;
        height: 210px;
    }

    /*add all divs under footer section*/
    footer > section > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 210px;
    }

    /*add all footer headlines border and center*/
    footer > section:nth-child(3) > div > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add styles for all footer headlines  portfolio text*/
    footer > section:nth-child(3) > div > div:nth-child(1) > p {
        font-size: 16px;
        position: relative;
    }

    /*add border and center description under kasun's portfolio*/
    footer > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*description under kasun's portfolio*/
    footer > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) > article {
        font-size: 16px;
        position: relative;
    }

    /*add quick links nav section styles*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) {
        /*border: 1px solid yellow;*/
        width: 100%;
        height: 157px;
        display: flex;
        flex-direction: column;
    }

    /*add quick links nav section text styles*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a {
        /*border: 1px solid red;*/
        width: 100%;
        height: 50px;
        font-size: 15px
    }

    /*remove underline and default style in navigation*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a, u {
        width: 100%;
        position: relative;
        text-align: center;
    }

    /*add hover for footer quick links*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a:hover {
        font-size: 17px;
    }

    /*add point image in front of navigations*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a > img {
        width: 12px;
        height: auto;
        position: absolute;
        left: 110px;
    }

    /*add border for conatact into section*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) {
        /*border: 1px solid gold;*/
        width: 100%;
        height: 157px;
        display: flex;
        flex-direction: column;
    }

    /*add flex for add email,name,phone and social images*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address {
        /*border: 1px solid green;*/
        width: 100%;
        height: 50px;
    }

    /*add border and width and height for all image(gmail,location,phone) div*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(1) {
        height: 40px;
        width: 40px;
        position: relative;
        /*border: 1px solid yellow;*/
        top: 5px;
        left: 20px;
    }

    /*add all image(gmail,location,phone)  into div*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(1) > img {
        height: 40px;
        width: 40px;
    }

    /*add div for all p tags in contact info*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(2) {
        width: 100%;
        text-align: center;
        position: relative;
        bottom: 22px;
    }

    /*add styles for all p tags in contact info*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(2) > p {
        display: inline-block;
        margin-bottom: 0px;
        margin-top: 0px;
        font-size: 13px;

    }

    /*add hr between footer*/
    footer > hr:nth-child(4) {
        width: 90%;
        position: relative;
        bottom: -1px;
    }

    /*developed by  text*/
    footer > p:nth-child(5) {
        font-size: 12px;
        position: absolute;
        top: 217px;
        left: 380px;
        width: 140px;
    }

    /*loading gif*/
    footer > img:nth-child(6) {
        width: 22px;
        height: 10px;
        position: absolute;
        top: 222px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*add colors developed by text*/
    #span19 {
        color: #CFCFCF;
    }

    #span20 {
        color: #FF0000;
    }

    /*@ 2022 All Rights Reserved text*/
    footer > p:nth-child(7) {
        font-size: 12px;
        position: absolute;
        right: 343px;
        bottom: -5px;
    }

}


/*Tablet*/
/*Responsive 768 (min-width: 436px) and*/
/*Mobile Small 768*/
@media all and (max-width: 768px) {

    /*------------------------------------------------------------------------------------*/
    /*HEADER SECTION*/
    /*Add Header */
    header {
        width: 100%;
        height: 70px;
        position: sticky;
        top: 0;
        z-index: 15;
    }

    /*add div box for add header image*/
    header > div:nth-child(1) {
        position: relative;
        left: 15px;
        top: 4px;
        /*border: 1px solid red;*/
    }

    /*add header image sizes*/
    header > div:nth-child(1) > img {
        width: 50px;
        height: 50px;
    }

    /*add header headlines inside articele*/
    header > nav > article {
        /*border: 1px solid red;*/
        position: absolute;
        right: 35px;
        top: 24px;
        font-weight: bold;
        font-size: 20px;
    }

    /*-----------------------------------------------------------------------*/
    /*go to up div*/
    /*add  div for go top up*/
    body > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: fixed;
        top: 500px;
        right: 20px;
    }

    body > div:nth-child(2):hover {
        width: 50px;
        height: 50px;
    }

    /*add image to div go top up*/
    body > div:nth-child(2) > a > img {
        width: 30px;
        height: 30px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Profile*/
    /*add styles for Profile section*/
    body > main > section:nth-child(1) {
        width: 100%;
        height: 160px;
    }

    /*add div for hi there im kasun weerasinghe*/
    body > main > section:nth-child(1) > div:nth-child(1) {
        /*border: 1px solid red;*/
        display: inline-block;
        position: relative;
        top: 15px;
        left: 20px;
    }

    /*h1 hi there im kasun weerasinghe text*/
    body > main > section:nth-child(1) > div:nth-child(1) > h1 {
        font-size: 20px;
    }

    /*added div for  i am front end developer text*/
    body > main > section:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        display: inline-block;
        top: 50px;
        left: -213px;
    }

    /*h1 i am front end developer*/
    body > main > section:nth-child(1) > div:nth-child(2) > h1 {
        font-size: 18px;
    }

    /*add border for social nav*/
    body > main > section:nth-child(1) > nav:nth-child(3) {
        /*border: 1px solid red;*/
        width: 200px;
        height: 40px;
        position: relative;
        left: 20px;
        top: 40px;
        display: flex;
        justify-content: space-around;
    }

    /*add social all divs*/
    body > main > section:nth-child(1) > nav:nth-child(3) > div {
        /*border: 1px solid blue;*/
        position: relative;
        width: 100%;
        height: 40px;
    }

    /*social icons add*/
    body > main > section:nth-child(1) > nav:nth-child(3) > div > a > i {
        position: absolute;
        font-size: 22px;
        left: 7px;
        top: -9px;
        text-decoration: none;
    }

    /*add hover */
    body > main > section:nth-child(1) > nav:nth-child(3) > div > a > i:hover {
        font-size: 23px;
    }

    /*add div for gif*/
    body > main > section:nth-child(1) > div:nth-child(4) {
        /*border: 1px solid red;*/
        display: inline-block;
        position: absolute;
        right: 20px;
        top: 20px;
        width: 120px;
        height: 120px;
    }

    /*Added gif into profile section */
    body > main > section:nth-child(1) > div:nth-child(4) > img {
        width: 100px;
        height: 114px;
    }


    /*add 2 colors using span to h1 tags*/
    #span1 {
        color: #002057;
    }

    #span2 {

        color: #FE7B01;
    }

    #span3 {
        color: #930A09;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section About Me*/
    /*add background color*/
    body > main > section:nth-child(2) {
        width: 100%;
        height: 443px;
        position: relative;
    }

    /*add Headline About Me*/
    body > main > section:nth-child(2) > div:nth-child(1) {
        position: absolute;
        font-size: 18px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*introduction under Headline*/
    body > main > section:nth-child(2) > div:nth-child(2) {
        position: absolute;
        font-size: 13px;
        display: inline-block;
        text-align: center;
        top: 30px;
        left: -8px;
        right: 0;
        margin: auto;
    }


    /*add div for profile image*/
    body > main > section:nth-child(2) > aside:nth-child(3) {
        width: 200px;
        height: 200px;
        /*border: 1px solid red;*/
        position: relative;
        top: 140px;
        left: 110px;
    }

    /*my profile image*/
    body > main > section:nth-child(2) > aside:nth-child(3) > img {
        width: 180px;
        height: 180px;
    }

    /*add hover for my profile picture*/
    body > main > section:nth-child(2) > aside:nth-child(3) > img:hover {
        transform: translateY(-3px);
    }

    /*adds styles for intro about me section*/
    body > main > section:nth-child(2) > section:nth-child(4) {
        /*border: 1px solid red;*/
        position: relative;
        left: 361px;
        bottom: 81px;
        width: 350px;

    }

    /*my name details description position */
    body > main > section:nth-child(2) > section:nth-child(4) > article:nth-child(1) {
        position: relative;
        font-size: 12px;
    }

    /*border to add my details*/
    body > main > section:nth-child(2) > div:nth-child(5) {
        /*border: 1px solid blue;*/
        position: relative;
        width: 350px;
        left: 361px;
        bottom: 60px;
        height: 132px;
    }

    /*!*add positions for all p inside div*!*/
    body > main > section:nth-child(2) > div:nth-child(5) > p {
        position: absolute;
        display: inline-block;
        font-size: 10px;
    }

    /*!*Maintain my details p tags*!*/
    /*name*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(1) {
        left: 0;
    }

    /*age*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(2) {
        height: 30px;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /*email*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(3) {
        left: 0;
        bottom: 0;
    }

    /*phone*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(4) {
        right: 0;
        top: 0;
    }

    /*place*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(5) {
        height: 30px;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /*!*add colors for my details topics*!*/
    .my-details {
        color: #021BFF;
    }

    /*!*Add hire me button*!*/
    body > main > section:nth-child(2) > div:nth-child(5) > a:nth-child(6) {
        padding: 3px 9px;
        font-size: 1.05rem;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section My Service*/
    /*add background color*/
    body > main > section:nth-child(3) {
        width: 100%;
        height: 426px;
        position: relative;
    }

    /*!*add Headline My Service*!*/
    body > main > section:nth-child(3) > div:nth-child(1) {
        position: absolute;
        font-size: 18px;
        display: inline-block;
        text-align: center;

        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(3) > div:nth-child(2) {
        position: absolute;
        font-size: 13px;
        display: inline-block;
        text-align: center;
        top: 34px;
        left: -8px;
        right: 0;
        margin: auto;
    }

    /*Add flex box for add my services*/
    body > main > section:nth-child(3) > article:nth-child(3) {
        display: flex;
        position: relative;
        width: 100%;
        height: 340px;
        top: 75px;
        /*border: 1px solid red;*/
    }

    /*Add sizes all divs in flex box*/
    body > main > section:nth-child(3) > article:nth-child(3) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 340px;
    }

    /*add div for  UX/UI h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style UX/UI h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 14px;
    }

    /*add div for UX/UI image*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        height: 150px;
    }

    /*add image into UX/UI*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(2) > img {
        height: 100px;
        width: 100px;
        border-radius: 20px;
    }

    /*description styles UX/UI*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 10px;
        font-size: 12px;
        left: -35px;

    }

    /*add div for Software Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Software Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 14px;
    }

    /*add div for image into Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(2) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        height: 150px;
    }

    /*add image into Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(2) > img {
        height: 100px;
        width: 100px;
    }

    /*description styles Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 20px;
        font-size: 12px;
        left: 2px;
        white-space: normal;
    }

    /*add div for Mobile Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Mobile Development h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 14px;
    }

    /*add div for image  Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 150px;
        position: relative;
    }

    /*add image into Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(2) > img {
        height: 100px;
        width: 100px;
    }

    /*description styles Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > pre {
        position: relative;
        text-align: center;
        top: 20px;
        font-size: 12px;
        left: 0px;
        white-space: normal;
    }

    /*add div for Web Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Web Development h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 14px;
    }

    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        height: 150px;
    }

    /*add image into Web Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(2) > img {
        height: 100px;
        width: 100px;
    }

    /*description styles Web Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 20px;
        font-size: 12px;
        left: 0px;
        white-space: normal;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Skill*/
    /*add background color*/
    body > main > section:nth-child(4) {
        width: 100%;
        height: 563px;
    }

    /*!*add Headline Skill*!*/
    body > main > section:nth-child(4) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(4) > div:nth-child(2) {
        position: absolute;
        font-size: 12px;
        display: inline-block;
        text-align: center;
        top: 20px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add grid box for languages*/
    body > main > section:nth-child(4) > section:nth-child(3) {
        /*border: 1px solid blue;*/
        top: 80px;
        position: relative;
        display: grid;
        height: 477px;

        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(6, 1fr);
    }

    /*add little div box for languages*/
    body > main > section:nth-child(4) > section:nth-child(3) > div {
        position: relative;
        /*border: 1px solid green;*/
        width: 90px;
        height: 90px;
        top: 30px;
        left: 20px;
    }

    /*add languages  & tools image*/
    body > main > section:nth-child(4) > section:nth-child(3) > div > img {
        width: 50px;
        height: 50px;
        position: relative;
        left: 17px;
        top: 5px;
    }


    /*add languages  & tools names */
    body > main > section:nth-child(4) > section:nth-child(3) > div > p {
        font-size: 16px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Project*/
    /*add background color*/
    body > main > section:nth-child(5) {
        width: 100%;
        height: 386px;
        position: relative;
    }

    /*!*add Headline Project*!*/
    body > main > section:nth-child(5) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;

        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(5) > div:nth-child(2) {
        position: absolute;
        font-size: 12px;
        display: inline-block;
        text-align: center;
        top: 23px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add flex box into my project*/
    body > main > section:nth-child(5) > section:nth-child(3) {
        /*border: 1px solid green;*/
        display: flex;
        position: relative;
        top: 55px;
        width: 100%;
        height: 280px;
    }

    /*div projects boxes*/
    body > main > section:nth-child(5) > section:nth-child(3) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 280px;
    }

    /*add div for all projects p tags*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(1) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add all projects names p tags styles*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(1) > p {
        font-size: 14px;
        width: 100%;
    }

    /*add div for Hostel-Management-System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        height: 170px;
    }

    /*Hostel-Management-System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) > img {
        width: 190px;
        height: 112px;
    }

    /*add div for Git hyper image for  Hostel-Management-System*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 40px;
        height: 40px;
        position: relative;
        left: 100px;
        top: 7px;
    }

    /*add Git hyper image into  Hostel-Management-System */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(3) > a > img {
        width: 30px;
        height: 30px;
    }

    /*add div for add Pet & Product Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 170px;
        position: relative;
    }

    /*Pet & Product Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(2) > img {
        width: 184px;
        height: 125px;
    }

    /*add div for add git hyper image for  Pet & Product Manage System project*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(3) {
        /*border: 1px solid red;*/
        position: relative;
        width: 40px;
        height: 40px;
        left: 100px;
        top: 7px;
    }

    /*add git hyper image into  Pet & Product Manage System project */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(3) > a > img {
        width: 30px;
        height: 30px;
    }

    /*add div for Super Market Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 170px;
        position: relative;
    }

    /*Super Market Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(2) > img {
        width: 183px;
        height: 124px;

    }

    /*add  div for add image into Super Market Manage System project*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 40px;
        height: 40px;
        position: relative;
        left: 100px;
        top: 7px;
    }

    /*add git hyper image into Super Market Manage System project */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(3) > a > img {
        width: 30px;
        height: 30px;
    }

    /*add hover for all git divs*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(3):hover {
        width: 41px;
        height: 41px;
    }

    /*view all button*/
    body > main > section:nth-child(5) > button:last-child {
        width: 77px;
        height: 30px;
    }

    /*add styles to view all button next icon*/
    body > main > section:nth-child(5) > button:last-child > a > i {
        position: relative;
        left: 5px;
    }

    /*add styles view all text*/
    body > main > section:nth-child(5) > button:nth-child(4) > a, u {
        position: absolute;
        left: 7px;
        top: 6px;
        font-size: 12px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Assessment*/
    /*add background color*/
    body > main > section:nth-child(10) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 407px;
        position: relative;
    }

    /*add Headline Assessment*/
    body > main > section:nth-child(10) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*add flex for assessments section*/
    body > main > section:nth-child(10) > section:nth-child(2) {
        /*border: 1px solid green;*/
        display: flex;
        position: relative;
        top: 46px;
        height: 313px;
        width: 100%;
    }

    /*div Assessment boxes*/
    body > main > section:nth-child(10) > section:nth-child(2) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add div for add all p tags*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add all Assessment names p tags styles*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(1) p {
        font-size: 14px;
        width: 100%
    }

    /*add div for add CSS Basics image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 200px;
        position: relative;
    }

    /*CSS Basics image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(1) > div:nth-child(2) > img {
        width: 200px;
        height: 160px;
        border-radius: 20px
    }

    /*add all view buttons in here one code*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 40px;
        height: 40px;
        border-radius: 50px;
        position: relative;
        left: 100px;
        top: 10px;
        cursor: pointer;
    }

    /*add eye image into button*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(3) > a > img {
        width: 20px;
        height: 20px;
    }

    /* add div for add CSS Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 200px;
        position: relative;

    }

    /*CSS Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(2) > div:nth-child(2) > img {
        width: 200px;
        height: 160px;
        border-radius: 20px
    }

    /*add div for JA Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 200px;
        position: relative;
    }

    /*JA Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) > img {
        width: 200px;
        height: 160px;
        border-radius: 20px
    }

    /*view all button*/
    body > main > section:nth-child(10) > button:last-child {
        width: 77px;
        height: 30px;
    }

    /*remove underline*/
    body > main > section:nth-child(10) > button:nth-child(3) > a {
        text-decoration: none;
    }

    /*add styles to view all button next icon*/
    body > main > section:nth-child(10) > button:last-child > a > i {
        position: relative;
        left: 5px;
    }


    /*add styles view all text*/
    body > main > section:nth-child(10) > button:nth-child(3) > a, u {
        position: absolute;
        left: 7px;
        top: 6px;
        font-size: 12px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Journey*/
    /*add background color*/
    body > main > section:nth-child(11) {
        width: 100%;
        height: 876px;
        position: relative;
    }

    /*!*add Headline Journey*!*/
    body > main > section:nth-child(11) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*introduction under Headline*/
    body > main > section:nth-child(11) > div:nth-child(2) {
        position: absolute;
        font-size: 12px;
        display: inline-block;
        text-align: center;
        top: 24px;
        left: 10px;
        right: 0;
        margin: auto;
    }


    /*get flex for add all details and images*/
    body > main > section:nth-child(11) > section:nth-child(3) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 810px;
        position: relative;
        top: 60px;
        display: flex;
        flex-direction: column;
    }

    /*add height and width for individual sections*/
    body > main > section:nth-child(11) > section:nth-child(3) > section {
        /*border: 1px solid green;*/
        width: 100%;
        height: 100%;
        position: relative;
    }

    /*add all div for images*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) {
        /*border: 1px solid red;*/
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        transition: 0.5s;
    }

    /*add hover for divs*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) :hover {
        width: 100px;
        height: 100px;
    }

    /*add styles for all  image*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) > img {
        width: 90px;
        height: 90px;
    }

    /*add ijse & ccnp description*/
    body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(1) > article:nth-child(2), body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(3) > article:nth-child(2) {
        /*border: 1px solid red;*/
        width: 270px;
        position: absolute;
        right: 41px;
        top: 70px;
        font-size: 12px;
    }

    /*add all hr*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > hr:nth-child(3) {
        width: 90px;
        height: 2px;
        position: relative;
        bottom: -191px;
        transform: rotate(90deg);
        background-color: black;
    }


    /*add greatlake & school description*/
    body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(2) > article:nth-child(2), body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(4) > article:nth-child(2) {
        /*border: 1px solid red;*/
        width: 270px;
        position: absolute;
        left: 41px;
        top: 70px;
        font-size: 12px;
        text-align: right;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Contact*/
    /*add background color*/
    body > main > section:nth-child(12) {
        width: 100%;
        height: 300px;
        position: relative;
    }

    /*!*add Headline Contact*!*/
    body > main > section:nth-child(12) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*introduction under Headline*/
    body > main > section:nth-child(12) > div:nth-child(2) {
        position: absolute;
        font-size: 12px;
        display: inline-block;
        text-align: center;
        top: 24px;
        left: 10px;
        right: 0;
        margin: auto;
    }


    /*add section into contact section for add contact form*/
    body > main > section:nth-child(12) > section:nth-child(3) {
        width: 70%;
        height: 70%;
        /*border: 1px solid red;*/
        position: absolute;
        top: 40px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 40px;
    }

    /*add border atyles for contact big git aside*/
    body > main > section:nth-child(12) > section:nth-child(3) > aside:nth-child(1) {
        height: 160px;
        width: 160px;
        /*border: 1px solid red;*/
        position: relative;
        left: 40px;
        top: 26px;
    }

    /*add contact section gif*/
    body > main > section:nth-child(12) > section:nth-child(3) > aside:nth-child(1) > img {
        height: 149px;
        width: 140px;
        border-radius: 17px;
    }

    /*add form section*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) {
        position: absolute;
        right: 50px;
        bottom: 7px;
    }

    /*!*add space in between form sections*!*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div {
        position: relative;
        padding-bottom: 7px;
    }

    /*styles name, email, subject as a group selector*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div > input {
        width: 150px;
        height: 20px;
        border: none;
        font-size: 7px;
    }

    /*add styles message area*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div:nth-child(4) > textarea {
        width: 150px;
        height: 50px;
        border: none;
        outline-width: 0;
        font-size: 7px;
    }

    /*send button*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5) {
        border-radius: 50px;
        width: 30px;
        height: 30px;
        position: relative;
        left: 60px;
    }

    /*get fir left icon*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5) > i {
        position: relative;
        left: -2px;
    }

    /*add hover for send button*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5):hover {
        width: 31px;
        height: 31px;
    }

    /*------------------------------------------------------------------------------------*/
    /*footer Links*/
    /*add background color*/
    body > footer {
        width: 100%;
        height: 240px;
        position: relative;
    }

    /*!*add Headline Links*!*/
    body > footer > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: -66px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > footer > div:nth-child(2) {
        position: absolute;
        font-size: 12px;
        display: inline-block;
        text-align: center;
        top: -46px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add flex into footer section*/
    footer > section {
        display: flex;
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        top: 0px;
        height: 190px;
    }

    /*add all divs under footer section*/
    footer > section > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 190px;
    }

    /*add all footer headlines border and center*/
    footer > section:nth-child(3) > div > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add styles for all footer headlines  portfolio text*/
    footer > section:nth-child(3) > div > div:nth-child(1) > p {
        font-size: 14px;
        position: relative;
    }

    /*add border and center description under kasun's portfolio*/
    footer > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
        top: 20px;
    }

    /*description under kasun's portfolio*/
    footer > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) > article {
        font-size: 12px;
        position: relative;
    }

    /*add quick links nav section styles*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) {
        /*border: 1px solid yellow;*/
        width: 100%;
        height: 142px;
        display: flex;
        flex-direction: column;
    }

    /*add quick links nav section text styles*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a {
        /*border: 1px solid red;*/
        width: 100%;
        height: 50px;
        font-size: 14px
    }

    /*remove underline and default style in navigation*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a, u {
        width: 100%;
        position: relative;
        text-align: center;
    }

    /*add hover for footer quick links*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a:hover {
        font-size: 15px;
    }

    /*add point image in front of navigations*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a > img {
        width: 10px;
        height: auto;
        position: absolute;
        left: 80px;
    }

    /*add border for conatact into section*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) {
        /*border: 1px solid gold;*/
        width: 100%;
        height: 142px;
        display: flex;
        flex-direction: column;
    }

    /*add flex for add email,name,phone and social images*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address {
        /*border: 1px solid green;*/
        width: 100%;
        height: 45px;
    }

    /*add border and width and height for all image(gmail,location,phone) div*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(1) {
        height: 30px;
        width: 30px;
        position: relative;
        /*border: 1px solid yellow;*/
        top: 5px;
        left: 4px;
    }

    /*add all image(gmail,location,phone)  into div*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(1) > img {
        height: 30px;
        width: 30px;
    }

    /*add div for all p tags in contact info*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(2) {
        width: 100%;
        text-align: center;
        position: relative;
        bottom: 22px;
    }

    /*add styles for all p tags in contact info*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(2) > p {
        display: inline-block;
        margin-bottom: 0px;
        margin-top: 0px;
        font-size: 12px;

    }

    /*add hr between footer*/
    footer > hr:nth-child(4) {
        width: 90%;
        position: relative;
        bottom: -1px;
    }

    /*developed by  text*/
    footer > p:nth-child(5) {
        font-size: 10px;
        position: absolute;
        top: 207px;
        left: 270px;
        width: 140px;
    }

    /*loading gif*/
    footer > img:nth-child(6) {
        width: 27px;
        height: 14px;
        position: absolute;
        top: 204px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*add colors developed by text*/
    #span19 {
        color: #CFCFCF;
    }

    #span20 {
        color: #FF0000;
    }

    /*@ 2022 All Rights Reserved text*/
    footer > p:nth-child(7) {
        font-size: 10px;
        position: absolute;
        right: 239px;
        bottom: 1px;
    }


}


/*Mobile*/
/*Responsive 435px*/
/*Mobile Small 435px*/
@media all and (max-width: 425px) {
    /*page loading gif 425,375,320 all in this code*/
    body > div:nth-child(3) {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        opacity: 0.9;
        background-color: #000000;
        z-index: 99;
    }

    body > div:nth-child(3) > div {
        width: 300px;
        height: 200px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: url("../images/loading/loadingImg1.gif");
        background-size: cover;
        background-position: center;
        z-index: 100;
    }
    /*------------------------------------------------------------------------------------*/
    /*HEADER SECTION*/
    /*Add Header */
    header {
        width: 100%;
        height: 30px;
        position: sticky;
        top: 0;
        z-index: 15;
    }

    /*add div box for add header image*/
    header > div:nth-child(1) {
        width: 20px;
        height: 20px;
        position: relative;
        left: 15px;
        top: 4px;
        /*border: 1px solid red;*/
    }

    /*add header image sizes*/
    header > div:nth-child(1) > img {
        width: 20px;
        height: 20px;
    }

    /*add header headlines inside articele*/
    header > nav > article {
        visibility: hidden;
    }

    /*for burger menu*/
    body > header > nav > div:last-child {
        /*border: 1px solid red;*/
        position: absolute;
        right: 16px;
        bottom: 2px;
        visibility: visible;
    }

    body > header > nav > div:last-child > i {
        font-size: 16px;
        width: 10px;
        height: 10px;
    }

    /*-----------------------------------------------------------------------*/
    /*go to up div*/
    /*add  div for go top up*/
    body > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: fixed;
        top: 500px;
        right: 20px;
        width: 26px;
        height: 26px;
    }

    body > div:nth-child(2):hover {
        width: 27px;
        height: 27px;
    }

    /*add image to div go top up*/
    body > div:nth-child(2) > a > img {
        width: 26px;
        height: 26px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Profile*/
    /*add styles for Profile section*/
    body > main > section:nth-child(1) {
        width: 100%;
        height: 160px;
    }

    /*add div for hi there im kasun weerasinghe*/
    body > main > section:nth-child(1) > div:nth-child(1) {
        /*border: 1px solid red;*/
        display: inline-block;
        position: relative;
        top: 10px;
        left: 20px;
    }

    /*h1 hi there im kasun weerasinghe text*/
    body > main > section:nth-child(1) > div:nth-child(1) > h1 {
        font-size: 14px;
    }

    /*added div for  i am front end developer text*/
    body > main > section:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        display: inline-block;
        top: 50px;
        left: -146px;
    }

    /*h1 i am front end developer*/
    body > main > section:nth-child(1) > div:nth-child(2) > h1 {
        font-size: 12px;
    }

    /*add border for social nav*/
    body > main > section:nth-child(1) > nav:nth-child(3) {
        /*border: 1px solid red;*/
        width: 188px;
        height: 35px;
        position: relative;
        left: 20px;
        top: 60px;
        display: flex;
        justify-content: space-around;
    }

    /*add social all divs*/
    body > main > section:nth-child(1) > nav:nth-child(3) > div {
        /*border: 1px solid blue;*/
        position: relative;
        width: 100%;
        height: 35px;
    }

    /*social icons add*/
    body > main > section:nth-child(1) > nav:nth-child(3) > div > a > i {
        position: absolute;
        font-size: 16px;
        left: 8px;
        top: -9px;
        text-decoration: none;
    }

    /*add hover */
    body > main > section:nth-child(1) > nav:nth-child(3) > div > a > i:hover {
        font-size: 17px;
    }

    /*add div for gif*/
    body > main > section:nth-child(1) > div:nth-child(4) {
        /*border: 1px solid red;*/
        display: inline-block;
        position: absolute;
        right: 20px;
        top: 20px;
        width: 120px;
        height: 120px;
    }

    /*Added gif into profile section */
    body > main > section:nth-child(1) > div:nth-child(4) > img {
        width: 106px;
        height: 114px;
    }


    /*add 2 colors using span to h1 tags*/
    #span1 {
        color: #002057;
    }

    #span2 {

        color: #FE7B01;
    }

    #span3 {
        color: #930A09;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section About Me*/
    /*add background color*/
    body > main > section:nth-child(2) {
        width: 100%;
        height: 300px;
        position: relative;
    }

    /*add Headline About Me*/
    body > main > section:nth-child(2) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*introduction under Headline*/
    body > main > section:nth-child(2) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 23px;
        left: -8px;
        right: 0;
        margin: auto;
    }

    /*add div for profile image*/
    body > main > section:nth-child(2) > aside:nth-child(3) {
        width: 100px;
        height: 100px;
        /*border: 1px solid red;*/
        position: relative;
        top: 130px;
        left: 20px;

    }

    /*my profile image*/
    body > main > section:nth-child(2) > aside:nth-child(3) > img {
        width: 100px;
        height: 100px;
    }

    /*add hover for my profile picture*/
    body > main > section:nth-child(2) > aside:nth-child(3) > img:hover {
        transform: translateY(-3px);
    }

    /*adds styles for intro about me section*/
    body > main > section:nth-child(2) > section:nth-child(4) {
        /*border: 1px solid red;*/
        position: relative;
        left: 151px;
        width: 250px;
        bottom: 11px;

    }

    /*my name details description position */
    body > main > section:nth-child(2) > section:nth-child(4) > article:nth-child(1) {
        position: relative;
        font-size: 10px;
    }

    /*border to add my details*/
    body > main > section:nth-child(2) > div:nth-child(5) {
        /*border: 1px solid blue;*/
        position: relative;
        width: 250px;
        height: 80px;
        left: 151px;
        bottom: -10px;
    }

    /*!*add positions for all p inside div*!*/
    body > main > section:nth-child(2) > div:nth-child(5) > p {
        position: absolute;
        display: inline-block;
        font-size: 7px;
    }

    /*!*Maintain my details p tags*!*/
    /*name*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(1) {
        left: 0;
    }

    /*age*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(2) {
        height: 30px;
        left: 0;
        top: 20px;
        bottom: 0;
        margin: auto;
    }

    /*email*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(3) {
        left: 0;
        bottom: 0;
    }

    /*phone*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(4) {
        right: 0;
        top: 0;
    }

    /*place*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(5) {
        height: 30px;
        right: 0;
        top: 24px;
        bottom: 0;
        margin: auto;
    }

    /*!*add colors for my details topics*!*/
    .my-details {
        color: #021BFF;
    }

    /*!*Add hire me button*!*/
    body > main > section:nth-child(2) > div:nth-child(5) > a:nth-child(6) {
        padding: 2px 7px;
        font-size: 0.6rem;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section My Service*/
    /*add background color*/
    body > main > section:nth-child(3) {
        width: 100%;
        height: 555px;
        position: relative;
    }

    /*!*add Headline My Service*!*/
    body > main > section:nth-child(3) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;

        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(3) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 24px;
        left: -8px;
        right: 0;
        margin: auto;
    }

    /*Add flex box for add my services*/
    body > main > section:nth-child(3) > article:nth-child(3) {
        display: grid;
        position: relative;
        width: 100%;
        height: 490px;
        top: 55px;
        /*border: 1px solid red;*/

        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }

    /*Add sizes all divs in flex box*/
    body > main > section:nth-child(3) > article:nth-child(3) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add div for  UX/UI h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style UX/UI h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 10px;
    }

    /*add div for UX/UI image*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        height: 120px;
    }

    /*add image into UX/UI*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(2) > img {
        height: 100px;
        width: 100px;
        border-radius: 20px;
    }

    /*description styles UX/UI*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 10px;
        font-size: 9px;
        left: 11px;

    }

    /*add div for Software Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Software Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 10px;
    }

    /*add div for image into Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(2) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        height: 120px;
    }

    /*add image into Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(2) > img {
        height: 100px;
        width: 100px;
        border-radius: 20px;
    }

    /*description styles Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 20px;
        font-size: 9px;
        left: 1px;
        white-space: normal;
    }

    /*add div for Mobile Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Mobile Development h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 10px;
    }

    /*add div for image  Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 120px;
        position: relative;
    }

    /*add image into Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(2) > img {
        height: 100px;
        width: 100px;
        border-radius: 20px;
    }

    /*description styles Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > pre {
        position: relative;
        text-align: center;
        top: 20px;
        font-size: 12px;
        left: 0px;
        white-space: normal;
    }

    /*add div for Web Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Web Development h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 10px;
    }

    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        height: 120px;
    }

    /*add image into Web Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(2) > img {
        height: 100px;
        width: 100px;
        border-radius: 20px;
    }

    /*description styles Web Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 20px;
        font-size: 9px;
        left: 0px;
        white-space: normal;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Skill*/
    /*add background color*/
    body > main > section:nth-child(4) {
        width: 100%;
        height: 270px;
    }

    /*!*add Headline Skill*!*/
    body > main > section:nth-child(4) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(4) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 22px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add grid box for languages*/
    body > main > section:nth-child(4) > section:nth-child(3) {
        /*border: 1px solid blue;*/
        top: 50px;
        position: relative;
        display: grid;
        height: 217px;

        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(6, 1fr);
    }

    /*add little div box for languages*/
    body > main > section:nth-child(4) > section:nth-child(3) > div {
        position: relative;
        /*border: 1px solid green;*/
        width: 40px;
        height: 40px;
        top: 30px;
        left: 20px;
        border-radius: 10px;
    }

    /*add languages  & tools image*/
    body > main > section:nth-child(4) > section:nth-child(3) > div > img {
        width: 20px;
        height: 20px;
        position: relative;
        left: 9px;
        top: 5px;
    }


    /*add languages  & tools names */
    body > main > section:nth-child(4) > section:nth-child(3) > div > p {
        font-size: 7px;
        left: 0px;
        top: 30px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Project*/
    /*add background color*/
    body > main > section:nth-child(5) {
        width: 100%;
        height: 892px;
        position: relative;
    }

    /*!*add Headline Project*!*/
    body > main > section:nth-child(5) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;

        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(5) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 25px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add flex box into my project*/
    body > main > section:nth-child(5) > section:nth-child(3) {
        /*border: 1px solid green;*/
        display: flex;
        flex-direction: column;
        position: relative;
        top: 55px;
        width: 100%;
        height: 790px;
    }

    /*div projects boxes*/
    body > main > section:nth-child(5) > section:nth-child(3) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add div for all projects p tags*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(1) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add all projects names p tags styles*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(1) > p {
        font-size: 10px;
        width: 100%;
    }

    /*add div for Hostel-Management-System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        height: 180px;
    }

    /*Hostel-Management-System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) > img {
        width: 210px;
        height: 142px;
    }

    /*add div for Git hyper image for  Hostel-Management-System*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 30px;
        height: 30px;
        position: relative;
        left: 190px;
        top: 7px;
    }

    /*add Git hyper image into  Hostel-Management-System */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(3) > a > img {
        width: 20px;
        height: 20px;
    }

    /*add div for add Pet & Product Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 180px;
        position: relative;
    }

    /*Pet & Product Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(2) > img {
        width: 200px;
        height: 150px;
    }

    /*add div for add git hyper image for  Pet & Product Manage System project*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(3) {
        /*border: 1px solid red;*/
        position: relative;
        width: 30px;
        height: 30px;
        left: 190px;
        top: 7px;
    }

    /*add git hyper image into  Pet & Product Manage System project */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(3) > a > img {
        width: 20px;
        height: 20px;
    }

    /*add div for Super Market Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 180px;
        position: relative;
    }

    /*Super Market Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(2) > img {
        width: 190px;
        height: 150px;

    }

    /*add  div for add image into Super Market Manage System project*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 30px;
        height: 30px;
        position: relative;
        left: 190px;
        top: 7px;
    }

    /*add git hyper image into Super Market Manage System project */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(3) > a > img {
        width: 20px;
        height: 20px;
    }

    /*add hover for all git divs*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(3):hover {
        width: 31px;
        height: 31px;
    }

    /*view all button*/
    body > main > section:nth-child(5) > button:last-child {
        width: 50px;
        height: 20px;
    }

    /*add styles to view all button next icon*/
    body > main > section:nth-child(5) > button:last-child > a > i {
        position: relative;
        left: 5px;
    }

    /*add styles view all text*/
    body > main > section:nth-child(5) > button:nth-child(4) > a, u {
        position: absolute;
        left: 3px;
        top: 4px;
        font-size: 8px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Assessment*/
    /*add background color*/
    body > main > section:nth-child(10) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 831px;
        position: relative;
    }

    /*add Headline Assessment*/
    body > main > section:nth-child(10) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*add flex for assessments section*/
    body > main > section:nth-child(10) > section:nth-child(2) {
        /*border: 1px solid green;*/
        display: flex;
        flex-direction: column;
        position: relative;
        top: 46px;
        height: 743px;
        width: 100%;
    }

    /*div Assessment boxes*/
    body > main > section:nth-child(10) > section:nth-child(2) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add div for add all p tags*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add all Assessment names p tags styles*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(1) p {
        font-size: 10px;
        width: 100%
    }

    /*add div for add CSS Basics image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 160px;
        position: relative;
    }

    /*CSS Basics image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(1) > div:nth-child(2) > img {
        width: 200px;
        height: 140px;
    }

    /*add all view buttons in here one code*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 30px;
        height: 30px;
        position: relative;
        left: 190px;
        top: 10px;
        cursor: pointer;
    }

    /*add eye image into button*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(3) > a > img {
        width: 20px;
        height: 20px;
    }

    /* add div for add CSS Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 160px;
        position: relative;
    }

    /*CSS Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(2) > div:nth-child(2) > img {
        width: 200px;
        height: 140px;
    }

    /*add div for JA Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 160px;
        position: relative;
    }

    /*JA Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) > img {
        width: 200px;
        height: 140px;
    }

    /*view all button*/
    body > main > section:nth-child(10) > button:last-child {
        width: 50px;
        height: 20px;
    }

    /*add styles to view all button next icon*/
    body > main > section:nth-child(10) > button:last-child > a > i {
        position: relative;
        left: 5px;
    }

    /*add styles view all text*/
    body > main > section:nth-child(10) > button:nth-child(3) > a, u {
        position: absolute;
        left: 3px;
        top: 4px;
        font-size: 8px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Journey*/
    /*add background color*/
    body > main > section:nth-child(11) {
        width: 100%;
        height: 587px;
        position: relative;
    }

    /*!*add Headline Journey*!*/
    body > main > section:nth-child(11) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(11) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 24px;
        left: 10px;
        right: 0;
        margin: auto;
    }


    /*get flex for add all details and images*/
    body > main > section:nth-child(11) > section:nth-child(3) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 520px;
        position: relative;
        top: 60px;
        display: flex;
        flex-direction: column;
    }

    /*add height and width for individual sections*/
    body > main > section:nth-child(11) > section:nth-child(3) > section {
        /*border: 1px solid green;*/
        width: 100%;
        height: 100%;
        position: relative;
    }

    /*add all div for images*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) {
        /*border: 1px solid red;*/
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        transition: 0.5s;
        width: 80px;
        height: 80px;
    }

    /*add hover for divs*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) :hover {
        width: 80px;
        height: 80px;
    }

    /*add styles for all  image*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) > img {
        width: 70px;
        height: 70px;
    }

    /*add ijse & ccnp description*/
    body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(1) > article:nth-child(2), body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(3) > article:nth-child(2) {
        /*border: 1px solid red;*/
        width: 140px;
        position: absolute;
        right: 15px;
        top: 50px;
        font-size: 10px;
    }

    /*add all hr*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > hr:nth-child(3) {
        width: 48px;
        height: 2px;
        position: relative;
        bottom: -119px;
    }


    /*add greatlake & school description*/
    body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(2) > article:nth-child(2), body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(4) > article:nth-child(2) {
        /*border: 1px solid red;*/
        width: 140px;
        position: absolute;
        left: 15px;
        top: 20px;
        font-size: 10px;
        text-align: right;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Contact*/
    /*add background color*/
    body > main > section:nth-child(12) {
        width: 100%;
        height: 255px;
        position: relative;
    }

    /*!*add Headline Contact*!*/
    body > main > section:nth-child(12) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*introduction under Headline*/
    body > main > section:nth-child(12) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 24px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add section into contact section for add contact form*/
    body > main > section:nth-child(12) > section:nth-child(3) {
        width: 95%;
        height: 70%;
        /*border: 1px solid red;*/
        position: absolute;
        top: 40px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 40px;
    }

    /*add border styles for contact big git aside*/
    body > main > section:nth-child(12) > section:nth-child(3) > aside:nth-child(1) {
        height: 120px;
        width: 120px;
        /*border: 1px solid red;*/
        position: relative;
        left: 20px;
        top: 26px;
    }

    /*add contact section gif*/
    body > main > section:nth-child(12) > section:nth-child(3) > aside:nth-child(1) > img {
        height: 116px;
        width: 111px;
    }

    /*add form section*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) {
        position: absolute;
        right: 50px;
        bottom: 7px;
    }

    /*!*add space in between form sections*!*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div {
        position: relative;
        padding-bottom: 5px;
    }

    /*styles name, email, subject as a group selector*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div > input {
        width: 100px;
        height: 15px;
        border: none;
        font-size: 5px;
    }

    /*add styles message area*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div:nth-child(4) > textarea {
        width: 100px;
        height: 30px;
        border: none;
        outline-width: 0;
        font-size: 5px;
    }

    /*send button*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5) {
        border-radius: 50px;
        width: 20px;
        height: 20px;
        position: relative;
        left: 40px;
    }

    /*get fir left icon*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5) > i {
        position: relative;
        left: -4px;
        font-size: 10px;
        top: -3px;
    }

    /*add hover for send button*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5):hover {
        width: 21px;
        height: 21px;
    }

    /*------------------------------------------------------------------------------------*/
    /*footer Links*/
    /*add background color*/
    body > footer {
        width: 100%;
        height: 450px;
        position: relative;
    }

    /*!*add Headline Links*!*/
    body > footer > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: -66px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > footer > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: -44px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add flex into footer section*/
    footer > section {
        display: flex;
        flex-direction: column;
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        top: 0px;
        height: 420px;
    }

    /*add all divs under footer section*/
    footer > section > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add all footer headlines border and center*/
    footer > section:nth-child(3) > div > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add styles for all footer headlines  portfolio text*/
    footer > section:nth-child(3) > div > div:nth-child(1) > p {
        font-size: 10px;
        position: relative;
        width: 100%;
    }

    /*add border and center description under kasun's portfolio*/
    footer > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*description under kasun's portfolio*/
    footer > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) > article {
        font-size: 12px;
        position: relative;
    }

    /*add quick links nav section styles*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) {
        /*border: 1px solid yellow;*/
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /*add quick links nav section text styles*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a {
        /*border: 1px solid red;*/
        width: 100%;
        height: 12px;
        /*height: 50px;*/
        font-size: 7px
    }

    /*remove underline and default style in navigation*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a, u {
        width: 100%;
        position: relative;
        text-align: center;
    }

    /*add hover for footer quick links*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a:hover {
        font-size: 8px;
    }

    /*add point image in front of navigations*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a > img {
        width: 9px;
        height: auto;
        position: absolute;
        left: 175px;
    }

    /*add border for contact into section*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) {
        /*border: 1px solid gold;*/
        width: 100%;
        height: 150px;
        display: flex;
        flex-direction: column;
    }

    /*add flex for add email,name,phone and social images*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address {
        /*border: 1px solid green;*/
        width: 100%;
        height: 48px;
    }

    /*add border and width and height for all image(gmail,location,phone) div*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(1) {
        height: 25px;
        width: 25px;
        position: relative;
        /*border: 1px solid yellow;*/
        top: 9px;
        left: 64px;
    }

    /*add all image(gmail,location,phone)  into div*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(1) > img {
        height: 25px;
        width: 25px;
    }

    /*add div for all p tags in contact info*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(2) {
        width: 100%;
        text-align: center;
        position: relative;
        bottom: 14px;
    }

    /*add styles for all p tags in contact info*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(2) > p {
        display: inline-block;
        margin-bottom: 0px;
        margin-top: 0px;
        font-size: 12px;
    }

    /*add hr between footer*/
    footer > hr:nth-child(4) {
        width: 90%;
        position: relative;
        bottom: 4px;
    }

    /*developed by  text*/
    footer > p:nth-child(5) {
        font-size: 7px;
        position: absolute;
        top: 429px;
        left: 132px;
        width: 140px;
    }

    /*loading gif*/
    footer > img:nth-child(6) {
        width: 16px;
        height: 9px;
        position: absolute;
        top: 428px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*add colors developed by text*/
    #span19 {
        color: #CFCFCF;
    }

    #span20 {
        color: #FF0000;
    }

    /*@ 2022 All Rights Reserved text*/
    footer > p:nth-child(7) {
        font-size: 7px;
        position: absolute;
        right: 110px;
        bottom: -1px;
    }


}


/*Responsive 375px*/
/*Mobile Medium 375px*/
@media all and (max-width: 375px) {

    /*------------------------------------------------------------------------------------*/
    /*HEADER SECTION*/
    /*Add Header */
    header {
        width: 100%;
        height: 30px;
        position: sticky;
        top: 0;
        z-index: 15;
    }

    /*add div box for add header image*/
    header > div:nth-child(1) {
        width: 20px;
        height: 20px;
        position: relative;
        left: 15px;
        top: 4px;
        /*border: 1px solid red;*/
    }

    /*add header image sizes*/
    header > div:nth-child(1) > img {
        width: 20px;
        height: 20px;
    }

    /*add header headlines inside articele*/
    header > nav > article {
        visibility: hidden;
    }

    /*for burger menu*/
    body > header > nav > div:last-child {
        /*border: 1px solid red;*/
        position: absolute;
        right: 16px;
        bottom: 2px;
        visibility: visible;
    }

    body > header > nav > div:last-child > i {
        font-size: 16px;
        width: 10px;
        height: 10px;
    }

    /*-----------------------------------------------------------------------*/
    /*go to up div*/
    /*add  div for go top up*/
    body > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: fixed;
        top: 500px;
        right: 20px;
        width: 26px;
        height: 26px;
    }

    body > div:nth-child(2):hover {
        width: 27px;
        height: 27px;
    }

    /*add image to div go top up*/
    body > div:nth-child(2) > a > img {
        width: 26px;
        height: 26px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Profile*/
    /*add styles for Profile section*/
    body > main > section:nth-child(1) {
        width: 100%;
        height: 160px;
    }

    /*add div for hi there im kasun weerasinghe*/
    body > main > section:nth-child(1) > div:nth-child(1) {
        /*border: 1px solid red;*/
        /*display: inline-block;*/
        position: relative;
        top: 25px;
        left: 10px;
    }

    /*h1 hi there im kasun weerasinghe text*/
    body > main > section:nth-child(1) > div:nth-child(1) > h1 {
        font-size: 12px;
    }

    /*added div for  i am front end developer text*/
    body > main > section:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        /*display: inline-block;*/
        top: 60px;
        left: -130px;
    }

    /*h1 i am front end developer*/
    body > main > section:nth-child(1) > div:nth-child(2) > h1 {
        font-size: 9px;
    }

    /*add border for social nav*/
    body > main > section:nth-child(1) > nav:nth-child(3) {
        /*border: 1px solid red;*/
        width: 140px;
        height: 30px;
        position: relative;
        left: 20px;
        top: 69px;
        display: flex;
        justify-content: space-around;
    }

    /*add social all divs*/
    body > main > section:nth-child(1) > nav:nth-child(3) > div {
        /*border: 1px solid blue;*/
        position: relative;
        width: 100%;
        height: 30px;
    }

    /*social icons add*/
    body > main > section:nth-child(1) > nav:nth-child(3) > div > a > i {
        position: absolute;
        font-size: 16px;
        left: 3px;
        top: -13px;
        text-decoration: none;
    }

    /*add hover */
    body > main > section:nth-child(1) > nav:nth-child(3) > div > a > i:hover {
        font-size: 17px;
    }

    /*add div for gif*/
    body > main > section:nth-child(1) > div:nth-child(4) {
        /*border: 1px solid red;*/
        display: inline-block;
        position: absolute;
        right: 20px;
        top: 20px;
        width: 120px;
        height: 120px;
    }

    /*Added gif into profile section */
    body > main > section:nth-child(1) > div:nth-child(4) > img {
        width: 106px;
        height: 114px;
    }


    /*add 2 colors using span to h1 tags*/
    #span1 {
        color: #002057;
    }

    #span2 {

        color: #FE7B01;
    }

    #span3 {
        color: #930A09;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section About Me*/
    /*add background color*/
    body > main > section:nth-child(2) {
        width: 100%;
        height: 300px;
        position: relative;
    }

    /*add Headline About Me*/
    body > main > section:nth-child(2) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*introduction under Headline*/
    body > main > section:nth-child(2) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 23px;
        left: -8px;
        right: 0;
        margin: auto;
    }

    /*add div for profile image*/
    body > main > section:nth-child(2) > aside:nth-child(3) {
        width: 100px;
        height: 100px;
        /*border: 1px solid red;*/
        position: relative;
        top: 110px;
        left: 10px;

    }

    /*my profile image*/
    body > main > section:nth-child(2) > aside:nth-child(3) > img {
        width: 100px;
        height: 100px;
    }

    /*add hover for my profile picture*/
    body > main > section:nth-child(2) > aside:nth-child(3) > img:hover {
        transform: translateY(-3px);
    }

    /*adds styles for intro about me section*/
    body > main > section:nth-child(2) > section:nth-child(4) {
        /*border: 1px solid red;*/
        position: relative;
        left: 131px;
        width: 213px;
        bottom: 11px;

    }

    /*my name details description position */
    body > main > section:nth-child(2) > section:nth-child(4) > article:nth-child(1) {
        position: relative;
        font-size: 10px;
    }

    /*border to add my details*/
    body > main > section:nth-child(2) > div:nth-child(5) {
        /*border: 1px solid blue;*/
        position: relative;
        width: 210px;
        height: 80px;
        left: 131px;
        bottom: -10px;
    }

    /*!*add positions for all p inside div*!*/
    body > main > section:nth-child(2) > div:nth-child(5) > p {
        position: absolute;
        display: inline-block;
        font-size: 8px;
    }

    /*!*Maintain my details p tags*!*/
    /*name*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(1) {
        left: 0;
    }

    /*age*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(2) {
        height: 30px;
        left: 0;
        top: 20px;
        bottom: 0;
        margin: auto;
    }

    /*email*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(3) {
        left: 0;
        bottom: 0;
    }

    /*phone*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(4) {
        right: 0;
        top: 0;
    }

    /*place*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(5) {
        height: 30px;
        right: 0;
        top: 24px;
        bottom: 0;
        margin: auto;
    }

    /*!*add colors for my details topics*!*/
    .my-details {
        color: #021BFF;
    }

    /*!*Add hire me button*!*/
    body > main > section:nth-child(2) > div:nth-child(5) > a:nth-child(6) {
        padding: 1px 4px;
        font-size: 0.5rem;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section My Service*/
    /*add background color*/
    body > main > section:nth-child(3) {
        width: 100%;
        height: 555px;
        position: relative;
    }

    /*!*add Headline My Service*!*/
    body > main > section:nth-child(3) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;

        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(3) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 24px;
        left: -8px;
        right: 0;
        margin: auto;
    }

    /*Add flex box for add my services*/
    body > main > section:nth-child(3) > article:nth-child(3) {
        display: grid;
        position: relative;
        width: 100%;
        height: 490px;
        top: 55px;
        /*border: 1px solid red;*/

        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }

    /*Add sizes all divs in flex box*/
    body > main > section:nth-child(3) > article:nth-child(3) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add div for  UX/UI h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style UX/UI h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 10px;
    }

    /*add div for UX/UI image*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        height: 120px;
    }

    /*add image into UX/UI*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(2) > img {
        height: 100px;
        width: 100px;
        border-radius: 20px;
    }

    /*description styles UX/UI*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 10px;
        font-size: 9px;
        left: 0px;

    }

    /*add div for Software Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Software Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 10px;
    }

    /*add div for image into Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(2) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        height: 120px;
    }

    /*add image into Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(2) > img {
        height: 100px;
        width: 100px;
        border-radius: 20px;
    }

    /*description styles Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 20px;
        font-size: 9px;
        left: 1px;
        white-space: normal;
    }

    /*add div for Mobile Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Mobile Development h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 10px;
    }

    /*add div for image  Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 120px;
        position: relative;
    }

    /*add image into Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(2) > img {
        height: 100px;
        width: 100px;
        border-radius: 20px;
    }

    /*description styles Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > pre {
        position: relative;
        text-align: center;
        top: 20px;
        font-size: 12px;
        left: 0px;
        white-space: normal;
    }

    /*add div for Web Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Web Development h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 10px;
    }

    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        height: 120px;
    }

    /*add image into Web Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(2) > img {
        height: 100px;
        width: 100px;
        border-radius: 20px;
    }

    /*description styles Web Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 20px;
        font-size: 9px;
        left: 0px;
        white-space: normal;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Skill*/
    /*add background color*/
    body > main > section:nth-child(4) {
        width: 100%;
        height: 270px;
    }

    /*!*add Headline Skill*!*/
    body > main > section:nth-child(4) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(4) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 22px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add grid box for languages*/
    body > main > section:nth-child(4) > section:nth-child(3) {
        /*border: 1px solid blue;*/
        top: 50px;
        position: relative;
        display: grid;
        height: 217px;

        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(6, 1fr);
    }

    /*add little div box for languages*/
    body > main > section:nth-child(4) > section:nth-child(3) > div {
        position: relative;
        /*border: 1px solid green;*/
        width: 40px;
        height: 40px;
        top: 30px;
        left: 10px;
        border-radius: 10px;
    }

    /*add languages  & tools image*/
    body > main > section:nth-child(4) > section:nth-child(3) > div > img {
        width: 20px;
        height: 20px;
        position: relative;
        left: 9px;
        top: 5px;
    }


    /*add languages  & tools names */
    body > main > section:nth-child(4) > section:nth-child(3) > div > p {
        font-size: 7px;
        left: 0px;
        top: 30px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Project*/
    /*add background color*/
    body > main > section:nth-child(5) {
        width: 100%;
        height: 892px;
        position: relative;
    }

    /*!*add Headline Project*!*/
    body > main > section:nth-child(5) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;

        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(5) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 25px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add flex box into my project*/
    body > main > section:nth-child(5) > section:nth-child(3) {
        /*border: 1px solid green;*/
        display: flex;
        flex-direction: column;
        position: relative;
        top: 55px;
        width: 100%;
        height: 790px;
    }

    /*div projects boxes*/
    body > main > section:nth-child(5) > section:nth-child(3) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add div for all projects p tags*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(1) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add all projects names p tags styles*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(1) > p {
        font-size: 10px;
        width: 100%;
    }

    /*add div for Hostel-Management-System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        height: 180px;
    }

    /*Hostel-Management-System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) > img {
        width: 210px;
        height: 142px;
    }

    /*add div for Git hyper image for  Hostel-Management-System*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 30px;
        height: 30px;
        position: relative;
        left: 160px;
        top: 7px;
    }

    /*add Git hyper image into  Hostel-Management-System */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(3) > a > img {
        width: 20px;
        height: 20px;
    }

    /*add div for add Pet & Product Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 180px;
        position: relative;
    }

    /*Pet & Product Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(2) > img {
        width: 200px;
        height: 150px;
    }

    /*add div for add git hyper image for  Pet & Product Manage System project*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(3) {
        /*border: 1px solid red;*/
        position: relative;
        width: 30px;
        height: 30px;
        left: 160px;
        top: 7px;
    }

    /*add git hyper image into  Pet & Product Manage System project */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(3) > a > img {
        width: 20px;
        height: 20px;
    }

    /*add div for Super Market Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 180px;
        position: relative;
    }

    /*Super Market Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(2) > img {
        width: 190px;
        height: 150px;

    }

    /*add  div for add image into Super Market Manage System project*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 30px;
        height: 30px;
        position: relative;
        left: 160px;
        top: 7px;
    }

    /*add git hyper image into Super Market Manage System project */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(3) > a > img {
        width: 20px;
        height: 20px;
    }

    /*add hover for all git divs*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(3):hover {
        width: 31px;
        height: 31px;
    }

    /*view all button*/
    body > main > section:nth-child(5) > button:last-child {
        width: 50px;
        height: 20px;
        right: 17px;
    }

    /*add styles to view all button next icon*/
    body > main > section:nth-child(5) > button:last-child > a > i {
        position: relative;
        left: 5px;
    }

    /*add styles view all text*/
    body > main > section:nth-child(5) > button:nth-child(4) > a, u {
        position: absolute;
        left: 3px;
        top: 4px;
        font-size: 8px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Assessment*/
    /*add background color*/
    body > main > section:nth-child(10) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 831px;
        position: relative;
    }

    /*add Headline Assessment*/
    body > main > section:nth-child(10) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*add flex for assessments section*/
    body > main > section:nth-child(10) > section:nth-child(2) {
        /*border: 1px solid green;*/
        display: flex;
        flex-direction: column;
        position: relative;
        top: 46px;
        height: 743px;
        width: 100%;
    }

    /*div Assessment boxes*/
    body > main > section:nth-child(10) > section:nth-child(2) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add div for add all p tags*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add all Assessment names p tags styles*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(1) p {
        font-size: 10px;
        width: 100%
    }

    /*add div for add CSS Basics image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 160px;
        position: relative;
    }

    /*CSS Basics image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(1) > div:nth-child(2) > img {
        width: 200px;
        height: 140px;
    }

    /*add all view buttons in here one code*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 30px;
        height: 30px;
        position: relative;
        left: 170px;
        top: 10px;
        cursor: pointer;
    }

    /*add eye image into button*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(3) > a > img {
        width: 20px;
        height: 20px;
    }

    /* add div for add CSS Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 160px;
        position: relative;
    }

    /*CSS Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(2) > div:nth-child(2) > img {
        width: 200px;
        height: 140px;
    }

    /*add div for JA Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 160px;
        position: relative;
    }

    /*JA Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) > img {
        width: 200px;
        height: 140px;
    }

    /*view all button*/
    body > main > section:nth-child(10) > button:last-child {
        width: 50px;
        height: 20px;
    }

    /*add styles to view all button next icon*/
    body > main > section:nth-child(10) > button:last-child > a > i {
        position: relative;
        left: 5px;
    }

    /*add styles view all text*/
    body > main > section:nth-child(10) > button:nth-child(3) > a, u {
        position: absolute;
        left: 3px;
        top: 4px;
        font-size: 8px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Journey*/
    /*add background color*/
    body > main > section:nth-child(11) {
        width: 100%;
        height: 587px;
        position: relative;
    }

    /*!*add Headline Journey*!*/
    body > main > section:nth-child(11) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(11) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 24px;
        left: 10px;
        right: 0;
        margin: auto;
    }


    /*get flex for add all details and images*/
    body > main > section:nth-child(11) > section:nth-child(3) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 520px;
        position: relative;
        top: 60px;
        display: flex;
        flex-direction: column;
    }

    /*add height and width for individual sections*/
    body > main > section:nth-child(11) > section:nth-child(3) > section {
        /*border: 1px solid green;*/
        width: 100%;
        height: 100%;
        position: relative;
    }

    /*add all div for images*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) {
        /*border: 1px solid red;*/
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        transition: 0.5s;
        width: 80px;
        height: 80px;
    }

    /*add hover for divs*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) :hover {
        width: 80px;
        height: 80px;
    }

    /*add styles for all  image*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) > img {
        width: 70px;
        height: 70px;
    }

    /*add ijse & ccnp description*/
    body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(1) > article:nth-child(2), body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(3) > article:nth-child(2) {
        /*border: 1px solid red;*/
        width: 120px;
        position: absolute;
        right: 15px;
        top: 36px;
        font-size: 8px;
    }

    /*add all hr*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > hr:nth-child(3) {
        width: 48px;
        height: 2px;
        position: relative;
        bottom: -119px;
    }


    /*add greatlake & school description*/
    body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(2) > article:nth-child(2), body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(4) > article:nth-child(2) {
        /*border: 1px solid red;*/
        width: 120px;
        position: absolute;
        left: 15px;
        top: 40px;
        font-size: 8px;
        text-align: right;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Contact*/
    /*add background color*/
    body > main > section:nth-child(12) {
        width: 100%;
        height: 255px;
        position: relative;
    }

    /*!*add Headline Contact*!*/
    body > main > section:nth-child(12) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*introduction under Headline*/
    body > main > section:nth-child(12) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 24px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add section into contact section for add contact form*/
    body > main > section:nth-child(12) > section:nth-child(3) {
        width: 95%;
        height: 70%;
        /*border: 1px solid red;*/
        position: absolute;
        top: 40px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 40px;
    }

    /*add border styles for contact big git aside*/
    body > main > section:nth-child(12) > section:nth-child(3) > aside:nth-child(1) {
        height: 120px;
        width: 120px;
        /*border: 1px solid red;*/
        position: relative;
        left: 20px;
        top: 26px;
    }

    /*add contact section gif*/
    body > main > section:nth-child(12) > section:nth-child(3) > aside:nth-child(1) > img {
        height: 116px;
        width: 111px;
    }

    /*add form section*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) {
        position: absolute;
        right: 50px;
        bottom: 7px;
    }

    /*!*add space in between form sections*!*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div {
        position: relative;
        padding-bottom: 5px;
    }

    /*styles name, email, subject as a group selector*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div > input {
        width: 100px;
        height: 15px;
        border: none;
        font-size: 5px;
    }

    /*add styles message area*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div:nth-child(4) > textarea {
        width: 100px;
        height: 30px;
        border: none;
        outline-width: 0;
        font-size: 5px;
    }

    /*send button*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5) {
        border-radius: 50px;
        width: 20px;
        height: 20px;
        position: relative;
        left: 40px;
    }

    /*get fir left icon*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5) > i {
        position: relative;
        left: -4px;
        font-size: 10px;
        top: -3px;
    }

    /*add hover for send button*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5):hover {
        width: 21px;
        height: 21px;
    }

    /*------------------------------------------------------------------------------------*/
    /*footer Links*/
    /*add background color*/
    body > footer {
        width: 100%;
        height: 450px;
        position: relative;
    }

    /*!*add Headline Links*!*/
    body > footer > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: -66px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > footer > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: -44px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add flex into footer section*/
    footer > section {
        display: flex;
        flex-direction: column;
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        top: 0px;
        height: 420px;
    }

    /*add all divs under footer section*/
    footer > section > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add all footer headlines border and center*/
    footer > section:nth-child(3) > div > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add styles for all footer headlines  portfolio text*/
    footer > section:nth-child(3) > div > div:nth-child(1) > p {
        font-size: 10px;
        position: relative;
        width: 100%;
    }

    /*add border and center description under kasun's portfolio*/
    footer > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*description under kasun's portfolio*/
    footer > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) > article {
        font-size: 12px;
        position: relative;
    }

    /*add quick links nav section styles*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) {
        /*border: 1px solid yellow;*/
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /*add quick links nav section text styles*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a {
        /*border: 1px solid red;*/
        width: 100%;
        height: 12px;
        /*height: 50px;*/
        font-size: 7px
    }

    /*remove underline and default style in navigation*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a, u {
        width: 100%;
        position: relative;
        text-align: center;
    }

    /*add hover for footer quick links*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a:hover {
        font-size: 8px;
    }

    /*add point image in front of navigations*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a > img {
        width: 9px;
        height: auto;
        position: absolute;
        left: 155px;
    }

    /*add border for contact into section*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) {
        /*border: 1px solid gold;*/
        width: 100%;
        height: 150px;
        display: flex;
        flex-direction: column;
    }

    /*add flex for add email,name,phone and social images*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address {
        /*border: 1px solid green;*/
        width: 100%;
        height: 48px;
    }

    /*add border and width and height for all image(gmail,location,phone) div*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(1) {
        height: 25px;
        width: 25px;
        position: relative;
        /*border: 1px solid yellow;*/
        top: 9px;
        left: 64px;
    }

    /*add all image(gmail,location,phone)  into div*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(1) > img {
        height: 25px;
        width: 25px;
    }

    /*add div for all p tags in contact info*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(2) {
        width: 100%;
        text-align: center;
        position: relative;
        bottom: 14px;
    }

    /*add styles for all p tags in contact info*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(2) > p {
        display: inline-block;
        margin-bottom: 0px;
        margin-top: 0px;
        left: 107px;
    }

    /*add hr between footer*/
    footer > hr:nth-child(4) {
        width: 90%;
        position: relative;
        bottom: 4px;
    }

    /*developed by  text*/
    footer > p:nth-child(5) {
        font-size: 7px;
        position: absolute;
        top: 429px;
        left: 107px;
        width: 140px;
    }

    /*loading gif*/
    footer > img:nth-child(6) {
        width: 16px;
        height: 9px;
        position: absolute;
        top: 428px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*add colors developed by text*/
    #span19 {
        color: #CFCFCF;
    }

    #span20 {
        color: #FF0000;
    }

    /*@ 2022 All Rights Reserved text*/
    footer > p:nth-child(7) {
        font-size: 7px;
        position: absolute;
        right: 85px;
        bottom: -1px;
    }

}


/*Responsive 320px*/
/*Mobile Small 320px*/
/*@media all and (max-width: 320px) {*/
@media all and (max-width: 320px) {

    /*------------------------------------------------------------------------------------*/
    /*HEADER SECTION*/
    /*Add Header */
    header {
        width: 100%;
        height: 30px;
        position: sticky;
        top: 0;
        z-index: 15;
    }

    /*add div box for add header image*/
    header > div:nth-child(1) {
        width: 20px;
        height: 20px;
        position: relative;
        left: 15px;
        top: 4px;
        /*border: 1px solid red;*/
    }

    /*add header image sizes*/
    header > div:nth-child(1) > img {
        width: 20px;
        height: 20px;
    }

    /*add header headlines inside articele*/
    header > nav > article {
        visibility: hidden;
    }

    /*for burger menu*/
    body > header > nav > div:last-child {
        /*border: 1px solid red;*/
        position: absolute;
        right: 16px;
        bottom: 2px;
        visibility: visible;
    }

    body > header > nav > div:last-child > i {
        font-size: 16px;
        width: 10px;
        height: 10px;
    }

    /*-----------------------------------------------------------------------*/
    /*go to up div*/
    /*add  div for go top up*/
    body > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: fixed;
        top: 500px;
        right: 20px;
        width: 26px;
        height: 26px;
    }

    body > div:nth-child(2):hover {
        width: 27px;
        height: 27px;
    }

    /*add image to div go top up*/
    body > div:nth-child(2) > a > img {
        width: 26px;
        height: 26px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Profile*/
    /*add styles for Profile section*/
    body > main > section:nth-child(1) {
        width: 100%;
        height: 160px;
    }

    /*add div for hi there im kasun weerasinghe*/
    body > main > section:nth-child(1) > div:nth-child(1) {
        /*border: 1px solid red;*/
        display: inline-block;
        position: relative;
        top: 25px;
        left: 20px;
    }

    /*h1 hi there im kasun weerasinghe text*/
    body > main > section:nth-child(1) > div:nth-child(1) > h1 {
        font-size: 12px;
    }

    /*added div for  i am front end developer text*/
    body > main > section:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        display: inline-block;
        top: 60px;
        left: -123px;
    }

    /*h1 i am front end developer*/
    body > main > section:nth-child(1) > div:nth-child(2) > h1 {
        font-size: 10px;
    }

    /*add border for social nav*/
    body > main > section:nth-child(1) > nav:nth-child(3) {
        /*border: 1px solid red;*/
        width: 140px;
        height: 30px;
        position: relative;
        left: 20px;
        top: 70px;
        display: flex;
        justify-content: space-around;
    }

    /*add social all divs*/
    body > main > section:nth-child(1) > nav:nth-child(3) > div {
        /*border: 1px solid blue;*/
        position: relative;
        width: 100%;
        height: 35px;
    }

    /*social icons add*/
    body > main > section:nth-child(1) > nav:nth-child(3) > div > a > i {
        position: absolute;
        font-size: 16px;
        left: 3px;
        top: -9px;
        text-decoration: none;
    }

    /*add hover */
    body > main > section:nth-child(1) > nav:nth-child(3) > div > a > i:hover {
        font-size: 17px;
    }

    /*add div for gif*/
    body > main > section:nth-child(1) > div:nth-child(4) {
        /*border: 1px solid red;*/
        display: inline-block;
        position: absolute;
        right: 20px;
        top: 20px;
        width: 100px;
        height: 100px;
    }

    /*Added gif into profile section */
    body > main > section:nth-child(1) > div:nth-child(4) > img {
        width: 90px;
        height: 90px;
    }


    /*add 2 colors using span to h1 tags*/
    #span1 {
        color: #002057;
    }

    #span2 {

        color: #FE7B01;
    }

    #span3 {
        color: #930A09;
    }


    /*------------------------------------------------------------------------------------*/
    /*Main Section About Me*/
    /*add background color*/
    body > main > section:nth-child(2) {
        width: 100%;
        height: 300px;
        position: relative;
    }

    /*add Headline About Me*/
    body > main > section:nth-child(2) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*introduction under Headline*/
    body > main > section:nth-child(2) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 23px;
        left: -8px;
        right: 0;
        margin: auto;
    }

    /*add div for profile image*/
    body > main > section:nth-child(2) > aside:nth-child(3) {
        width: 90px;
        height: 90px;
        /*border: 1px solid red;*/
        position: relative;
        top: 110px;
        left: 4px;

    }

    /*my profile image*/
    body > main > section:nth-child(2) > aside:nth-child(3) > img {
        width: 80px;
        height: 80px;
    }

    /*add hover for my profile picture*/
    body > main > section:nth-child(2) > aside:nth-child(3) > img:hover {
        transform: translateY(-3px);
    }

    /*adds styles for intro about me section*/
    body > main > section:nth-child(2) > section:nth-child(4) {
        /*border: 1px solid red;*/
        position: relative;
        left: 111px;
        width: 183px;
        bottom: 11px;

    }

    /*my name details description position */
    body > main > section:nth-child(2) > section:nth-child(4) > article:nth-child(1) {
        position: relative;
        font-size: 8px;
    }

    /*border to add my details*/
    body > main > section:nth-child(2) > div:nth-child(5) {
        /*border: 1px solid blue;*/
        position: relative;
        width: 184px;
        height: 80px;
        left: 111px;
        bottom: -10px;
    }

    /*!*add positions for all p inside div*!*/
    body > main > section:nth-child(2) > div:nth-child(5) > p {
        position: absolute;
        display: inline-block;
        font-size: 6px;
    }

    /*!*Maintain my details p tags*!*/
    /*name*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(1) {
        left: 0;
    }

    /*age*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(2) {
        height: 30px;
        left: 0;
        top: 20px;
        bottom: 0;
        margin: auto;
    }

    /*email*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(3) {
        left: 0;
        bottom: 0;
    }

    /*phone*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(4) {
        right: 0;
        top: 0;
    }

    /*place*/
    body > main > section:nth-child(2) > div:nth-child(5) > p:nth-child(5) {
        height: 30px;
        right: 0;
        top: 24px;
        bottom: 0;
        margin: auto;
    }

    /*!*add colors for my details topics*!*/
    .my-details {
        color: #021BFF;
    }

    /*!*Add hire me button*!*/
    body > main > section:nth-child(2) > div:nth-child(5) > a:nth-child(6) {
        padding: 1px 4px;
        font-size: 0.5rem;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section My Service*/
    /*add background color*/
    body > main > section:nth-child(3) {
        width: 100%;
        height: 555px;
        position: relative;
    }

    /*!*add Headline My Service*!*/
    body > main > section:nth-child(3) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;

        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(3) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 24px;
        left: -8px;
        right: 0;
        margin: auto;
    }

    /*Add flex box for add my services*/
    body > main > section:nth-child(3) > article:nth-child(3) {
        display: grid;
        position: relative;
        width: 100%;
        height: 490px;
        top: 55px;
        /*border: 1px solid red;*/

        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }

    /*Add sizes all divs in flex box*/
    body > main > section:nth-child(3) > article:nth-child(3) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add div for  UX/UI h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style UX/UI h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 8px;
    }

    /*add div for UX/UI image*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        height: 120px;
    }

    /*add image into UX/UI*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > div:nth-child(2) > img {
        height: 80px;
        width: 80px;
        border-radius: 20px;
    }

    /*description styles UX/UI*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(1) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 10px;
        font-size: 7px;
        left: 0px;

    }

    /*add div for Software Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Software Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 10px;
    }

    /*add div for image into Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(2) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        height: 120px;
    }

    /*add image into Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > div:nth-child(2) > img {
        height: 80px;
        width: 80px;
        border-radius: 20px;
    }

    /*description styles Software Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(2) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 20px;
        font-size: 9px;
        left: 1px;
        white-space: normal;
    }

    /*add div for Mobile Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Mobile Development h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 10px;
    }

    /*add div for image  Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 120px;
        position: relative;
    }

    /*add image into Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > div:nth-child(2) > img {
        height: 80px;
        width: 80px;
        border-radius: 20px;
    }

    /*description styles Mobile Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(3) > pre {
        position: relative;
        text-align: center;
        top: 20px;
        font-size: 9px;
        left: 0px;
        white-space: normal;
    }

    /*add div for Web Development h3 text*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add style Web Development h3*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(1) > h3 {
        position: relative;
        font-size: 10px;
    }

    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        height: 120px;
    }

    /*add image into Web Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > div:nth-child(2) > img {
        height: 80px;
        width: 80px;
        border-radius: 20px;
    }

    /*description styles Web Development*/
    body > main > section:nth-child(3) > article:nth-child(3) > div:nth-child(4) > pre {
        position: relative;
        text-align: center;
        display: inline-block;
        top: 20px;
        font-size: 9px;
        left: 0px;
        white-space: normal;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Skill*/
    /*add background color*/
    body > main > section:nth-child(4) {
        width: 100%;
        height: 270px;
    }

    /*!*add Headline Skill*!*/
    body > main > section:nth-child(4) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(4) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 22px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add grid box for languages*/
    body > main > section:nth-child(4) > section:nth-child(3) {
        /*border: 1px solid blue;*/
        top: 50px;
        position: relative;
        display: grid;
        height: 217px;

        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(5, 1fr);
    }

    /*add little div box for languages*/
    body > main > section:nth-child(4) > section:nth-child(3) > div {
        position: relative;
        /*border: 1px solid green;*/
        width: 30px;
        height: 30px;
        top: 10px;
        left: 10px;
        border-radius: 10px;
    }

    /*add languages  & tools image*/
    body > main > section:nth-child(4) > section:nth-child(3) > div > img {
        width: 15px;
        height: 15px;
        position: relative;
        left: 7px;
        top: 4px;
    }


    /*add languages  & tools names */
    body > main > section:nth-child(4) > section:nth-child(3) > div > p {
        font-size: 5px;
        left: 0px;
        top: 22px;
    }


    /*------------------------------------------------------------------------------------*/
    /*Main Section Project*/
    /*add background color*/
    body > main > section:nth-child(5) {
        width: 100%;
        height: 892px;
        position: relative;
    }

    /*!*add Headline Project*!*/
    body > main > section:nth-child(5) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;

        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(5) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 25px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add flex box into my project*/
    body > main > section:nth-child(5) > section:nth-child(3) {
        /*border: 1px solid green;*/
        display: flex;
        flex-direction: column;
        position: relative;
        top: 55px;
        width: 100%;
        height: 790px;
    }

    /*div projects boxes*/
    body > main > section:nth-child(5) > section:nth-child(3) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add div for all projects p tags*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(1) {
        position: relative;
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add all projects names p tags styles*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(1) > p {
        font-size: 10px;
        width: 100%;
    }

    /*add div for Hostel-Management-System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        height: 180px;
    }

    /*Hostel-Management-System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) > img {
        width: 210px;
        height: 142px;
    }

    /*add div for Git hyper image for  Hostel-Management-System*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 30px;
        height: 30px;
        position: relative;
        left: 140px;
        top: 7px;
    }

    /*add Git hyper image into  Hostel-Management-System */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(1) > div:nth-child(3) > a > img {
        width: 20px;
        height: 20px;
    }

    /*add div for add Pet & Product Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 180px;
        position: relative;
    }

    /*Pet & Product Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(2) > img {
        width: 200px;
        height: 150px;
    }

    /*add div for add git hyper image for  Pet & Product Manage System project*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(3) {
        /*border: 1px solid red;*/
        position: relative;
        width: 30px;
        height: 30px;
        left: 140px;
        top: 7px;
    }

    /*add git hyper image into  Pet & Product Manage System project */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(2) > div:nth-child(3) > a > img {
        width: 20px;
        height: 20px;
    }

    /*add div for Super Market Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 180px;
        position: relative;
    }

    /*Super Market Manage System project image*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(2) > img {
        width: 190px;
        height: 150px;

    }

    /*add  div for add image into Super Market Manage System project*/
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 30px;
        height: 30px;
        position: relative;
        left: 140px;
        top: 7px;
    }

    /*add git hyper image into Super Market Manage System project */
    body > main > section:nth-child(5) > section:nth-child(3) > div:nth-child(3) > div:nth-child(3) > a > img {
        width: 20px;
        height: 20px;
    }

    /*add hover for all git divs*/
    body > main > section:nth-child(5) > section:nth-child(3) > div > div:nth-child(3):hover {
        width: 31px;
        height: 31px;
    }

    /*view all button*/
    body > main > section:nth-child(5) > button:last-child {
        width: 50px;
        height: 20px;
        right: 17px;
    }

    /*add styles to view all button next icon*/
    body > main > section:nth-child(5) > button:last-child > a > i {
        position: relative;
        left: 5px;
    }

    /*add styles view all text*/
    body > main > section:nth-child(5) > button:nth-child(4) > a, u {
        position: absolute;
        left: 3px;
        top: 4px;
        font-size: 8px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Assessment*/
    /*add background color*/
    body > main > section:nth-child(10) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 831px;
        position: relative;
    }

    /*add Headline Assessment*/
    body > main > section:nth-child(10) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*add flex for assessments section*/
    body > main > section:nth-child(10) > section:nth-child(2) {
        /*border: 1px solid green;*/
        display: flex;
        flex-direction: column;
        position: relative;
        top: 46px;
        height: 743px;
        width: 100%;
    }

    /*div Assessment boxes*/
    body > main > section:nth-child(10) > section:nth-child(2) > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add div for add all p tags*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add all Assessment names p tags styles*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(1) p {
        font-size: 10px;
        width: 100%
    }

    /*add div for add CSS Basics image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 160px;
        position: relative;
    }

    /*CSS Basics image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(1) > div:nth-child(2) > img {
        width: 200px;
        height: 140px;
    }

    /*add all view buttons in here one code*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(3) {
        /*border: 1px solid red;*/
        width: 30px;
        height: 30px;
        position: relative;
        left: 140px;
        top: 10px;
        cursor: pointer;
    }

    /*add eye image into button*/
    body > main > section:nth-child(10) > section:nth-child(2) > div > div:nth-child(3) > a > img {
        width: 20px;
        height: 20px;
    }

    /* add div for add CSS Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 160px;
        position: relative;
    }

    /*CSS Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(2) > div:nth-child(2) > img {
        width: 200px;
        height: 140px;
    }

    /*add div for JA Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 160px;
        position: relative;
    }

    /*JA Animation image*/
    body > main > section:nth-child(10) > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) > img {
        width: 200px;
        height: 140px;
    }

    /*view all button*/
    body > main > section:nth-child(10) > button:last-child {
        width: 50px;
        height: 20px;
    }

    /*add styles to view all button next icon*/
    body > main > section:nth-child(10) > button:last-child > a > i {
        position: relative;
        left: 5px;
    }

    /*add styles view all text*/
    body > main > section:nth-child(10) > button:nth-child(3) > a, u {
        position: absolute;
        left: 3px;
        top: 4px;
        font-size: 8px;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Journey*/
    /*add background color*/
    body > main > section:nth-child(11) {
        width: 100%;
        height: 587px;
        position: relative;
    }

    /*!*add Headline Journey*!*/
    body > main > section:nth-child(11) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > main > section:nth-child(11) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 24px;
        left: 10px;
        right: 0;
        margin: auto;
    }


    /*get flex for add all details and images*/
    body > main > section:nth-child(11) > section:nth-child(3) {
        /*border: 1px solid red;*/
        width: 100%;
        height: 520px;
        position: relative;
        top: 60px;
        display: flex;
        flex-direction: column;
    }

    /*add height and width for individual sections*/
    body > main > section:nth-child(11) > section:nth-child(3) > section {
        /*border: 1px solid green;*/
        width: 100%;
        height: 100%;
        position: relative;
    }

    /*add all div for images*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) {
        /*border: 1px solid red;*/
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        transition: 0.5s;
        width: 70px;
        height: 70px;
    }

    /*add hover for divs*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) :hover {
        width: 70px;
        height: 70px;
    }

    /*add styles for all  image*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > div:nth-child(1) > img {
        width: 70px;
        height: 70px;
    }

    /*add ijse & ccnp description*/
    body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(1) > article:nth-child(2), body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(3) > article:nth-child(2) {
        /*border: 1px solid red;*/
        width: 90px;
        position: absolute;
        right: 15px;
        top: 36px;
        font-size: 7px;
    }

    /*add all hr*/
    body > main > section:nth-child(11) > section:nth-child(3) > section > hr:nth-child(3) {
        width: 56px;
        height: 2px;
        position: relative;
        bottom: -119px;
    }


    /*add greatlake & school description*/
    body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(2) > article:nth-child(2), body > main > section:nth-child(11) > section:nth-child(3) > section:nth-child(4) > article:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100px;
        position: absolute;
        left: 5px;
        top: 40px;
        font-size: 7px;
        text-align: right;
    }

    /*------------------------------------------------------------------------------------*/
    /*Main Section Contact*/
    /*add background color*/
    body > main > section:nth-child(12) {
        width: 100%;
        height: 255px;
        position: relative;
    }

    /*!*add Headline Contact*!*/
    body > main > section:nth-child(12) > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
    }


    /*introduction under Headline*/
    body > main > section:nth-child(12) > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: 24px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add section into contact section for add contact form*/
    body > main > section:nth-child(12) > section:nth-child(3) {
        width: 95%;
        height: 70%;
        /*border: 1px solid red;*/
        position: absolute;
        top: 40px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 40px;
    }

    /*add border styles for contact big git aside*/
    body > main > section:nth-child(12) > section:nth-child(3) > aside:nth-child(1) {
        height: 120px;
        width: 120px;
        /*border: 1px solid red;*/
        position: relative;
        left: 20px;
        top: 26px;
    }

    /*add contact section gif*/
    body > main > section:nth-child(12) > section:nth-child(3) > aside:nth-child(1) > img {
        height: 116px;
        width: 111px;
    }

    /*add form section*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) {
        position: absolute;
        right: 20px;
        bottom: 15px;
    }

    /*!*add space in between form sections*!*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div {
        position: relative;
        padding-bottom: 5px;
    }

    /*styles name, email, subject as a group selector*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div > input {
        width: 100px;
        height: 15px;
        border: none;
        font-size: 5px;
    }

    /*add styles message area*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > div:nth-child(4) > textarea {
        width: 100px;
        height: 30px;
        border: none;
        outline-width: 0;
        font-size: 5px;
    }

    /*send button*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5) {
        border-radius: 50px;
        width: 20px;
        height: 20px;
        position: relative;
        left: 40px;
    }

    /*get fir left icon*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5) > i {
        position: relative;
        left: -4px;
        font-size: 10px;
        top: -3px;
    }

    /*add hover for send button*/
    body > main > section:nth-child(12) > section:nth-child(3) > form:nth-child(2) > button:nth-child(5):hover {
        width: 21px;
        height: 21px;
    }

    /*------------------------------------------------------------------------------------*/
    /*footer Links*/
    /*add background color*/
    body > footer {
        width: 100%;
        height: 450px;
        position: relative;
    }

    /*!*add Headline Links*!*/
    body > footer > div:nth-child(1) {
        position: absolute;
        font-size: 14px;
        display: inline-block;
        text-align: center;
        top: -66px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*introduction under Headline*/
    body > footer > div:nth-child(2) {
        position: absolute;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        top: -44px;
        left: 10px;
        right: 0;
        margin: auto;
    }

    /*add flex into footer section*/
    footer > section {
        display: flex;
        flex-direction: column;
        /*border: 1px solid red;*/
        position: relative;
        width: 100%;
        top: 0px;
        height: 420px;
    }

    /*add all divs under footer section*/
    footer > section > div {
        /*border: 1px solid orange;*/
        width: 100%;
        height: 100%;
    }

    /*add all footer headlines border and center*/
    footer > section:nth-child(3) > div > div:nth-child(1) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*add styles for all footer headlines  portfolio text*/
    footer > section:nth-child(3) > div > div:nth-child(1) > p {
        font-size: 10px;
        position: relative;
        width: 100%;
    }

    /*add border and center description under kasun's portfolio*/
    footer > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) {
        /*border: 1px solid red;*/
        width: 100%;
        text-align: center;
    }

    /*description under kasun's portfolio*/
    footer > section:nth-child(3) > div:nth-child(1) > div:nth-child(2) > article {
        font-size: 12px;
        position: relative;
    }

    /*add quick links nav section styles*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) {
        /*border: 1px solid yellow;*/
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /*add quick links nav section text styles*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a {
        /*border: 1px solid red;*/
        width: 100%;
        height: 12px;
        /*height: 50px;*/
        font-size: 7px
    }

    /*remove underline and default style in navigation*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a, u {
        width: 100%;
        position: relative;
        text-align: center;
    }

    /*add hover for footer quick links*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a:hover {
        font-size: 8px;
    }

    /*add point image in front of navigations*/
    footer > section:nth-child(3) > div:nth-child(2) > nav:nth-child(2) > a > img {
        width: 9px;
        height: auto;
        position: absolute;
        left: 125px;
    }

    /*add border for contact into section*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) {
        /*border: 1px solid gold;*/
        width: 100%;
        height: 150px;
        display: flex;
        flex-direction: column;
    }

    /*add flex for add email,name,phone and social images*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address {
        /*border: 1px solid green;*/
        width: 100%;
        height: 48px;
    }

    /*add border and width and height for all image(gmail,location,phone) div*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(1) {
        height: 25px;
        width: 25px;
        position: relative;
        /*border: 1px solid yellow;*/
        top: 9px;
        left: 34px;
    }

    /*add all image(gmail,location,phone)  into div*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(1) > img {
        height: 25px;
        width: 25px;
    }

    /*add div for all p tags in contact info*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(2) {
        width: 100%;
        text-align: center;
        position: relative;
        bottom: 14px;
    }

    /*add styles for all p tags in contact info*/
    footer > section:nth-child(3) > div:nth-child(3) > section:nth-child(2) > address > div:nth-child(2) > p {
        display: inline-block;
        margin-bottom: 0px;
        margin-top: 0px;
        left: 107px;
    }

    /*add hr between footer*/
    footer > hr:nth-child(4) {
        width: 90%;
        position: relative;
        bottom: 4px;
    }

    /*developed by  text*/
    footer > p:nth-child(5) {
        font-size: 7px;
        position: absolute;
        top: 429px;
        left: 80px;
        width: 140px;
    }

    /*loading gif*/
    footer > img:nth-child(6) {
        width: 16px;
        height: 9px;
        position: absolute;
        top: 428px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    /*add colors developed by text*/
    #span19 {
        color: #CFCFCF;
    }

    #span20 {
        color: #FF0000;
    }

    /*@ 2022 All Rights Reserved text*/
    footer > p:nth-child(7) {
        font-size: 7px;
        position: absolute;
        right: 60px;
        bottom: -1px;
    }


}