* {
    margin: 0;
    font-family:'Lato';
    letter-spacing: 0.5px;
    padding: 0;
    box-sizing: border-box; 
    scroll-behavior: smooth;
}

html{
    overflow-x: hidden!important;
}
        
::-webkit-scrollbar {
    width: 14px;
}

::-webkit-scrollbar-track {
    background: rgba(233, 227, 227);

}

::-webkit-scrollbar-thumb {
    background: rgb(60, 47, 174) 2px;;
    border-radius: 50px;
    border: solid 2px #e9e3e3
}

h1 {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 48px;
}

h2 {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 40px;
}

h3 {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 30px!important;
}

p {
    line-height: 1.5rem!important;
}

.menu {
    grid-template-columns: 3fr 2fr 7fr 3fr;
    height: 80px;
    text-align: center;
    display: grid;
    position: fixed;
    width: 100%;
    color:#1e1d23;
    background-color:#e9e3e3;
    z-index: 99;
    justify-content: center;
    align-items: center;
}

.mailNumber {
    text-align: start;
    padding: 10px 30px;
    font-family: 'Montserrat';
}

.fa-solid.fa-envelope,
.fa-solid.fa-phone {
  margin-right: 5px;
  margin-top: 3px;
  color: rgb(60, 47, 174);
}

.darkMode {
    background: none; 
    border: none;
    padding: 0;
    cursor: pointer;
}
  
.darkMode i.fas.fa-circle-half-stroke {
    background: none; 
    display: inline-block;
    font-size: 20px;
}

.menuSection {
    font-size: 18px;
    text-decoration: none;
    color: #1e1d23;
    display: inline-flex;
    font-family: 'Montserrat';
}

.menuSectionName {
    font-size: 25px;
}

.menuBtns {
    text-align: center;
}

.fullNameJs {
    font-family: 'Montserrat';
}

.scrollBtn {
    border: solid 0px black;
    background-color: #e9e3e3;
    border-radius: 10px;
    color: black;
    font-size: 18px;
    padding: 5px 15px;
    box-shadow: blanchedalmond;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transition: all 0.5s ease;
    font-family: 'Montserrat';
}

.scrollBtn:hover {
    cursor: pointer;
    background-color: #d0cccc;
}

.hr {
    font-weight: 800;
}

.aboutMe {
    padding: 200px 100px;
    grid-template-columns: 1fr 1fr;
    display: grid;
}

.aboutMeTitle {
    margin-bottom: 12px;
}

.aboutMeText {
    font-size: 16px;
}

.aboutMeSection {
    margin-top: 100px;
}

.photoMe {
    width: 400px;
    height: 400px;
    height: auto;
    object-fit: cover;
    display: block;
    margin: 0 auto; 
}

.projects {
    padding: 100px 100px;
    background-color: #f2efef;
}


.projectContainer {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    margin-top: 100px; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
}

.projectContainer1 {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    margin-top: 50px; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    padding-left: 150px;
    padding-right: 150px;
}

.programUsedContainer {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
}

.programUsed {
    border: solid rgb(60, 47, 174) 2px;
    color: rgb(60, 47, 174);
    border-radius: 10px;
    padding: 5px;
    margin: 2px;
    font-weight: 700;
}

.fa-solid.fa-right-to-bracket {
    color:#1e1d23;
    margin-left: 5px;
}

.projectTitleContainer {
    font-size: 40px;
    text-align: center;
    margin-bottom: 15px;
    margin-top: -10px;
}

.projectTitleContainer1 {
    font-size: 40px;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 150px;

}

.projectTitle {
    font-size: 24px;
    margin-bottom: 12px;
}

.projectTitle1 {
    font-size: 22px!important;
    margin-bottom: 12px;
}

.projectText {
    font-size: 16px;
}

.error {
    color: rgb(175, 26, 26);
}

.projectPhotoContainer {
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
}

.projectPhoto {
    width: 100%;
    max-width: 1200px;
    height: auto;
    object-fit: cover;
    display: block;
}

.projectBtn {
    margin-top: 16px;
    border: solid 0px black;
    border-radius: 10px;
    color: black;
    font-size: 18px;
    padding: 5px 50px;
    box-shadow: blanchedalmond;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
}

