@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://use.typekit.net/mfs7oog.css");
@import url("https://use.typekit.net/mfs7oog.css");
*{
    font-family: "forma-djr-micro", sans-serif;
  
    margin: 0; padding: 0;
    box-sizing: border-box;
}

/* font-weight: 700;
font-style: normal; */
:root{
    --main-color-1: #FDFDFD;
    --main-color-2: #43454D;
    --main-color-3: #8C8C8C;
    --main-color-4: #DBDBDB;

    --background-color: #BDD744;
    --background-color-2: #38739B;
    

    --main-color-3-opacity: rgba(246,248,226,.5);

    
    --black:#222;
    --white:#fff;

    --border:1px solid var(--black);
    --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
    --text-shadow:0 1.5rem 3rem rgba(0,0,0,.3);
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* For Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* For Internet Explorer */
input[type="number"]::-ms-expand {
    display: none;
}

body {
    overflow-x: hidden; 
}
main{
    min-height: 90vh;
}
.btn,#signup,.about-btn,.custom-button-delete,.cancel{
    height: 3rem;
    color: var(--main-color-1);
    background-color: var(--background-color-2);
    border: none;
    border-radius: 24px;
    cursor: pointer;
    margin: 1rem 0;
    text-align: center;
    font-size: 18px;
    padding: 0 10px;
}
#cancel{
    width: 100%;
    margin-top: 0;
    color: var(--background-color-2);
    background-color: var(--background-color);
    border: 1px solid var(--background-color-2);
}
#cancel:hover{
    color: var(--background-color-2);
    background-color: var(--main-color-1);
    border: none;
    opacity: 80%;
}

.btn:hover,.about-btn:hover,.custom-button-delete:hover{
    
    color: var(--main-color-1);
    background-color: var(--main-color-3);
    
 
}
.custom-button-delete{
    background-color: #ED4337;
}



.about-btn{
    width: 50%;
}
.about-txt{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}
.about-txt h2{
    font-size: 35px;
    color: var(--background-color-2);
}
.about-txt-p{
    color: var(--background-color);
}

#home-btn{
    height: 3rem;
    color: var(--main-color-2);
    background-color: var(--main-color-1);
    border: none;
    border-radius: 24px;
    cursor: pointer;
    margin: 1rem 0;
    text-align:center;
    font-size: 18px;
    padding: 10px 20px;

}
#home-btn:hover{
    background-color: var(--main-color-3);
    color: var(--main-color-1);
 
}
.signin-form-main{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.signin-form{
    display: flex;
    background-color: var(--background-color);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px;
    gap: 10px;
    width: 100%;
    min-height: 100vh;
}
.signin-form h2,.signup-main h2,.contact-container h2{
    font-family: "gravesend-sans", sans-serif;
    font-size: 40px;
    font-weight: 500;
}


.signin-form form{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 75%;
   
}
.signin-container{
    display: flex;
    width: 100%;
}
.signin-img-container{
    background: url(../assets/images/signin-1.png);
    background-size:cover;
    background-repeat: no-repeat;
    width: 100%;
    background-color: var(--background-color-2);
    min-height: 100vh;
}

/* =================== */
.email-input,.password-input,.signup-form input,.bio,.signupbio,.comment{
    border: none;
    border-radius: 24px;
    background-color:none;
    color: var(--main-color-2);
    padding: 15px 20px;
  
}

/* ===========signup=========== */
.signup-main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 100px 100px 100px;
    border: var(--border);
}
.signup-form{
    width: 50%;
    background-color: var(--background-color);
    padding: 24px 45px ;
    border-radius: 24px;
    margin-top: 10px;
}

.signup-form div{
    display: flex;
    width: 100%;
    margin: 20px 0;
}

#position,#strength,#sortOptions,.signup-img,.profileTxt,#skill,.booking,.chat{
    border: none;
    background-color:var(--white);
    color: var(--main-color-2);
    border-radius: 24px;
    padding: 10px;
    padding: 15px 20px;
}
.booking,.chat{
    border: var(--border);
}
.profile-position{
    border: none;
    border: var(--border);
    background-color:var(--white);
    color: var(--main-color-2);
    border-radius: 24px;
    padding: 10px;
    padding: 15px 20px;
    width: 100%;
}
.profileTxt{
    border: var(--border);
    width: 100%;
}
.profileDetails #submit{
    width: 50%;
    background-color: var(--main-color-2);
    margin-bottom: 0;
}
.profileDetails #submit:hover{
    background-color: var(--main-color-3);
    color: var(--main-color-1);
    border: none;
}
.profileDetails div{
    width: 100%;
}
/* #skill-1,#skill-1-level,#skill-2,#skill-2-level,#skill-3,#skill-3-level{
    width: 50%;
} */
#sortOptions{
    border: var(--border);
 
}

