@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: 'Poppins', sans-serif;
   background: #F4F8FC;
}

html {
   scroll-behavior: smooth;
}

p {
   color: rgb(85, 85, 85);
}

/* Transition */

a, 
.btn {
   font-family: inherit;
   transition: all 300ms ease;
}

/* Navs */

nav, 
.nav-links {
   display: flex;
}

nav {
   justify-content: space-around;
   align-items: center;
   height: 13vh;
   background: #fff;
   /* position: sticky;
   z-index: 999;
   top: 0;
   left: 0; */
}

.nav-links {
   gap: 2rem;
   list-style: none;
   font-size: 1.2rem;
}

a {
   color: #1a2236;
   text-decoration: none;
   text-decoration-color: #fff;
}

a:hover {
   /* color: grey; */
   color: #fcc458;
   text-decoration: underline;
   text-underline-offset: 16px;
   text-decoration-color: #fcc458;
}

.logo {
   font-size: 2rem;
   color: #1a2236;
   border: 2px solid #1a2236;
   border-radius: 5px;
   padding: 1px 8px;
}

.logo:hover {
   cursor: pointer;
}

.logo a:hover {
   text-decoration: none;
   color: #1a2236;
}

/* Hamburger Menu */

#hamburger-nav {
   display: none;
}

.hamburger-menu {
   position: relative;
   display: inline-block;
}

.hamburger-icon {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 24px;
   width: 30px;
   cursor: pointer;
}

.hamburger-icon span {
   width: 100%;
   height: 2px;
   background-color: #000000;
   transition: all 0.3 ease-in-out;
}

.menu-links {
   position: absolute;
   top: 100%;
   right: 0;
   background-color: #fff;
   width: fit-content;
   max-height: 0;
   overflow: hidden;
   transition: all 0.3 ease-in-out;
}

.menu-links a {
   display: block;
   padding: 10px;
   text-align: center;
   font-size: 24px;
   color: #1a2236;
   text-decoration: none;
   transition: all 0.3 ease-in-out;
}

.menu-links a:hover {
   color: #fcc458;
   text-decoration: underline;
   text-underline-offset: 16px;
   text-decoration-color: #fcc458;
}

.menu-links li {
   list-style: none;
}

.menu-links.open {
   max-height: 300px;
}

.hamburger-icon.open span:first-child {
   transform: rotate(45deg) translate(10px, 5px);
}

.hamburger-icon.open span:nth-child(2) {
   opacity: 0;
}

.hamburger-icon.open span:last-child {
   transform: rotate(-45deg) translate(10px, -5px);
}

.hamburger-icon span:first-child {
   transform: none;
}

.hamburger-icon span:first-child {
   opacity: 1;
}

.hamburger-icon span:first-child {
   transform: none;
} 

/* Sections */

section {
   padding-top: 4vh;
   height: 90vh;
   margin: 0 10rem;
   box-sizing: border-box;
   min-height: fit-content;
}

.section-container {
   display: flex;
}

.section__pic-container img {
   border-radius: 50%;
   /* max-width: 50%; */
   /* width: 45%; */
   /* height: ; */
}

/* Hero */

#hero {
   display: flex;
   justify-content: center;
   gap: 5rem;
   height: 80vh;
   /* background: #F8F8F8; */
}

.section__pic-container {
   display: flex;
   height: 350px;
   width: 400px;
   margin: auto 0;
}

.section__text {
   align-self: center;
   text-align: center;
}

.section__text p {
   font-weight: 600;
}

.section__text__p1 {
   text-align: center;
   color: #1a2236;
}

.section__text__p2 {
   font-size: 1.75rem;
   margin-bottom: 1rem;
   color: #1a2236;
}

.title {
   font-size: 38px;
   text-align: center;
   color: #1a2236;
}

#socials-container {
   display: flex;
   justify-content: center;
   margin-top: 1rem;
   gap: 1rem;
}

/* icons */
.icon {
   cursor: pointer;
   height: 2rem;
}

/* buttons */

.btn-container {
   display: flex;
   justify-content: center;
   gap: 1rem;
}

.btn {
   font-weight: 600;
   transition: all 300ms ease;
   padding: 1rem;
   width: 8rem;
   border-radius: 10px;
}

.btn-color-1, 
.btn-color-2 {
   border: 1.6px solid #1a2236;
}

.btn-color-1:hover, 
.btn-color-2:hover {
   cursor: pointer;
}