.projectBtn:hover {
    cursor: pointer;
    background-color: #d0cccc;
}

.moreSitiesContainer {
    margin-top: 100px;
    text-align: center;
    font-size: 18px;
}


.toolsContainer {
    padding: 100px;
    background-color: #1e1d23;
    color: rgb(242, 240, 240);
}

.toolsTitleUp {
    text-align: center;
    font-size: 40px;
}

.toolsTitle {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 20px;
    font-family: 'Montserrat';
}

.toolsTitle1 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 20px;
    margin-top: 80px;
    color: rgb(242, 240, 240);
}

.toolsText1 {
    font-size: 20px;
}

.toolsOther {
    text-align: center;
}

.toolsText {
    text-align: center;
    margin: 5px;
    font-size: 20px;
}

.tools {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    margin-top: 100px;
}

.dot {
    color: rgb(60, 47, 174);
    font-size: 25px;
}

.dotSecond {
    color: rgb(60, 47, 174);
    font-size: 25px;
    margin-right: 5px;
}

.skills {
    padding: 100px;
    text-align: center;
    font-size: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.skillsGrid {
    text-align: start;
    margin-left: 10%;
}

.skillsLi {
        text-indent: -25px;
        margin-left: 5%;
    }

.skills p {
    margin-bottom: 10px;
}

.skillsTitle {
    font-size: 32px;
    padding-bottom: 30px;
    font-weight: 700;
    text-align: center;
    margin-left: -15%;
}

.coursesContainer {
    background-color: white;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 30px 100px;
    
}
  
.courses {
    position: relative;
    margin: 10px;
    padding: 10px 20px;
    border-radius: 10px;
    text-align: center;
    height: auto;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
  
.course {
    margin-top: 10px;
    margin-bottom: 10px;
}
  
.courseTime {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(60, 47, 174);
    font-size: 14px;
    font-weight: 800;
}

.coursesTtile {
    text-align: center;
    font-size: 40px;
    padding: 20px;
}

.courseTitle {
    font-family: 'Montserrat';
    font-weight: 800;
}

.lastSection {
    text-align: center;

}

.cvBtn {
    padding: 20px 40px;
    font-size: 30px;
    border-radius: 20px;
    border: 0px;
    box-shadow: blanchedalmond;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    margin-top: 20%;
    margin-bottom: 20%;
    background-color: white;
    transition: all 0.5s ease;
    text-decoration: none;
    color: #1e1d23;
    justify-content: center;
    display:inline-block;
    align-items: center;
}

.cvBtn:hover {
    background-color: #d0cccc;

}

.footer {
    background-color: #e9e3e3;
    padding: 20px;
    text-align: center;
    margin-top: 150px;
}

.btn-enlarge {
    display: inline-flex; 
    white-space: nowrap;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 10px 60px;
    transition: transform 0.5s ease;
    color:#1e1d23;
    box-shadow: blanchedalmond;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    text-decoration: none;
    width: 100%;
    max-width: 280px;
}
  
.btn-enlarge:hover {
    cursor: pointer;
    background-color: #d0cccc;
    transition: all 0.5s ease;
}

@media (max-width: 400px) {
    .skillsTitle {
        margin-left: 5px;
    }

    .courses {
        margin:0;
        border-radius: 0px;
    }

    .coursesContainer {
        overflow-x: hidden!important;
        margin:0;
    }
}

@media (max-width: 800px) {

    h1 {
        font-size: 32px;
    }
    
    h2 {
        font-size: 28px!important;
    }
    
    h3 {
        font-size: 24px!important;
    }

    .menu {
        height: 110px;
        text-align: center;
        display: block;
        position: fixed;
        width: 100%;
        color:#1e1d23;
        background-color:#e9e3e3;
        z-index: 99;
        justify-content: center;
        align-items: center;
        margin-top: -5px;
    }

    .mailNumber {
        text-align: center;
        margin-top: 5px;
    }

    .menuSection {
        font-size: 16px;
    }

    .fullNameJs {
        font-size: 18px;
    }

    .menuSectionName {
        margin-top: 10px;
    }

    .skillsGrid {
        margin-left: 0;
    }

    .scrollBtn {
        display: none;
    }

    .aboutMe {
        padding: 80px 30px 0px;
        display: block
    }

    .photoMe {
        width: 300px;
        height: 300px;
        height: auto;
        object-fit: cover;
        display: block;
        margin: 0 auto;
        margin-top: 30px!important; 
    }

    .projectContainer {
        display: block;
        margin-top: 100px; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center;
    }

    .projectContainer1 {
        display: block;
        margin-top: 50px; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center;
        padding-left: 50px;
        padding-right: 50px;
    }

    .projectTitleContainer {
    margin-top: -40px;
    }

    .projectTitle {
    font-size: 26px!important;
    margin-bottom: 12px;
    }

    .projectTitle1 {
    font-size: 20px!important;
    margin-bottom: 12px;
    }

    .projects {
        padding: 100px 30px;
        background-color: #f2efef;
    }

    .programUsedContainer {
        display: block;
        text-align: center;
        margin: 30px;
    }

    .skillsTitle {
        margin-left: 5px;
    }

    .skillsLi {
        text-indent: -25px;
        margin-left: 5%;
    }

    .skills p {
        margin-bottom: 5px;
    }

    .tools {
        display: block;
        text-align: center;
        margin-top: 100px;
    }

    .toolsContainer {
        padding: 100px 30px;
        background-color: #1e1d23;
        color: rgb(242, 240, 240);
    }

    .toolsSection {
        margin-top: 60px;
    }

    .skills {
        padding: 100px 30px;
        text-align: center;
        font-size: 16px;
        display: block;
    }

    .coursesContainer {
        background-color: white;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
    }

    .lastSection {
        margin-bottom: -100px;
    }

    .footer {
        background-color: #e9e3e3;
        padding: 20px;
        text-align: center;
        margin-top: 80px;
    }
}

@media (min-width: 1271px) and (max-width: 1380px) {

    .menu {
        grid-template-columns: 4fr 5fr 18fr 6fr;
        height: 80px;
        text-align: center;
        display: grid;
        position: fixed;
        width: 100%;
        color:#1e1d23;
        background-color:#e9e3e3;
        z-index: 99;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
    }

    .fullNameJs {
        font-size: 20px;
    }

    .skillsLi {
        text-indent: -25px;
        margin-left: 5%;
    }
}


@media (min-width: 801px) and (max-width: 1270px) {

    .scrollBtn {
        display: none!important;
    }
    .menu {
        grid-template-columns: 4fr 5fr 1fr 5fr;
        height: 80px;
        text-align: center;
        display: grid;
        position: fixed;
        width: 100%;
        color:#1e1d23;
        background-color:#e9e3e3;
        z-index: 99;
        justify-content: center;
        align-items: center;
    }

    .mailNumber {
        text-align: center;
    }

    .aboutMe {
        padding: 150px 60px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .photoMe {
        width: 400px;
        height: 400px;
        height: auto;
        object-fit: cover;
        display: block;
        margin: 0 auto; 
        margin-top: 50px;
    }

    .projectContainer {
        display: block;
        margin-top: 100px; 
        flex-direction:row; 
        justify-content: center; 
        align-items: center;
    }
    .projectContainer1 {
        display: block;
        margin-top: 50px; 
        flex-direction:row; 
        justify-content: center; 
        align-items: center;
        padding-left: 50px;
        padding-right: 50px;
    }

    .projects {
        padding: 100px 60px;
        background-color: #f2efef;
    }

    .programUsedContainer {
        display: block;
        text-align: center;
        margin: 30px;
    }

    .tools {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        text-align: center;
        margin-top: 100px;
    }

    .toolsContainer {
        padding: 100px 60px;
        background-color: #1e1d23;
        color: rgb(242, 240, 240);
    }

    .toolsSection {
        margin-top: 60px;
    }

    .skills {
        padding: 100px 60px;
        text-align: center;
        font-size: 16px;
        display: grid;
        grid-template-columns: 2fr 1fr;
    }

    .skillsLi {
        text-indent: -25px;
        margin-left: 5%;
    }

    .coursesContainer {
        background-color: white;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        padding: 80px 30px 10px;
    }
}