.signup-form input{
    width: 100%;
}
#position,#skill{
    width: 100%;
}
.profileDetails #skill{
    border: var(--border);
}

/* ========header======= */
.header-cart{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 42px;
    min-height: 100px;
  
}
.header-nav-main{
    display: flex;
    justify-content: space-between;
    background-color: var(--main-color-1);
}
.header-nav-2{
    display: none;
}
.header-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left:  50px;
}
.header-nav a{
    margin-right:  24px;
    font-size: 18px;
    text-decoration: none;
    color: var(--main-color-2);
    font-family: "gravesend-sans", sans-serif;
    font-weight: 700;
}
.logout a{
    margin-right:  24px;
    font-size: 18px;
    text-decoration: none;
    color: var(--main-color-1);
    font-family: "gravesend-sans", sans-serif;
    background-color: var(--background-color);
    border-radius: 24px;
    padding: 5px 15px;
    font-weight: 700;
}
.logout a:hover{
    background-color: var(--main-color-3);
}
.header-nav a:hover{
    color: var(--background-color);
}
.header-cart-section{
    display: flex;
}
/* ==========signup-success========= */
.signup-sucess{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--background-color-2);
    gap: 10px;
}
/* =======hero======== */
.hero-background{
    min-height: 70vh;
    background: url(../assets/images/hero-image.png);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
}
.hero-txt{
    margin: 10px 50px;
}
.hero-txt h2{
    font-family: "Bungee", sans-serif;
    font-weight: 700;
    color: var(--main-color-2);
    text-align: center;
    margin: 18px 0 5px 0;
}
.hero-txt p{
    margin-bottom: 18px;
    text-align: center;
}
.home-free-account{
    min-height: 30vh;
    background-color: var(--background-color-2);
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-free-account-container{
    width: 75%;
    display: flex;
    justify-content: space-between;
}
.home-free-account h2{
    color: var(--main-color-1);
    font-size: 40px;
 
    display: flex;
    align-items: center;
}

.home-users,.skillmate-users{
    
    text-align: center;
    color: var(--main-color-2);
    padding-bottom: 24px;
}
.home-mentors{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.home-mentors h2{
    font-family: "gravesend-sans", sans-serif;
    font-size: 28px;
    font-weight: 700;
    padding: 24px 50px 0 50px;

}
.home-features,.skillmates{
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    gap: 24px;
   
}
/* ======skillmates======= */

.skillmate-users{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    gap: 10px;
    background-color: var(--background-color-2);
    color: var(--main-color-1);
    border-radius: 15px;
    min-height: 600px;
}
.skillmate-users img,.home-users img,.main-user-container img{
    height: 300px; /* Fixed height for the image */
    width: 100%;
    object-fit: cover; /* Ensures the image covers the area without stretching */
    border-radius: 15px 15px 0 0; /* Optional: rounded top corners */
}

.skillmates-main{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.skillmates,.home-features{
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 75%;
    margin: 24px 0;
}
.skillmate-no-result {
    grid-column: 1 / -1;  
    text-align: center;    
    padding: 20px;         
    color: var(--main-color-2);           
}
.viewbtn{
    padding: 5px 10px;
    background-color: var(--background-color);
    color: var(--main-color-2);
    width: 50%;
    border-radius: 24px;
    font-family: "gravesend-sans", sans-serif;
    font-weight: 700;
}
.viewbtn:hover{
    background-color: var(--main-color-3);
    color: var(--main-color-1);
}
/* ========user-details======== */
.main-user-section{
    padding: 60px 0;
   
}
.user-details-bio{
    text-align: center;
    color: var(--main-color-2);
}
.user-details-bio-main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
    min-height: 200px;
    width: 50%;
    padding: 24px;
    border-radius: 24px;
    margin: 24px 0;
}
.skill-set{
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content:space-between;
    margin-top: 24px;
    gap: 24px;
   
}
.skill-set p,.user-book p,.user-chat p{
    color: var(--main-color-2);
    padding: 10px;
    background-color: #dbdbdb;
    border-radius: 24px;
    text-align: center;
    min-width: 200px;
}

.user-book p,.user-chat p{
    min-width: 150px;
    background-color: var(--background-color-2);
    color: var(--main-color-1);
}
.user-book p:hover,.user-chat p:hover{
    background-color: var(--main-color-3);
    

}
.user-details-btn{
    display: flex;
    gap: 30px;
}
.skillmate-users{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.main-user-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--background-color-2);
}
/* ======profile======= */
.profile-users{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.profile-users form{
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    display: flex;
    justify-content: space-evenly;
    min-height: 550px;
    width: 100%;
    padding: 60px;
    padding-bottom: 0;
 
}
#delete-account-form {
    display: grid;  
    grid-template-columns: 1fr 1fr auto;  
    width: 100%;
    min-height: 0;
    padding: 0;
    padding: 24px 60px 60px 60px;
    margin: 0;
 
}
.delete-section-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    width: 100%;
  
}
.custom-button-delete{
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 50%;
}