.btn-color-1, 
.btn-color-2:hover {
   /* background: rgb(53, 53, 53); */
   background: #1a2236;
   color: #fff;
}

.btn-color-1 {
   color: #fcc458;
}

.btn-color-1:hover {
   /* background: #fff; */
   background: #fcc458;
   border: 1.6px solid #fcc458;
   color: #1a2236;
}

.btn-color-2 {
   background: none;
}

.btn-color-2:hover a {
   color: #fcc458;
   text-decoration: none;
}

.btn-color-3 {
   background: #1a2236;
}

.btn-color-3 a {
   color: #fff;
   text-decoration: none;
}

.btn-color-3:hover {
   background: #fcc458;
   border: 1px solid #fcc458;
}

.btn-color-3:hover a {
   color: #1a2236;
}


.btn-color-2:hover {
   /* border: rgb(255, 255, 255) 0.1rem solid; */
}

.btn-container {
   gap: 1rem;
}

/* About Section */

#about {
   position: relative;
}

.about-containers {
   gap: 2rem;
   margin-bottom: 2rem;
   margin-top: 2rem;
}

.about-details-container {
   justify-content: center;
   flex-direction: column;
}

.about-containers,
.about-details-container {
   display: flex;
}

.about-pic {
   border-radius: 2rem;
   height: 400px;
   width: 400px;
}

.arrow {
   position: absolute;
   right: -5rem;
   bottom: 2.5rem;
}

.details-container {
   padding: 1.5rem;
   flex: 1;
   background: #fff;
   border-radius: 20px;
   border: 1.6px solid #1a2236;
   border-color: rgb(163, 163, 163);
   text-align: center;
} 

.details-container h3, p {
   color: #1a2236;
}

.section-container {
   gap: 4rem;
   height: 80%;
}

.section__pic-containter {
   /* height: 400px; */
   /* width: 400px; */
   margin: auto 0;
}

.text-container p {
   color: #1a2236;
   text-align: justify;
}

/* Experience Section */

#experience {
   position: relative;
}

.experience-sub-title {
   color: #1a2236;
   font-weight: 600;
   font-size: 28px;
   margin-bottom: 32px;
}

.experience-details-container {
   display: flex;
   justify-content: center;
   flex-direction: column;
}

.article-container {
   display: flex;
   text-align: initial;
   flex-wrap: wrap;
   flex-direction: row;
   gap: 2.5rem;
   justify-content: space-around;
}

article {
   display: flex;
   width: 10rem;
   /* justify-content: space-between; */
   text-align: justify;
   gap: 0.5rem;
}

article .icon {
   cursor: default;
}

article p {
   display: none;
}

/* Projects */

#projects {
   position: relative;
}

.color-container {
   border-color: rgb(163, 163, 163);
   background: rgb(250, 250, 250);
  
}

.project-img {
   /* border-radius: 2rem; */
   border-radius: 10px;
   width: 90%;
   height: 90%;
}

.project-title {
   margin: 1.5rem;
   color: #000000;
}

/* .project-btn {
   color: #000000;
   border-color: rgb(163, 163, 163);
} */

.row {
   /* display: flex; */
}

/* Contact */

#contact {
   display: flex;
   justify-content: center;
   flex-direction: column;
   height: 70vh;
} 

.contact-info-upper-container {
   display: flex;
   justify-content: center;
   border-radius: 20px;
   border: 1.6px solid #1a2236;
   border-color: rgb(163, 163, 163);
   background: rgb(250, 250, 250);
   /* margin: 2rem auto; */
   margin: 32px auto;
   padding: 0.5rem;
}

.contact-info-container {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   /* margin: 1rem; */
   margin: 14px;
}

.contact-info-container p {
   font-size: larger;
}

.contact-icon {
   cursor: default;
}

.email-icon {
   height: 2.5rem;
}

.mailto a:hover {
   color: #1a2236;
   text-decoration-color: #1a2236;
}
/* Footer */

footer {
   height: 26vh;
   margin: 0.1rem;
}

footer p {
   text-align: center;
   color: #fcc458;
   padding-top: 0.5rem;
}

.down a {
   color: #fff;
   font-size: 1.5rem;
   
}

.down a:hover {
   color: #fcc458;
   text-decoration-color: #fcc458;
}

.base {
   /* background: #1a2236; */
   background: #3c4154;
}