@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display&family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,500;1,600&family=Work+Sans:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');

*{
    margin:0;
    padding:0;
}

.sidebar{
    position: absolute;
    background-color: lightgrey;
/*background: url('sidebg.jpg') no-repeat center center/cover;;*/
    font-family: 'Bebas Neue', cursive;
    height: 100vh;
    transition: transform 0.3s ease-in;
}

.sidebar nav{
    padding: 45px;      
}

.sidebar nav li{
    list-style: none;
    font-size: 25px;           
    padding: 15px 0;            
}

.sidebar nav li a{
    text-decoration: none;
    color: black;

}

.main{
    background-color: rgb(233, 228, 228);
    background: url('img1.jpg') no-repeat center center/cover;
    width: 100vw;       
    height: 785px;
}

.infoContainer{
    background-color:black;
    height: 58vh;
    width: 70vw;
    margin: 200px auto;
    display: flex;
    justify-content: space-around;
}

.container{
    display: flex;
}

.devInfo{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.devPic img{
    height: 58vh;
}

.hello{
    font-size: 40px;
    color: white;
    margin: 0px 11px;
}

.name{
    margin: 0px 11px;
    font-size: 30px;
    font-weight: bold;
    font-family: 'DM Serif Display', serif;
    color: white;
    /*font-family: 'Great Vibes', cursive;*/
}

.about{
    font-size: 20px;
    color: white;
    margin: 0px 11px;
}

.moreabout{
    font-size: 20px;
    margin: 0px 11px;
    color: white;
    margin-top: 13px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.button{
    margin-top: 34px;
}

.buttons button{
     padding: 5px 10px;
     border-radius: 27px;
     color: white;
     background-color: dodgerblue;
     font-weight: bold;
     font-size: 16px;
     margin: 10px 3px;
}

.buttons button:hover{
    background-color: white;
    color: dodgerblue;
    cursor: pointer;
}



/*CONTACT PAGE*/
ccontainer{
    display: flex;
    
}
.main1{
    background: url('contactpage01.jpg') no-repeat center center/cover;
    width: 100vw;
    
    height: 120vh;
}

.contactform{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    /*padding: 0 34px;
    padding-top: 64px;
    margin: 23px 288px;*/
    border-radius: 5px;
  /*background-color: #777;*/
  padding: 50px 0px 50px 50px;
  margin-left: 180px;
}


.contactform h1{
    font-family: sans-serif;
    padding: 12px 0;
}

.contactform div{
    /*padding: 10px 0;*/
    display: flex;
    flex-direction: column;
    
}


.contactform div input{
    width: 43vw;
    border-radius: 5px;
    margin: 6px 0 0 0;
    padding: 3px;
   
}

#emailHelp{
    font-size: 10px;
    color: midnightblue;
    margin: 0 5px;
}

#form-check{
    flex-direction: row;
}

#form-check input{
    width: 20px;
    margin: 1px 2px;
}



.btn{
    background-color:green;
    border:none; 
    border-radius:10px; 
    padding:15px 52px;
    min-height:25px; 
    min-width: 200px;
    margin-top: 34px ;
    margin-left: 180px ;
    font-weight: bold;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
  }
  .btnc{
    display: flex;
    flex-direction: column;
    background-color:red;
    border:none; 
    border-radius:10px; 
    padding:15px 70px;
    min-height:25px; 
    min-width: 200px;
    margin-top: 34px ;
    margin-left: 180px ;
    font-weight: bold;
    font-size: 1rem;
  }



.btn:hover{
    cursor: pointer;
   
}

.btnc:hover{
    cursor: pointer;
   
}

.logo{
    display: flex;
    /*flex-direction: column;*/
    align-items: center;
    position: relative;
    top: 38px;
    left: 290px;

}

.logo ul{
    display: flex;
}

.logo ul li{
    list-style: none;
    font-size: 1.5rem;
}

.logo ul li a{
    padding: 3px 34px;
}

.logo:hover{
    cursor: pointer;
}