.profileImg,.profileDetails{
    width: 50%;
  
}
.profileImg{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.bio,.signupbio,.comment{
    resize: none;
    border: var(--border);
    width: 100%;
    
}
.bio{
    min-height: 200px;
}
.signupbio{
    border: none;
}
.profileDetails{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
   
}
.profileDetails div input{
    width: 100%;
}
.profileDetails .btn:hover{
    border: var(--border);
    color: var(--main-color-2);
}
.skills-section{
    width: 100%;
    gap: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
}

input[type="checkbox"] {
    display: none;  /* Hide the checkbox itself */
}

.signup-img {
    display: none;
  }

  

  .custom-button {
    background-color: var(--main-color-2); 
    color: var(--main-color-1);
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 24px;
    text-align: center;
    margin: 0;
  }

  .custom-button:hover {
    background-color: var(--main-color-3); 
  }



/* Style the label to look like a button */
.checkbox-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--background-color-2);
    color: var(--main-color-1);
    border-radius: 24px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s, transform 0.3s;
    width: 100%;
}

/* Hover effect */
.checkbox-btn:hover {
    background-color: var(--main-color-3);
    transform: translateY(-2px);
}

/* Change the background when the checkbox is checked */
input[type="checkbox"]:checked + .checkbox-btn {
    background-color: var(--background-color);
}

/* Change the background on hover when the checkbox is checked */
input[type="checkbox"]:checked + .checkbox-btn:hover {
    transform: translateY(-2px);
}

/* Optional: Focus effect for accessibility */
input[type="checkbox"]:focus + .checkbox-btn {
    outline: 2px solid var(--background-color-2);
    outline-offset: 2px;
}

/* Optional: Style for the wrapper */
.checkbox-wrapper {
    display: inline-block;
}
/* ======about======= */
.contact-txt-main{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.contact-txt{
    width: 50%;
}
.about-container-main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 60px 0;
 
}
.about-container-1{
    width: 75%;
    display: flex;
    padding: 60px 0;
    justify-content: space-between;
    /* align-items: center; */
}
.about-container-1 p{
    width: 80%;
}
.contact-container{
    width: 75%;
    background-color: var(--background-color);
    border-radius: 24px;
    text-align: center;
    padding: 24px;
  
 
}
.contact-confirmation-message{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.contact-confirmation-message h3{
    font-size: 40px;
}
.about-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
}
.about-form input,.about-form textarea{
    border: none;
}
.about-form div{
    width: 100%;
}
.about-name{
    display: flex;
    gap: 10px;
}
/* ======footer======= */
.footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:end;
    min-height: 15vh;
    padding: 24px 50px;
    background-color: var(--main-color-3);
 
}
.footer p{
    color: var(--main-color-1);
    margin-top: 10px;
}

/* ==========media========== */
@media (max-width: 768px) {
    .profileDetails,.profileImg,.delete-section-btn,.delete-account-form{
        padding:0;
    }
    
    .custom-button-delete{
        width: 100%;
    
    }

    .signin-form-main{
        flex-direction: column;
    }
    .signup-form{
        width: 100%;
    }
    .signup-main{
        padding: 25px;
    }
    .home-features{
        display: flex;
        flex-direction: column;
    }
    .header-nav-main{
        flex-direction: column;
        padding: 10px;
    }
    .header-cart{
        flex-direction: column;
    
    }
    .header-nav a{
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 0;
        margin: 0;
        padding-top: 10px;
    }
    .logout{
        margin-top: 10px;
    }
    .logout a{
        padding: 5px 10px;
        margin: 0;
    }
    .home-free-account-container{
        padding: 24px;
    }
    .user-details-bio-main{
        width: 100%;
        padding: 24px;
    }
    .skill-set{
        display: flex;
        flex-direction: column;
    }

    .profile-users form{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin-top: 24px;
        gap: 24px;
    }
    .profileImg,.profileDetails{
        width: 100%;

    }
    .skillmates{
        display: flex;
        flex-direction: column;
    }
    .about-container-1{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 24px;
        gap: 10px;
    
    }
    .about-container-1 p{
        width: 100%;
    }
    .about-container-main{
        padding: 0;
    }
    .about-container-1 img{
        max-width: auto;
        max-height: auto;
    }
    .contact-container{
        width: 100%;
        padding: 24px;
        margin-bottom: 24px;
    }
    .about-container-main{
        gap: 24px;
    }
}