*{
    padding: 0;
    margin: 0;
}
p{
    font-size: 16px;
    line-height: 22px;
    color: white;
}
#hero-section{
    padding: 100px;
    align-items: center;
    text-align: center;
    background-color: #ba5b6b;
}
#hero-section h1{
    font-size: 50px;
    text-transform: uppercase;
    color: rgb(198, 230, 60);
}
#hero-section h3{
    color: white;
    font-size: 30px;
}
#hero-section p{
    padding: 0 200px;
    margin-top: 20px;
}
/* end hero section  */


/* start about section  */
#about{
    text-align: center;
     background-color: #F3C242;
     padding: 100px;
    
}
#about h2{
    color: rgb(72, 68, 68);
    font-size: 30px;
    text-transform: capitalize;
    margin-bottom: 50px;
}
#about-section{
    display: flex;
    text-align: center;
    align-items: center;
}
#about-section .div-left{
    text-align: left;
    padding-right: 50px;
    flex-basis: 35%;
}
#about-section .div-left h6{
    font-size: 25px;
    font-style: italic;
    color: rgb(29, 194, 215);
}
#about-section .div-left h2{
    color: blueviolet;
}
#about-section .div-left p{
    margin-top: -30px;
}
#about-section .div-middle img{
    width: 350px;
    height: 500px;

}
#about-section .div-middle{
    flex-basis: 30%;

}


#about-section .div-right{
    padding-left: 50px;
    text-align: left;
    flex-basis: 35%;
}
#about-section .div-right h3{
    color: blueviolet;
    font-size: 30px;
    padding-bottom: 10px;
}
#about-section .div-right p{
    margin-bottom: 30px;
}

/* end about section  */



/* start skills section  */
#skills{
    padding: 100px;
    background-color: #171818;
    text-align: center;
}
#skills h2{
    color: rgb(72, 68, 68);
    font-size: 30px;
    text-transform: capitalize;
}
#skills h6{
    font-size: 20px;
    color: #ba5b6b;
    margin-top: 10px;
    margin-bottom: 10px;
}
#skills-section{
    display: flex;
    gap: 50px;
    margin-top: 50px;

}
#skills-section h3{
    color: rgb(181, 207, 32);

}
#skills-section div{
    border: 1px solid #dcd9d2;
    border-radius: 10px;
    padding: 30px 50px;
}
/* end skills section  */




/* start services section  */
#services{
    padding: 100px;
    background-color: #282A39;
    text-align: center;
}
#services h2{
    color: rgb(72, 68, 68);
    font-size: 30px;
    text-transform: capitalize;
}
#services h6{
    font-size: 20px;
    color: #ba5b6b;
    margin-top: 10px;
    margin-bottom: 10px;
}
#div-services{
    gap: 50px;
}

#div-services .div-top{
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;

}
#div-services .div-bottom{
    display: flex;
}
#div-services .div-top div{
    padding: 30px 50px;
    box-shadow: 0 0 5px 1px #bebec5;
}
#div-services .div-top h3{
    font-size: 30px;
    padding-bottom: 10px;
    color: #F3C242;
}
#div-services .div-bottom div{
    padding: 30px 50px;
    box-shadow: 0 0 5px 1px #bebec5;
}
#div-services .div-bottom h3{
    font-size: 30px;
    padding-bottom: 10px;
    color: #F3C242;
}
/* start services section  */

/* star portfolio section  */
#portfolio{
    padding: 100px;
    text-align: center;

}
#portfolio h2{
    color: rgb(72, 68, 68);
    font-size: 30px;
    text-transform: capitalize;
}
#portfolio p{
    font-size: 16px;
   color: rgb(72, 68, 68);
    margin-top: 10px;
    margin-bottom: 10px;
}

.portfolio-div{
    display: flex;
    gap: 30px;
    margin-top: 50px;
}
/* end portfolio section  */


/* start edu section  */
#edu{
    padding: 100px;
    background-color: #ba5b6b;
    text-align: center;
}

#edu h2{
    color: rgb(72, 68, 68);
    font-size: 30px;
    text-transform: capitalize;
}
#edu p{
    font-size: 16px;
   color: rgb(72, 68, 68);
    margin-top: 10px;
    margin-bottom: 10px;
}

