body {
    font-family: 'Arial', sans-serif;
    color: #333;
    margin: 0px;
    padding: 0px;
    background-color: #FAEBEF;
}

html {
    scroll-behavior: smooth;
}

/* Header */
.header {
    background-color: #333D79;
    color: #FAEBEF;
    display: flex;
    justify-content: space-between;
    padding: 30px 44px;
    align-items: center;
}

.header h1 {
    font-size: 30px;
    margin: 0;
}

 .button {
    background-color: #FAEBEF;
    color: #333D79;
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;
    padding: 20px 28px;
    font-size: 18px;
}

.button2 {
    background-color: #333D79;
    color: #FAEBEF;
    text-decoration: none;
    padding: 20px 28px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 15px;
    
}

 .button:hover {
    background-color: #e76f51;
    transition: 0.3s ease;
}

.button2:hover {
    background-color: #3bb6a393;
    transition: 0.3s ease;
}

.scroll-button {
    background-color: #FAEBEF;
    padding: 15px 15px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    color: #333D79;
    bottom: 30px;
    right: 30px;
    position: absolute;
}

.scroll-button:hover {
    background-color:  #e76f51; 
    transition: 0.3s ease;
}

 .section-title {
    font-size: 32px;
    color: #2a9d8f;
    text-align: center;
    font-size: 40px;
    color: #333D79;
    margin-bottom: 30px;
}

/* Skills Section */
.skills {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.box {
    max-width: 1100px; 
    background-color: #333D79;
    padding: 50px;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding-bottom: 5%; /* Restore the size to match the original */
    margin: 150px;
    margin-top: 30px;
    position: relative;
    padding-left: 50px;
    
}

.box-title {
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
    color: #FAEBEF;
}

.box-description {
    font-size: 16px;
    color: #FAEBEF;
    text-align: center;
}

.centered-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.proof {
    font-size: 28px;
    text-align: center;
    margin: 20px;
    color: #FAEBEF;
}

p {
    color: #FAEBEF;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.row {
    display: flex;
    gap: 4rem;
}

.moodboard1 {
    max-height: 48rem;
    max-width: 24rem;
}

.moodboard2 {
    max-height: 68rem;
    max-width: 34rem;
}

.portfolioimg {
    max-width: 35rem;
    max-height: 70rem;
}

a {
    color: #FAEBEF;
}

.interview {
    max-height: 48rem;
    max-width: 24rem;
}

.retrospective {
    max-height: 30rem;
    max-width: 30rem;
}

.black {
    color: #9e9e9e;
}

.companalys {
    max-height: 20rem;
    max-width: 40rem;
}

.persona {
    max-height: 35rem;
    max-width: 35rem;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropbtn {
    background-color: #FAEBEF;
    color: #333D79;
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;
    padding: 20px 28px;
    font-size: 18px;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn { transition: 0.3s;
    background-color:  #e76f51;}

.medialab {
    max-width: 27rem;
    max-height: 33rem;
}

.feedback {
    max-width: 33rem;
    max-height: 19rem;
}

.stat {
    max-width: 40rem;
    max-height: 40rem;
}

.app2 {
    max-width: 23rem;
    max-height: 23rem;
}

.code {
    max-width: 17rem;
    max-height: 30rem;
}

.code2 {
    max-width: 21rem;
    max-height: 30rem;
}

.code3 {
    max-width: 26rem;
    max-height: 18rem;
}

.code4 {
    max-width: 12rem;
    max-height: 18rem;
}  

.team {
    max-width: 25rem;
    max-height: 35rem;
}

.css {
    max-width: 37rem;
    max-height: 20rem;   
}

.php {
    max-width: 27rem;
    max-height: 27rem;
}

.attendance {
    max-width: 30rem;
    max-height: 13rem;
}

.gbt {
    max-width: 30rem;
    max-height: 30rem;
}

.sc {
    max-width: 15rem;
    max-height: 30rem;
}

.violet {
    max-width: 35rem;
    max-height: 25rem;
}

.purple {
    width: 19rem;
    height: 28rem;
    margin-left: -22rem;
    margin-top: -23rem;
}

.purple2 {
    max-width: 15rem;
    max-height: 17rem;
    
}

.purple3 {
    max-width: 15rem;
    max-height: 17rem;
    
}

.cardsort {
    max-width: 40rem;
    max-height: 40rem;
}

.resp1 {
    max-width: 40rem;
    max-height: 15rem;
}

.resp2 {
    max-width: 25rem;
    max-height: 20rem;
}

.resp3 {
    max-width: 22rem;
    max-height: 12rem;
}

.resp5 {
    max-width: 20rem;
    max-height: 10rem;
}

.resp7 {
    max-width: 20rem;
    max-height: 10rem;
}

.resp9 {
    max-width: 20rem;
    max-height: 10rem;
}

.resp10 {
    max-width: 20rem;
    max-height: 20rem;
    margin-top: -10rem;
}

.picoosurvey {
    max-width: 15rem;
    max-height: 40rem;
}

.picooprot {
    max-width: 47rem;
    max-height: 28rem;
}

.userplan {
    max-width: 40rem;
    max-height: 30rem;
}

.userfeed {
    max-width: 40rem;
    max-height: 10rem;
}

.create-quiz {
    max-width: 40rem;
    max-height: 20rem;
}

.picoo-persona {
    max-width: 40rem;
    max-height: 25rem;
}

.chal1 {
    max-width: 23rem;
    max-height: 6rem;
}

.chalph {
    max-width: 9rem;
    max-height: 16rem;
}

.chaldeks {
    max-width: 16rem;
    max-height: 9rem;
}

.chalimg1 {
    max-width: 16rem;
    max-height: 9rem;
}

.chalimg2 {
    max-width: 13rem;
    max-height: 13rem;
}

.chalimg3 {
    max-width: 9rem;
    max-height: 16rem;
}

.chaltesti {
    max-width: 20rem;
    max-height: 7rem;
}

.chal4 {
    max-width: 20rem;
    max-height: 7rem;
}

.chal5 {
    max-width: 17rem;
    max-height: 10rem;
}

.right-side-text {
    margin-left: 40rem;
}

.pres {
    max-width: 35rem;
    max-height: 20rem;
}

.debr {
    max-width: 25rem;
    max-height: 25rem;
}

.iterpicooimg {
    max-width: 40rem;
    max-height: 20rem;
}

.initdebr {
    max-width: 24rem;
    max-height: 24rem;
}

.feeddebr {
    max-width: 24rem;
    max-height: 24rem;
}

.iterdebr3 {
    max-width: 25rem;
    max-height: 35rem;
}

.iterdebr4 {
    max-width: 27rem;
    max-height: 21rem;
}

.poster {
    max-width: 15rem;
    max-height: 20rem;
}

.posterfeed {
    max-width: 35rem;
    max-height: 15rem;
    margin-left: -5rem;
}

.poster3 {
    max-width: 30rem;
    max-height: 25rem;
}

.secposter {
    max-width: 20rem;
    max-height: 25rem;
}

.secposterfeed {
    max-width: 35rem;
    max-height: 15rem;
    margin-left: -10rem;
}

.pinterest {
    max-width: 35rem;
    max-height: 25rem;
}

.video {
    max-width: 40rem;
    max-height: 20rem;
    margin-top: 5rem;
} 

.projectX {
    max-width: 40rem;
    max-height: 25rem;
}

.userplanX {
    max-width: 30rem;
    max-height: 25rem;
}

.Xversion {
    max-width: 40rem;
    max-height: 25rem;
}

.Xfeed  {
    max-width: 40rem;
    max-height: 20rem;
}