@import url('https://fonts.googleapis.com/css2?family=Ramaraja&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap');

*{
    margin: 0 0;
    padding: 0 0;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    scroll-behavior: smooth;
}
body{
    /* background-color: aqua; */
    background-image: url(../img/bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    
}
/* header area starts */
.navbar {
    padding: 1rem 1rem;
    background-color:rgb(209, 144, 241);
    background-image: url(../img/bg1.jpg);
    /* padding: 1rem 5rem; */
   
  
}
.navbar .navbar-brand{
    padding: 0.2rem 0.5rem;
    font-weight: bold;
    color:blueviolet;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-family: 'Patua One', cursive;
    
}
.navbar .navbar-brand:hover{
    text-decoration: underline;
    color: rgb(119, 28, 223);
    filter: brightness(0.9);
}
.nav-item .nav-link{
    text-transform: uppercase;
    font-weight:500;
    padding: 0.4rem 1rem;
    color: blueviolet;
}
#active{
    color: rgb(135, 11, 189);
    font-weight: bold;
    text-decoration: underline;
}
.header_area .navbar-nav .nav-link{
    
    font-weight: bolder;
    color: rgb(248, 29, 230);
}

.header_area .navbar-nav .nav-link:hover {
    color: rgb(135, 11, 189);
    font-weight: bolder;
}
/* header area ends */

/* min width of sections  starts */
/* section{
    display: flex;
    min-height: 95vh;
    width: 100%;
} */
section{
    min-height: 90vh;
    width: 100%;
}

/* min width of sections  starts */
/* banner area starts */
.home-area .banner-area{
   
    padding-top: 5rem;
    
}
.home-area .banner-area .banner-content{
    /* margin:3rem 0rem; */
    padding-top: 5rem;
    /* padding-left: 7rem; */
    
}

.home-area .banner-area .banner-title h4{
    /* padding-top: 0%; */
    font-weight: 500;
}
.home-area .banner-area .banner-title h4:after{
    content:"";
    height: 2px;
    width: 18vw;
    background: blueviolet;
    display: inline-block;
    /* margin-left: 2%; */
    transform: translate'Y'(-10px);
}
.home-area .banner-area .banner-title h2{
    font-size: 3rem;
    font-family: 'Ramaraja', serif;
}
.home-area .banner-area .banner-title h5{
    font-size: 1rem;
    
}
.home-area .banner-area .banner-image img{
    width: 100%;
    padding-top: 0rem;
    
}
.highlight{
    color: rgb(248, 29, 230);
    font-family: 'Patua One', cursive;
    /* font-family: 'Ramaraja', serif; */
}


.button{
    
    /* position: relative; */
    border: 1px solid transparent;
    border-radius: 4px;
    /* width: 1rem; */
}
.button.primary-button{
    
    background: darkviolet;
    /* background-clip: padding-box; */
    color: white;
    font-weight: bold;

    box-shadow: 3px 3px 8px #888888;
}
.button.primary-button a{
    
    color: white;
    text-decoration: none;
    
}
.button.primary-button a:hover{
    
    color: darkviolet;
    text-decoration: none;
    
}

.button.primary-button:hover{
    
    background:white ;
    /* background-clip: padding-box; */
    color: darkviolet;
    
    box-shadow: 3px 3px 8px #888888;
}

/* banner area ends */

/* About area starts */
.about .about-area{
    padding-top: 5rem;
}
.about .about-area .about-area-title{
    margin-left: 2rem;
    /* color: rgb(248, 29, 230); */
}

.about-area  h4:after{
    content:"";
    height: 2px;
    width: 10vw;
    background: rgb(248, 29, 230);
    display: inline-block;
    margin-left: 1%;
    transform: translate'Y'(-10px);
}

.about .about-area .about-content h1{
    /* margin-left: 2rem; */
    font-size: 2rem;
    font-weight: bold;
    text-decoration: underline;
    color:blueviolet ;
    
}

.about .about-area .about-content .my-list ul{
    list-style: none;
}
#highlight{
    font-weight: bold;
    color: blueviolet;
}
.about .about-area .about-content .my-list ul li>i{
    /* display: inline; */
    font-size: 10px;
    padding: 0.5rem;
    color: #888888;
    
}
#my-image{
    width: 70%;
    border-radius: 50%;
    /* margin: 1rem auto; */
    filter: brightness(1.2);
    border: 3px solid rgb(223, 72, 223);
}
#my-image:hover{
    filter: brightness(1.2);
    border: 3px solid rgb(20, 9, 20);
}
/* About area ends */

/* edcation area starts */
.education .education-area{
    margin: 5rem 0;
}
.education .education-area .education-section{
    color: rgb(125, 8, 202);
    font-weight: bold;
    font-family: 'Patua One', cursive;
    text-decoration: underline;
    /* color:blueviolet ; */
}

.education .education-area .box:hover{ 
    box-shadow: 8px 8px 12px #888888;
}

/* education area ends */
/* skills area starts */
.skills .skills-area h4{
    color: rgb(125, 8, 202);;
    font-weight: bold;
    font-family: 'Patua One', cursive;
    text-decoration: underline;
    /* color:blueviolet ; */
}
.skills .skills-area  h5>i{
    /* display: inline; */
    font-size: 17px;
    padding: 0.5rem;
    color: whitesmoke;
    
}

.skills .skills-area  .skill-title{
    color: whitesmoke;
    font-weight: bold;
    text-decoration: underline;
    text-transform: uppercase;
    font-family: 'Patua One', cursive;
}

/* skills area ends */


/* project area starts */
.projects .project-area{
    margin: 3rem 0;
}
.projects .project-area .project-title h4{
    color: rgb(125, 8, 202);
    font-weight: bold;
    font-family: 'Patua One', cursive;
    text-decoration: underline;
}
.projects .project-area .projects .our-project .card{
    background-color:rgb(179, 135, 250);
}
/* project area ends */


/* <!-- contact area starts --> */
 
.contact-area .contact-content{
    margin: 0rem 0;
    
}
.contact-area .contact-content  h4{
    color: rgb(125, 8, 202);
    font-weight: bold;
    font-family: 'Patua One', cursive;
    text-decoration: underline;
}
.contact-area .contact-content .card i{
      color: blueviolet;
      padding: 0.5rem;
      background-color:lightblue;
      border: 2px solid rgb(198, 214, 233);
      border-radius: 50%;
    }
.contact-area .contact-content .card i:hover{
      color: rgb(60, 18, 128);
      padding: 0.5rem;
      background-color:rgb(143, 157, 235);
    }

.contact-area .contact-content .card a{
        color: black;
        text-decoration: none;
        
}
    /* <!-- contact area ends --> */
    /* footer area starts */
footer{
        margin: 0;
        padding: 0;
       
}
    /* footer area ends */
.active{
    font-weight: bold;
    color: rgb(116, 18, 158);
    text-decoration: underline 2px solid ;
    
}


/* mani area ends */


/* code for responsiveness */
@media only screen and (max-width:1010px) {
    .main-area .banner-area .banner-title{
        justify-content:space-around;
        /* margin: 5rem; */
        /* padding: 1rem; */
       

    }
    .main-area .banner-area .banner-image {
        width: 600px;
        /* justify-content: space-evenly; */
    }
}

@media only screen and (max-width:997px) {
   
        .home-area .banner-area .banner-image img{
            width: 100%;
            padding-top: 4rem;
        }
       
       
}