*{
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    /* font-family: 'Open Sans', sans-serif; */
}

body{
    background-color: blueviolet;
    margin: 0;
}

h1{
    font-size: 2.5rem;
    text-align: center;
}

h2{
    font-size:.8rem ;
    color: white;

}

a{
    color: white;
    font-size: 1.2rem;
    text-decoration: none;
}

p{
    font-size: 1.2rem;
    text-align: justify;
}

.dotted-hr{
    border: dotted 6px white;
    border-bottom: none;
    margin: 20px auto;
    width: 50px;

}

[class*="col-"]{
    float: left;
    padding: 10px;
}

/* For Mobile */
[class*="col-"]{
    width: 100%;
}

/* navbar desigh start here */
.navbar{
    background-color: rgb(68, 10, 123);
    padding: 1% 5%;
    text-align: center;
}

.navbar h1{
    color:white;
    margin: 0;
    padding-top: 10px;
}

.navbar-menu{
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
}

.navbar-menu a{
    background-color: rgb(72, 8, 133); /*#0c6168; */
    border-radius: 10px;
    margin: 7px 0px;
    padding: 10px;
}

.navbar-menu a:hover{
    background-color: gray;
}

.navbar:after{
    content: '';
    display: table;
    clear: both;
}
/* navbar desigh start here */

/* profile design start here */
.profile{
    /* background-image: url("background_pictures/HD-wallpaper-3.jpg"); */
    background-image: url("background_pictures/Banner6.png");
    background-size: cover;
    /* background-repeat: no-repeat; */
    max-width: 100%;
    height: auto;


    padding: 130px 10px;
    position: relative;
    text-align: center;
}

.profile .top-weather-icon{
    position: absolute;
    right: 60px;
    top: 25px;
    transition: transform 2s;
}

.profile .top-weather-icon:hover{
   
    transform: rotate(360deg);
}

.profile-desc h1{
    font-family: 'Satisfy', cursive;
    font-size: 4rem;
    color: rgb(218, 218, 24);
}

.profile-desc p{
    color:rgb(160, 145, 145);
    margin: 0px auto 20px auto;
    text-align: center;
    width: 90%;
}

.profile .bottom-weather-icon{
    position: absolute;
    left: 60px;
    bottom: 10px;
    transition: transform 2s;
}

.profile .bottom-weather-icon:hover{
   
    transform: rotate(360deg);
}

.profile::after{
    content: '';
    display: table;
    clear: both;
}
/* profile design ends */

