@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&family=Lato&display=swap'); *{ padding: 0; margin: 0; box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ font-family: 'Josefin Sans'; font-weight: 400; background-color: #E6F7FF; } :root { --primary-color:#E6F7FF; --secondary-color: black; --white-color:#fff; --black-color: #000000 } h1{ font-size: 85px; line-height: 88px; } h2{ font-size: 52px; line-height: 54px; } h4{ font-size: 26px; line-height: 28px; } h6{ font-size: 22px; line-height: 24px; color: black; } p{ font-size: 22px; line-height: 33px; } .padding-top{ padding-top: 100px; } .padding-bottom{ padding-bottom: 100px; } /*-- header banner --*/ #new-profile { display: flex; justify-content: center; gap: 5rem; height: auto; } .new-section__pic-container { display: flex; height: 300px; width: 300px; margin: auto 0; padding-left: 10rem; } .new-section__text { align-self: center; text-align: center; padding: 100px; color: black; } .new-section__text p { font-weight: 600; } .new-title { font-size: 3rem; text-align: center; } #new-socials-container { display: flex; justify-content: center; margin-top: 1rem; gap: 1rem; } .header-and-banner-con{ background: rgb(33,30,57); overflow: hidden; } .banner-con a{ text-decoration: none; } .banner-heading h6 { color: black; font-weight: bold; margin-bottom: 1rem; } .banner-heading h2{ font-weight: 700; color: black; margin-bottom: 2px; font-size: 3rem; } .banner-heading p{ color: black; margin-bottom: 3rem; font-size: 1.25rem; padding-left: 20px; font-weight: 400; font-family: 'Josefin Sans'; } .btn-container-home { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 10px; } .btn-home { font-weight: 600; transition: all 300ms ease; padding: 10px 20px; border-radius: 1.5rem; font-size: 1.25rem; } .btn-color-con:hover,.btn-color-down:hover { cursor: pointer; } .btn-color-con { background: var(--black-color); color: #E6F7FF; border: var(--black-color) 0.1rem solid; } .btn-color-con:hover { background: #E6F7FF; color: var(--black-color); border: black 0.1rem solid; } .btn-color-down { background: none; color: black; border: black 0.1rem solid; } .btn-color-down:hover { background: var(--black-color); color: #E6F7FF; border: var(--black-color) 0.1rem solid; } /*-- header banner --*/ /*-- navbar banner css --*/ .topnav { position: fixed; top: 0; left: 0; width: 100%; padding: 0; background-color: var(--black-color); font-size: 20px; font-weight: bold; z-index: 999; text-align: center; } .topnav a { display: inline-block; color: #E6F7FF; padding: 18px 15px; text-decoration: none; } .topnav a:hover, .topnav a.active, .topnav a:focus { background-color: #E6F7FF; color: var(--black-color); } .topnav .icon { display: none; } @media (max-width: 1080px) { @media (max-width: 1080px) { .topnav { position: flex; width: 100%; top: 0; } .topnav a:not(:first-child) { display: none; } .topnav a.icon { float: right; display: block; } .topnav.responsive { position: flex; width: 100%; } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } } #return-to-top { position: fixed; bottom: 35px; right: 35px; background: black; width: 50px; height: 50px; text-decoration: none; border-radius: 100%; display: none; z-index: 1000; transition: all 0.3s ease-in-out; } #return-to-top i { color: #E6F7FF; position: relative; left: 16px; top: 15px; font-size: 18px; transition: all 0.1s ease-in-out; } #return-to-top:hover { background: black; } /***** navbar banner css ****/ .facts { width: 100%; height: 100%; background-attachment: fixed; background-color: black; overflow: hidden; color: #E6F7FF; padding-top: 100px; padding-bottom: 100px; } .count { font-size: 5rem; } .fact-item span { font-size: 1.25rem; } /***** experience section css****/ .dates-location, .organization { display: flex; justify-content: space-between; align-items: center; } .dates-location span:first-child, .organization span:first-child { text-align: left; flex: 1; } .dates-location span:last-child, .organization span:last-child { text-align: right; font-weight: 600; flex: 1; } .generic-title h2{ font-weight: 700; } .generic-title{ margin-bottom: 46px; color: black; } .experience-sub-title { color: var(--black-color); font-weight: bold; font-size: 1.25rem; margin-bottom: 5px; } .experience-sub-title-two  { color: var(--black-color); font-weight: bold; font-size: 1.25rem; margin-bottom: 5px; font-style: italic; } .experience-list { display: flex; padding-left: 5%; flex-wrap: wrap; justify-content: left; color: black; font-size: 1.25rem; } /***** experience section css****/ /***** skills section css****/ .skills-sub-title { color: var(--black-color); font-weight: bold; font-size: 1.5rem; margin-bottom: 5px; } .skill-list { display: flex; flex-wrap: wrap; justify-content: left; } .skill { background-color: var(--black-color); color: #E6F7FF; padding: 5px 10px; margin: 4px; border-radius: 8px; font-size: 1.25rem; } /***** skills section css****/ /***** education section css****/ .edu-masters h3{ color: var(--black-color); font-weight: bold; font-size: 1.5rem; padding-top: 10px; } .edu-masters { color: var(--black-color); font-weight: 400; } .edu-masters p { font-size: 1.25rem; margin-bottom: 5px; } .edu-bachelor h3{ color: var(--black-color); font-weight: bold; font-size: 1.5rem; } .edu-bachelor { color: var(--black-color); font-weight: 400; } .edu-bachelor p { font-size: 1.25rem; margin-bottom: 5px; } /***** education section css****/ /*******portfolio section******/ .portfolio-con{ position: relative; background: #E6F7FF; } .btn-color-portfolio:hover { cursor: pointer; } .btn-color-portfolio:hover { background: #E6F7FF; color: black; } .btn-color-portfolio { background: var(--black-color); color: #E6F7FF; border: black 0.1rem solid; } .btn-color-portfolio:hover { border: black 0.1rem solid; } .btn-container { display: flex; justify-content: left; gap: 1rem; flex-wrap: wrap; } .btn { font-weight: 600; transition: all 300ms ease; padding: 5px 20px; border-radius: 8px; font-size: 1.25rem; } /*******portfolio section******/ /**** accomplishments section****/ .accomplishments-con { overflow: hidden; } .accomplishment-sub-title { color: var(--black-color); font-size: 1.5rem; margin-bottom: 5px; font-weight: bold; text-align: center; } .btn-container-certificate { display: flex; justify-content: left; gap: 1rem; flex-wrap: wrap; } /**** accomplishments section ****/ /******contact section*******/ .contact-info-upper-container { display: flex; justify-content: center; border-radius: 1rem; border: black 0.1rem solid; border-color: black; background: (250, 250, 250); margin: 2rem auto; padding: 0.25rem; } .contact-info-container { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 1rem; color: black } .contact-info-container p { font-size: 1.25rem; color: black; margin: 0 20px; } .contact-info-container a { color: black; } .contact-icon { cursor: default; } .email-icon { height: 2.5rem; } .footer-social-icon ul li a { text-decoration: none; } .footer-social-icon ul li a i{ background: var(--black-color); width: 45px; height: 45px; border-radius: 50%; font-size: 20px; color: #E6F7FF; transition-duration: .3s; transition-property: transform; transition-timing-function: ease-out; margin: 0 10px; } .footer-social-icon ul li a i:hover{ color: #E6F7FF; background-color:black ; transform: translateY(-8px); } .footer-social-icon ul li:nth-child(2) a i{ margin-left: 11px; margin-right: 11px; } .footer-social-icon ul li:nth-child(2) a i:hover{ background: black; color: #E6F7FF; transform: translateY(-8px); } .footer-social-icon ul li:last-child a i:hover{ color: #E6F7FF; background: black; transform: translateY(-8px); } .footer-social-icon{ margin-top: 100px; margin-bottom: 100px; } .copy-right-content{ border-top: 1px solid black; } .copy-right-content p{ font-size: 14px; color: black; padding-top: 2px; font-family: 'Josefin Sans'; } .copy-right-content a { color: #00008B; } .contact-info-upper-container { flex-wrap: wrap; } /******contact section*******/