#edu-div{
    display: flex;
    gap: 100px;
    margin-top: 50px;
}
#edu-div h4{
    margin-top: 20px;
    color: #dcd9d2;
    font-size: 18px;
}
#edu-div div h3{
    color: #F3C242;
    font-size: 25px;
}
/* end edu section  */




/* start testimonial section   */
#testimonial-secion{
    padding: 100px 100px;
    text-align: center;
    background-color: #e63fcf0e;
}
#testimonial-secion h3{
     color: rgb(72, 68, 68);
    font-size: 30px;
    text-transform: capitalize;
}
#testimonial-secion p{
   font-size: 16px;
   color: rgb(72, 68, 68);
    margin-top: 10px;
    margin-bottom: 10px;
}
#testimonial-secion h6{
    font-size: 16px;
    font-weight: 400px;
    color: #bbcd48;
    margin-top: 30px;
    font-style: italic;
}
#testimonial-secion h5{
    font-size: 20px;
    margin-top: 20px;
}
.h6{
  font-size: 10px;
  margin-top: -20px;
}
/* end testimonial section   */





/* start contact section  */
#contact{
    padding: 100px;
    text-align: center;
}
#contact h3{
     color: rgb(72, 68, 68);
    font-size: 30px;
    text-transform: capitalize;
}
#contact p{
   font-size: 16px;
   color: rgb(72, 68, 68);
    margin-top: 10px;
    margin-bottom: 50px;
}

#cotact-section{
    padding: 20px 20px 50px 20px;
    display: flex;
    box-shadow: 0 0 5px 1px #c8c9cc33;
    margin: 0 100px;
    position: relative;
    z-index: 3;
    background-color: white;
    border-radius: 10px;
}
#cotact-section .left-div h3{
    font-size: 38px;
    font-weight: 600;
    color: #132238;
}
#cotact-section .left-div .para{
    font-size: 16px;
    color: #87909D;
}
#cotact-section .left-div{
    flex-basis: 50%;
    text-align: left;
}
#cotact-section .right-div{
    flex-basis: 50%;
}
#cotact-section .left-div .left-div-under{
    display: flex;
    border-radius: 5px;
    box-shadow: 0 0 5px 1px #c8c9cc33;
    width: 450px;
    height: 100px;
    align-items: center;
    margin-bottom: 20px;
}
#cotact-section .left-div .left-div-under img{
    width: 50px;
    height: 50px;
}
#cotact-section .left-div .left-div-under div p{
    font-size: 14px;
    color: #424E60;
    margin-top: 35px;
}
#cotact-section .left-div .left-div-under div h6{
    font-size: 16px;
    font-weight: 600;
    color: #132238;
}
#cotact-section .left-div .left-div-under div{
    text-align: left;
    padding-left: 20px;
}
.icon-div2{
    align-items: center;
}
.icon-div2 img{
    width: 50px;
    height: 50px;
}


/* div right side code  */

#cotact-section .right-div p{
    font-size: 16px;
    color: #87909D;
    margin-top: 50px;
}
#cotact-section .right-div form {
    width: 420px;
}
#cotact-section .right-div form input{
    border-style: none;
    border-bottom: 1px solid #c8c9cc;
    padding: 15px 50px 15px 0;
    color: #dde2e94d;
    width: 100%;
}
#cotact-section .right-div textarea{
    border-style: none;
    border-bottom: 1px solid #c8c9cc;
    padding: 20px 50px 20px 0;
    color: #dde2e94d;
    width: 100%;
}
#cotact-section .right-div button{
    background-color: #A53DFF;
    padding: 12px 22px;
    border-style: none;
    border-radius: 5px;
    margin-top: 30px;
    color: white;
    text-align: center;
    font-size: 18px;
}
#cotact-section .right-div button img{
    width: 15px;
    margin-left: 10px;
}
.form-group{
    display: flex;
    gap: 20px;
}
.form-group input{
    flex-basis: 50%;
}

/* end contact section  */


#footer-section{
    display: flex;
    background-color: #132238;
    padding: 30px;
    justify-content: space-around;
}
.icon-div2 img{
    width: 30px;
    height: 30px;
}