/* CERTIFICATE*/

.main3{
    background: url('mcerti.webp') no-repeat center center/cover;
    width: 100vw;
    height: 100vh;
    padding: 0px ;
}

.main3 h1{
    text-align: center;
    margin: 25px;
    font-size: 50px;
}

.main3 h3{
    padding: 23px;
    font-size: 1.7rem;
    font-family: 'Poppins', sans-serif;
}

.resume-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4.4rem;
    margin-top: 3rem;
    padding-bottom: 2.4rem;
    border-bottom: 1px solid var();
}

.resume-left{
    margin: 0 140px;
}

.resume-right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin: 0 140px;
}

.resume-right-button{
    margin: 0 140px;
    font-size: 1.3rem;
    text-transform: uppercase;
   /* color: var(--helper);*/
    padding: 0.3rem 0;
    min-width: 40%;
    background: #f3f4ff;
    border-radius: 10rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}

a{
    text-decoration: none;
}

/* Skill */

:root {
    --blue1: #008dff;
    --lightblue: #dcecf9;
    --ora: hsl(24, 100%, 49%);
    --heading: rgb(0,10,45);
    --para: #777;
    --para-tint: #e4e4e4;
    --white: #fff;
    --black: #212529;
    --helper: #8490ff;
    --helper-tint: #f3f4ff;
    --bg: rgb(249 249 255);
    --icons-bg: rgba(144,172,209,0.2);
    --gradient: linear-gradient(0deg, rgb(132 144 255) 0% , rgb(98 189 252) 100%);
    --gradientSupport: -webkit-linear-gradient(0deg, rgb(132 144 255) 0% , rgb(98 189 252) 100%);
    --shadow: 0px 0px 20x 0px rgb(132 144 255 / 20%);
    --shadow-support: 0 2rem 2rem 0 rgb(132 144 255 / 30%);
}


.main4{
    /*width: 100vw;*/
    height: 150vh;
    background: linear-gradient(90deg,rgba(113, 128, 147,1.0),rgba(25, 42, 86,1.0));
}

.main4 h1{
    text-align: center;
    font-size: 80px;
    margin-top: 33px;
    margin-bottom: 43px;
}

.section{
    padding: 3rem 20rem;
    display: flex;
    margin: auto;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.section-services .grid {
    margin-top: 3rem ;
    margin-bottom: 3rem;
    gap: 6rem;
}

.skill-container {
    border-radius: 10px;
    justify-content: center;
    /*background-color: rgb(79, 79, 95);*/
    background-color: #7f8fa6;
    display: flex;
    height: 100vh;
    width: 60vw;
}
 
.grid {
    display: grid;
}

.grid-two-column {
    grid-template-columns: repeat(2 , 1fr);
}

.grid-three-column {
    grid-template-columns: repeat(3 , 1fr);
}

.grid .service-box {
    text-align: center;
    border-radius: 5px;
    padding: 1rem 2rem;
    box-shadow: #212529;
    box-shadow: 10px 10px 10px 5px var(--para-tint);
    transition: all 0.2s linear;
}

service-icon {
    width: 9rem;
    height: 9rem;
    background-color: var(--white);
    border-radius: 30% 70% 33% 67% / 30% 23% 77% 70%;
    padding: 1.4rem 1.8rem;
    position: relative;
    color: var(--helper);
    animation: water-wave 3s linear infinite;
    border: 1px solid var(--helper);
    animation-name: wave-animation;
    animation-duration: 2.1s;
    animation-iteration-count: infinite;
    transform-origin: 70% 70%;
    display: inline-block;
}


/* INTRO.HTML */

.main2{
    /*background: url('intro.jpg') no-repeat center center/cover;*/
    
    width: 100vw;
    height: 460vh;
    padding: 0px 0px;
}

.main2 h1{                   /*intro*/
    font-family: sans-serif;
    padding: 20px;
    margin: 12px 12px;
    text-align: center;
}

.main2 p{               /*intro*/
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    padding: 0px 12px;
    font-size: 20px;

}

.main2 h2{      /*intro*/
    text-align: center;
}

.pro img{
    padding: 30px 140px;
}
#education{
    margin: 0px 34px;
    display: flex;
}
#education .box{
    width: 26vw;
    border: 2px solid brown;
    padding: 34px;
    margin: 25px 6px;
    border-radius: 28px;
    background: grey;
}
#education .box img{
    height: 150px;
    margin: auto;
    display: block;
    
}

