*{margin:0%;padding:0%}html,body,#root{height:100%;width:100%;background-color:#000}.hero{height:90%;width:100%;display:flex}.hero .left{height:100%;width:50%;display:flex;align-items:center;justify-content:center}.hero .left .content{height:80%;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:20px;color:#fff}.content .name{font-size:2vw}.content .name h1{color:#f8b305}.content .name .nameSpan{font-weight:100;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#fff}.content .profession{font-size:1.5vw}.content .summery{font-size:1.2vw}.content .icon{width:100%;height:10%;display:flex;align-items:center;justify-content:space-around;font-size:2vw;border-radius:20px;margin-top:90px}.content .icon .hackrank{color:green;height:100%;width:10%;background-color:#ffffff9d;display:flex;align-items:center;font-size:3vw;justify-content:center;border-radius:10px}.content .icon .linkdin{color:#121270;height:100%;width:10%;font-size:3vw;background-color:#ffffff9d;display:flex;align-items:center;justify-content:center;border-radius:10px}.content .icon .youtube{color:red;height:100%;width:10%;font-size:3vw;background-color:#ffffff9d;display:flex;align-items:center;justify-content:center;border-radius:10px}.content .icon .facebook{color:#4848f1;height:100%;width:10%;font-size:3vw;background-color:#ffffff9d;display:flex;align-items:center;justify-content:center;border-radius:10px}.content .icon .github{color:#000;height:100%;width:10%;font-size:3vw;background-color:#ffffff9d;display:flex;align-items:center;justify-content:center;border-radius:10px}.hero .right{height:100%;width:50%;display:flex;align-items:center;justify-content:center}.hero .right .img{height:80%;width:80%;display:flex;align-items:center;justify-content:center;border-bottom:3px solid white;border-radius:20px;margin-bottom:40px;background:linear-gradient(45deg,#000,#000,#4e4c4c8f,#000,#000)}.right .img img{height:100%;width:70%}@media (max-width:500px){.hero{display:flex;flex-direction:column-reverse}.hero .left,.hero .right{width:100%;height:50%}.hero .left .content{height:100%;width:100%}.hero .right .img{height:100%;width:80%;margin:0%;border-radius:20px}.right .img img{height:100%}.content .icon{margin-top:0%}.content .icon .hackrank,.content .icon .linkdin,.content .icon .facebook,.content .icon .youtube,.content .icon .github{width:13%;height:35px;font-size:5vw}.content .name{margin-top:5%;font-size:4vw}.content .profession{font-size:4vw}.content .summery{font-size:3vw}}.navbar{height:10%;width:100%;display:flex;justify-content:space-between}.navbar .logo{height:100%;width:20%;display:flex;align-items:center;justify-content:center;font-size:2.5vw;font-family:fantasy;color:#fff}.navbar .navitems{height:100%;width:50%;display:flex;align-items:center;justify-content:center;font-size:1.6vw}.navitems a{text-decoration:none;color:#fff;height:100%;width:20%;border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif}.navitems a:hover{background-color:#ffffff86;color:#000}.menu{display:none}@media (max-width:500px){.navitems,.navitems a{display:none}.navbar{height:10%;width:100%}.navbar .logo{width:20%;font-size:6vw}.navbar .navitem{height:50%;width:40%;position:absolute;margin-top:15%;margin-left:58%;display:flex;flex-direction:column;border-radius:10px;background-color:#ffffff2f}.navbar .navitem .item{width:100%;height:20%;border-bottom:.5px solid white;display:flex;align-items:center;justify-content:center;border-radius:10px}.item a{font-size:4vw;color:#fff;text-decoration:none}.menu{width:20%;display:flex;align-items:center;justify-content:center}.menu a{color:#fff;font-size:6vw}}.SkillSection{height:100%;width:100%;background-color:#000;color:#fff;overflow:hidden}.SkillSection .skillLogo{padding:2%;text-align:center;font-size:2vw;font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif}.SkillSection .mySkill{height:83%;width:100%;display:flex;flex-direction:column;row-gap:50px}.SkillSection .mySkill .section1{height:35%;width:100%;margin-top:5%;display:flex;justify-content:space-around}.SkillSection .mySkill .section1 .skill{height:100%;width:350px;display:flex;align-items:center;justify-content:center;flex-direction:column;row-gap:15px;margin-left:15%}.section1 .skill h2{font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif}.section1 .skill .skillImg{height:100%;width:150px}.section1 .skill .skillImg img{height:100%;width:100%}.SkillSection .mySkill .section2{height:35%;width:100%;display:flex;justify-content:space-around}.SkillSection .mySkill .section2 .skill{height:100%;width:350px;display:flex;align-items:center;justify-content:center;flex-direction:column;row-gap:15px;margin-left:15%}.section2 .skill .skillImg{height:100%;width:150px}.section2 .skill .skillImg img{height:100%;width:100%}.section2 .skill h2{font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif}.myExperience{display:none}@media (max-width:500px){.SkillSection{height:auto}.SkillSection .skillLogo{padding:7%;font-size:3.5vw}.SkillSection .skillLogo span{font-weight:100;font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif}.SkillSection .mySkill{display:flex;row-gap:30px;background-color:#000}.SkillSection .mySkill .section1 .skill,.SkillSection .mySkill .section2 .skill{border:none;margin-right:15px}.SkillSection .mySkill .section1{position:relative;height:20%}.SkillSection .mySkill .section2{height:20%}.section1 .skill h2{font-size:2.5vw}.section1 .skill .skillImg{width:40%}.section1 .skill .skillImg img{height:50px;width:50px;border-radius:10px}.section1 .skill .skillName{margin-left:30px}.section2 .skill .skillImg{width:40%}.section2 .skill .skillImg img{height:50px;width:50px;border-radius:10px}.section2 .skill h2{font-size:2.5vw;margin-left:30px}.myExperience{width:100%;display:flex;align-items:center;flex-direction:column;row-gap:10px;background:linear-gradient(to bottom,#000,#fff)}.myExperience .logo{text-align:center;width:100%}.myExperience .logo h1{font-size:7vw;padding:5%}.myExperience .logo span{font-weight:100;font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif}.myExperience .experience1{width:80%;background:linear-gradient(to right,#000,#7b7b91);text-align:center;overflow-y:visible;padding:5%;border-radius:10px}}.experienceSection{height:100%;width:100%;background:linear-gradient(to bottom,#000,#fff);display:flex;align-items:center;flex-direction:column;row-gap:20px;padding-top:1%;padding-bottom:1%}.experienceSection .logo{text-align:center;padding:2%;font-size:2vw;color:#fff}.experienceSection .logo span{font-weight:100}.experienceSection .experience1{background-color:#00f;width:75%;height:30%;border-radius:10px;text-align:center;color:#fff;padding:2%;background:linear-gradient(to right,#000,#5a5353)}@media (max-width: 1200px){.experienceSection{display:none}}.aboutSection{height:100%;width:100%;background-color:#fff;color:#000}.aboutSection .logo{text-align:center;padding-top:2%;font-size:2vw;color:#000}.aboutContent{display:flex;text-align:center;width:90%;margin-top:50px}.aboutContent .picture{height:50%;width:50%;margin-top:15px;object-fit:cover;display:flex;align-items:center;justify-content:center}.picture img{height:50%;width:50%;object-fit:fill;border-radius:10px}.aboutContent .content{width:50%;text-align:center;padding:4%;border-radius:10px;color:#000;box-shadow:5px 5px 10px #000}.para2{display:none}@media (max-width:500px){.aboutSection{width:100%;background-color:#fff;color:#000}.aboutSection .logo{text-align:center;padding-top:4%;font-size:4vw;color:#000}.aboutContent{width:100%;display:flex;align-items:center;flex-direction:column;row-gap:20px;margin:0%}.aboutContent .picture{height:50%;width:50%;object-fit:cover;margin-bottom:0}.picture img{height:100%;width:100%;object-fit:fill;border-radius:10px;margin:0}.aboutContent .content{width:80%;text-align:center;border-radius:10px;color:#000}.para1{display:none}.para2{display:block}}.certificateSection{height:100%;width:100%;background-color:#fff}.certificateSection .logo{text-align:center;padding:2%;font-size:2vw}.certificateSection .certificates{height:81.5%;width:100%;display:flex;align-items:center;justify-content:space-around}.certificates .certificat1{height:80%;width:25%;text-align:center;box-shadow:5px 5px 10px #000}.certificat1 .pic{height:80%;width:100%;border-bottom:2px solid black}.certificat1 .pic img{height:100%;width:100%;object-fit:cover}@media (max-width: 500px){.certificateSection{height:auto;width:100%}.certificateSection .logo{font-size:4vw;padding-bottom:20px}.certificateSection .certificates{width:100%;display:flex;row-gap:10px;flex-direction:column;align-items:center}.certificates .certificat1{width:60%;padding-bottom:10px}.certificat1 .pic img{width:100%;object-fit:contain}}.footer{height:10%;width:100%;background-color:#000;display:flex;align-items:center;justify-content:center}.footer h2{color:#fff}@media (max-width:500px){.footer h2{font-size:4vw}}.contact{height:50%;width:100%;background-color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-bottom:10px}.contact .logo{margin-top:20px;padding-bottom:10px}.contact .contactForm{height:89%;width:70%;display:flex;align-items:center;justify-content:center}.contact .contactForm form{display:flex;flex-direction:column;row-gap:20px}.contactForm form input{height:35px;width:400px;text-align:center;border-radius:10px;border:.5px solid black;outline:none}.contactForm form input:hover{background-color:#000;color:#fff;font-weight:700}.contactForm form textarea{height:50px;width:400px;text-align:center;border-radius:10px;outline:none}.contactForm form textarea:hover{background-color:#000;color:#fff;font-weight:700}.contactForm form button{height:40px;width:150px;text-align:center;border-radius:10px;margin-left:130px;background-color:#000;color:#fff;font-size:1.5vw;font-weight:700;transition:all .5s}.contactForm form button:hover{transform:scale(1.2)}.messegSend{height:200px;width:100px;display:flex;align-items:center;justify-content:center;color:#fff;background-color:#000}@media (max-width:500px){.contact{height:50%;width:100%;background-color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-bottom:10px}.contact .logo{margin-top:20px;padding-bottom:10px}.contact .contactForm{height:89%;width:70%;display:flex;align-items:center;justify-content:center}.contact .contactForm form{display:flex;flex-direction:column;row-gap:20px}.contactForm form input{height:35px;width:300px;text-align:center;border-radius:10px;border:.5px solid black;outline:none}.contactForm form textarea{height:50px;width:300px;text-align:center;border-radius:10px;outline:none}.contactForm form button{height:40px;width:150px;text-align:center;border-radius:10px;margin-left:80px;font-size:5vw}}