*{padding: 0%; margin: 0%;}
body{font-family: "Poppins", sans-serif; box-sizing: border-box;}
p {color: rgb(85, 85, 85);}

/* header */
nav{width: 100%; height: 100%;}
img.logo{margin: 0px 100px; width:80px}
nav ul{float: right; list-style: none;}
nav ul li{display: inline-block; line-height: 80px;}
nav ul li a{text-decoration:none; font-size: 24px; color: #000; margin-left: 10px; text-transform: capitalize; padding: 8px 20px;}
nav ul li a.active, a:hover{ text-decoration: underline; text-decoration-color: #ff004f; text-underline-offset: 1rem;}
.check-icon{display: none;}
#check{display: none;}

/* my-profile */
#my-profile{display: flex; justify-content: center; gap: 5rem; height: 80vh;}
.section__pic-container {height: 450px; width: 450px; margin: auto 0; display: flex;}
.section__pic-container img{border-radius: 10px;}
.section_text{align-self: center;text-align: center;}
.section__text__p1{font-weight: 600;text-align: center;}
.title{font-size: 3rem; text-align: center;}
.name-col{color:#ff004f}
.section_text_p2{font-weight: 600;font-size: 1.75rem; margin-bottom: 1rem;}
.btn-container{gap: 16px;}
.btn{font-weight: 600; transition: all 300ms ease; padding: 1rem; width: 15rem; border-radius: 2rem; margin-top: 30px; }
.btn-download{ background-color: #ff004f; border: #ff004f; color: white;}
.btn-Contact_info{background: rgb(53, 53, 53); color: white;}
#socials-container{display: flex; justify-content: center; margin-top: 1rem; gap: 1rem;}
.icon{cursor: pointer; height: 30px;}
.tab-titles {display: flex; margin: 5% 0 20px;}
.tab-links {margin-right: 50px; font-size: 18px; font-weight: 500; cursor: pointer; position: relative;}
.icon-imag:hover{ transform: translateY(-5px);}
.containers {position: relative;}
.modal { display: none; position: absolute; top: 100%; left: 0; width: 200%; background-color: rgba(0, 0, 0, 0.5); color: white; padding: 0px;}
.hoverable-text:hover + .modal {display: block; color: black;}
.modal-content {background-color: white; color: black; padding: 20px;}

/* experience */
.section_text_p1 {text-align: center;}
.about-containers{ display: flex; gap: 2rem; margin-bottom: 2rem; margin-top: 2rem;}
.about-details-container {display: flex;}
.details-container {padding: 1.5rem; flex: 1; background: white; border-radius: 2rem; border: rgb(53, 53, 53) 0.1rem solid; border-color: rgb(163, 163, 163); text-align: center;}
.experiences{padding: 30px;}
.container-experience{padding: 10px 4%; margin-top: 40px;}
.start-end-date{color: #ff004f; font-size: 14px;}

/* my project */
#myprojects{padding: 30px;}
.container{padding: 10px 3%;}
.sub-title{font-size: 3rem; }
.myprojects-list{display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 40px; margin-top: 50px;}
.myprojects-list div i { font-size: 50px; margin-bottom: 30px;}
.myprojects-list div {background: #262626; padding: 40px; font-size: 13px; font-weight: 300; border-radius: 10px; transition: background 0.5s, transform 0.5s; color: #fff;}
.myprojects-list div i {font-size: 50px; margin-bottom: 30px;}
.myprojects-list div h2 {font-size: 30px; font-weight: 500; margin-bottom: 15px;}
.myprojects-list div a {text-decoration: none; color: #fff; font-size: 12px; margin-top: 20px; display: inline-block;}
.myprojects-list div:hover {background-color: #ff004f; transform: translateY(-10px);}

/* contact form */
.container{padding: 10px 3%;}
.row{display: flex; justify-content: space-between; flex-wrap: wrap;}
.contact-left{flex-basis: 35%; padding: 30px;}
.sub-title{font-size: 3rem; font-weight: 600;}
.contact-left p {margin-top: 30px;}
.social-icons{margin-top: 30px; display: flex; gap: 16px;}
.contact-right{flex-basis: 60%;}
.contact-right form {width: 93%;}
.btn2 {display: inline-block;  background: #ff004f; border: #ff004f; color: white;}
.download-Cv{text-decoration: none; color: #fff;}
form input, form textarea {width: 100%; border: 0; outline: none; background: #f2f0f0; padding: 15px; margin: 15px 0; color: #000; font-size: 18px; border-radius: 6px;}

/* copyright */
.copyright{width: 100%; text-align: center; padding: 25px 0; font-weight: 300; margin-top: 20px;} 


/* media query */
@media (max-width :376px) {
    nav ul li{display: block; }
    #my-profile{display: block;}
    .about-containers{display: block;}
    .check-icon{display: block; color: #fff; float: right; margin-right: 10px; line-height: 80px; }
}