/* about me design starts here */
.about-me{
    background-color: rgb(68, 10, 123);
    padding: 1% 7%;
    color: white ;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.aboutme-image img{
    border: 5px solid white;
    border-radius: 50%;
    height: 250px;
    width: 220px;
}

.about-me p{
    text-align: center;
}

.about-me a{
    font-size: 1rem;
}

.resume-button{
    background-color: red;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    margin: 10px;
}

.about-me::after{
    content: '';
    display: table;
    clear: both;
}
/* about me design end */


/* professional experience starts here */
.professional-experience{
    padding: 1% 0%;
}

.professional-experience .card{
    background-color: gray;
    border-radius: 5px;
    padding: 10px;
    transition: 0.3s;
    /* height: 700px; */
}

.card:hover{
    box-shadow: 0 4px 8px 5px black;
}

.card-icon{
    text-align: center;
}

.card-icon img{
    margin-top: 20px;
    width: 100px;
}

.rounded-img{
    border: 3px solid white;
    border-radius:  50%;
    padding: 15px;
}

.card-title h2{
    background-color: #616161;
    text-align: center;
    color: white;
    padding: 10px;

}

/* skills card design starts  with progress bar*/
.skills-container{
    padding-right: 45px;
}

/* skills design 29/5/2023 */

.skills-container ul strong{
    color: white;
}

.skills-container li{
    list-style: none;
    font-weight: bold;
    margin: 30px 10px;
    position: relative;
    text-transform: uppercase;
}

.skills-container li::before{
    content: '';
    position: absolute;
    top: calc(100% + 5px);
    left: 0px;
    width: 100%;
    height: 10px;
    background-color: rgb(86, 86,153, .5);
    border-radius: 1000px;
}

.skills-container li::after{
    content: '';
    position: absolute;
    top: calc(100% + 5px);
    left: 0px;
    width: 0%;
    height: 10px;
    background-color: blueviolet;
    border-radius: 1000px;

    animation-duration:  3s;
    animation-delay: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 1 ;
}

.skills-container li.mssql::after{
    animation-name: html;
}

@keyframes html{
    to{
        width: 90%;
    }
}

.skills-container li.mysql::after{
    animation-name: mysql;
}

@keyframes mysql{
    to{
        width: 80%;
    }
}

.skills-container li.ms-access::after{
    animation-name: ms-access;
}

@keyframes ms-access{
    to{
        width: 75%;
    }
}

.skills-container li.html5::after{
    animation-name: html5;
}

@keyframes html5{
    to{
        width: 75%;
    }
}

.skills-container li.css3::after{
    animation-name: css3 ;
}

@keyframes css3{
    to{
        width: 75%;
    }
}

.skills-container li.javaScript::after{
    animation-name: javaScript;
}

@keyframes javaScript{
    to{
        width: 75%;
    }
}

.skills-container li.jquery::after{
    animation-name: jquery;
}

@keyframes jquery{
    to{
        width: 75%;
    }
}

.skills-container li.bootstrap::after{
    animation-name: bootstrap;
}

@keyframes bootstrap{
    to{
        width: 75%;
    }
}


.skills-container li.next-js::after{
    animation-name: next-js;
}

@keyframes next-js{
    to{
        width: 75%;
    }
}

.skills-container li.typeScript::after{
    animation-name: typeScript;
}

@keyframes typeScript{
    to{
        width: 50%;
    }
}


.skills-container li.xml::after{
    animation-name: xml;
}

@keyframes xml{
    to{
        width: 75%;
    }
}


.skills-container li.angular::after{
    animation-name: angular;
}

@keyframes angular{
    to{
        width: 75%;
    }
}


.skills-container li.node-js::after{
    animation-name: node-js;
}

@keyframes node-js{
    to{
        width: 75%;
    }
}


.skills-container li.asp-net::after{
    animation-name: asp-net;
}

@keyframes asp-net{
    to{
        width: 90%;
    }
}


.skills-container li.ado-net::after{
    animation-name: ado-net;
}

@keyframes ado-net{
    to{
        width: 75%;
    }
}

.skills-container li.mvc::after{
    animation-name: mvc;
}

@keyframes mvc{
    to{
        width: 80%;
    }
}

.skills-container li.dot-net-core::after{
    animation-name: dot-net-core;
}

@keyframes dot-net-core{
    to{
        width: 80%;
    }
}

.skills-container li.signalR::after{
    animation-name: signalR;
}

@keyframes signalR{
    to{
        width: 50%;
    }
}

.skills-container li.blazor::after{
    animation-name: blazor;
}

@keyframes blazor{
    to{
        width: 80%;
    }
}

.skills-container li.maui::after{
    animation-name: maui;
}

@keyframes maui{
    to{
        width: 40%;
    }
}

/* skills card design "end" with progress bar*/


.professional-experience::after{
    content: '';
    display: table;
    clear: both;
}
/* professional experience end */


/* projects details starts here */
.project {
    background-color: white;
}

.project h1{
    background-color: rgb(68, 10, 123);
    color: white;
    text-align: center;
}

.project h2{
    background-color: white;
    color: rgb(32, 11, 52);
    text-align: center;
    font-size: larger;
}

/* 
.project h1::after{
    content: '';
    display: table;
    clear: both;
} */

/* projects details starts here */ 


/* <!-- achievement-contact design start here ---> */
    .achievement-contact{
        padding: 1% 7%;
        background-color: rgb(68, 10, 123);
        color: white;
    }

.achievement {
    text-align: center; 
}

.achievement h1{
    
    text-align: center; 
}

.achievement ul li{
    padding-top: 25px;
    font-size: 1.2rem;
    text-align: center; 
}

.contact{
    text-align: center;
}

.contact input, textarea{
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    text-align: center;
    border: none;
    border-radius: 5px;
    resize: none;
}

.contact button{
    border: none;
    border-radius: 12px;
    background-color: white;
    color: blueviolet;
    cursor: pointer;
    padding: 15px;
    margin: 10px;
    width: 100px;
    font-size: 1.2rem;
}

.contact-links{
    text-align: center;
}

.media-buttons .btn{
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 32px;
    padding: 5px;
    margin: 10px;
    width: 50px;
    background-color: white;
}

.btn:hover{
    background-color: gray;
}

.achievement-contact::after{
        clear: both;
        display: table;
        content: '';
}
/* <!-- achievement-contact design end --> */


/* footer design starts here */
.footer{
    background-color: rgb(34, 33, 53);
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 0.8rem;
}

.footer-menu a{
    display: block;
    margin: 15px 0px;
    font-size: 1rem;
}

.footer-menu a:hover{
   color: gray;
}


.footer::after{
    display: table;
    content: '';
    clear: both;
}
/* footer design ends here */