#education .box h4{
    text-align: center;
    color: rgb(221, 6, 6);
}

#education .box p{
    margin-top: 10px;
    margin-left: 10px;
    font-size: 2.3;
}

#education .box ul{
    margin-top: 16px;
    margin-left: 21px;
    font-size: 2.3;
}

.button{
    margin-top: 34px;
}

.project h2{
    display: inline-block;
    margin-left: 150px;
}

.project button{
     padding: 5px 10px;
     border-radius: 27px;
     border-color: black;
     color: white;
     background-color: dodgerblue;
     font-weight: bold;
     font-size: 16px;
     margin: 10px 3px;
     margin-left: 640px;
     display: inline-block;
}

.project button:hover{
    background-color: white;
    color: dodgerblue;
    cursor: pointer;
}

.center{
    text-align: center;
}

.h-primary{
    /*font-size: 2.8rem;*/
    padding: 20px;
    font-family: sans-serif;
    padding: 20px;
    margin: 12px 12px;
    text-align: center;
}

.h-secondary{
    font-size: 1.8rem;
    color: blue;
    padding: 7px;
    justify-content: center;
    text-align: center;
}

.skillcontainer{
    list-style: circle;
    font-size: 20px;           
    padding: 25px 100px;
    
    
    
}

.skill{
    width: 330px;
    height: 18px;
    background-color: red;
    margin: 12px 1px;
    border: 2px solid black;
}

.skillItem{
    display: flex;
    align-items: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
}

.hundered{
    width: 265px;
    background-color: green;
}

.s5{
    width: 200px;
    background-color: rgb(11, 26, 240);
}

.fifty{
    width: 125px;
    background-color: yellow;
}

.t5{
    width: 75px;
    background-color: red;
}

.hamburger{
    position: absolute;
    cursor: pointer;
    top: 6px;
    left: 6px;
}

.sidebarGo{
    transform: translate(-443px, 0px);
    position: absolute;
}

.cross{
   margin-left: 160px;
}

                
@media (max-width:1115px){
    .devPic{
        display: none;
    }
    .main2{
        width: 180vw;
    }
    .main2 p{
        font-size: 10px;
    }
    .intro p{
        font-size: 20px;
    }
    #education{
        flex-direction: column;
    }
    #education .box{
    width: auto;
    padding: 14px;
    margin: 50px 130px;
    border-radius: 28px;
    background: #f2f2f2;
    margin-bottom: 20px;
    }
    #education .box ul{
        text-align: center;
        font-size: 1.8rem;
        list-style: none;
    }
    .project h2{
        display: inline-block;
    }
    .project button{
        display: inline-block;
    }
    .contactform{
        margin: 50px, 8px; 
    }
    .grid.section-box{
        flex-direction: column;
        padding: 1rem 1rem;
    }
    .section-services .grid {
        gap: 1rem;
    }
    .pro img{
    padding: 20px 100px;
    }
    .logo ul{
        flex-direction:column ;
    }
    .pro img{
        padding: 15px 70px;
    }
    .main4{
        width: 180vw;
        height: 180vh;
    }
    .skill-container{
        width: 140vw;
    }
    .grid .service-box {
    padding: 3rem 0rem;
}
    .main3{
        background: url('mcerti.webp') no-repeat center center/cover;
        height: 300vh;
        width: 300vw;
    }
    .contactform{
        padding: 20px
    }

    #form{
        margin-left: 20px;
        margin-right: 20px;
    }
    .contactform h1{
        font-size: 40px;
    }
    .main1{
       background: none;
    }
}