@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?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&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto";
}
/* body{
    background-color: #F2F6FC;
    background-color: white;
} */
.profile-part, .security-part{
    margin: 10px auto;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 20px;
    max-width: 1400px;
    width: 100%;
}
.profile-photo-part, .delete-account-part, .organisation-logo-part{
    max-width: 340px;
    width: 100%;
}
.profile-details-part, .change-password-part, .organisation-details-part{
    width: 100%;
}
.profile-details-box, .change-password-box, .delete-account-box{
    box-shadow: 0 0.15rem 1.75rem 0 rgb(33 40 50 / 15%);
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 4px;
}
.service-details-box{
    box-shadow: 0 0.15rem 1.75rem 0 rgb(33 40 50 / 15%);
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 4px;
}
.profile-photo-head, .profile-details-head, .password-head, .delete-head{
    padding: 1rem 1.35rem;
    margin-bottom: 0;
    background-color: rgba(33, 40, 50, 0.03);
    border-bottom: 1px solid rgba(33, 40, 50, 0.125);
    font-size: 16px;
    font-weight: 500;
    color: #515356;
}
.profile-details-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.profile-details-head .edit-btn-container{
    background-color: #285f88;
    color: white;
    font-size: 13px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}
.profile-photo-body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.profile-photo-img{
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 1px solid rgb(195, 195, 195);
}
.profile-photo-img>img{
    max-height: 100% !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.main-profile-image-outside{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 350px;
    width: 100%;
    margin-top: 20px;
    gap: 20px;
}
.main-profile-usertype{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:5px;
}
.main-profile-usertype>input{
    background-color: transparent;
    border: none;
    outline: none;
    font-family: Poppins;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}
.main-profile-usertype>span{
    font-size: 14px;
    font-family: Poppins;
    font-weight: 500;
    

}
#address{
    width: 70%;
}
.profile-photo-img-outside{
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 1px solid rgb(195, 195, 195);
}
.profile-photo-img-outside>img{
    max-height: 100% !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.profile-photo-text{
    font-size: 14px;
    font-weight: 400;
}
.profile-photo-btn{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.upload-image, .delete-img, .del-acc-btn{
    width: 140px;
    padding: 10px 15px;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.upload-image{
    background-color: #285f88;
}
.upload-image:hover{
    background-color: #1e4766;
}
.profile-photo-btn{
    display: flex;
    justify-content: center;
}
.delete-img{
    background-color: rgba(244, 22, 22, 0.944);
}
.delete-img:hover{
    background-color:  rgb(235, 2, 2);
}

.profile-details-body, .password-body{
    display: flex;
    padding: 15px;
    color: #515558;
    background-color: white;
    border-radius: 0 0 4px 4px;
    width: 100%;
    align-items: center;
}
.profile-update, .pass-update{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px;
    width: 100%;
}
.profile-update .form-group{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
}
.profile-update .form-input, .pass-update .form-input{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: #f8f8f8;
    border-radius: 10px;
}
.profile-update label, .pass-update label{
    font-size: 14px;
    font-weight: 500;
    text-wrap: nowrap;
    font-family: Poppins;
}
.profile-update input, .pass-update input , .profile-update #usertype{
    background-color: transparent;
    padding: 5px 0px;
    border: none;
    font-size: 14px;
    outline: none;
    transition: border 0.3s ease;
    color: rgb(92, 92, 92);
    font-family: Poppins;
    width: 220px;
}
@media (max-width:1299px) {
    .profile-update input, .pass-update input , .profile-update #usertype{
    
    width: max-content;
}
}
@media (max-width:1023px) {
    .profile-details-body, .password-body{
        flex-wrap: wrap;
        justify-content: center;
    }
}
 .email-icon, .org-name { color: #ff6f61; }
    .phone-icon, .gst-number { color: #26a69a; }
    .experience-icon, .from-time { color: #42a5f5; }
    .aadhaar-icon, .to-time { color: #ab47bc; }
    .country-icon, .org-desc { color: #8bc34a; }
    .state-icon { color: #ffa726; }
    .city-icon { color: #ec407a; }
    .pincode-icon { color: #5c6bc0; }
    .address-icon { color: #ef5350; }
.response-time-icon{ color: #e4143a}
.name-icon{ color: grey; }


.profile-update input:focus, .pass-update input:focus, .profile-update #usertype:focus{
    outline: none;
    border: 1px solid rgba(62, 171, 186, 0.84);
    box-shadow: rgba(37, 161, 167, 0.748) 1px 1px 1px, rgba(45, 225, 216, 0.696) 1px 1px 1px;
}
.label-edit{
    display: flex;
    justify-content: space-between;
}
.label-edit .edit{
    cursor: pointer;
}
.label-edit .edit:hover{
    color: #262626;
}
.save-button .save-btn{
    background-color: #0d6efd;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    font-size: 14px;
    width: 120px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.save-button .save-btn:hover{
    background-color: #055de1;
}
.delete-body{
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.delete-para{
    font-size: 14px;
    color: #515558;
}
.del-acc-btn{
    background-color: #F1E0E3;
    color: #DC357D;
    width: 250px;
    border: 1px solid #DC357D;
}
.del-acc-btn:hover{
    background-color:  #f2c7cfeb;

}
.otp-group {
    margin-top: 20px;
}

.smallpara{
    font-size: 12px;
    margin: 10px 0px;
}
.password-wrapper {
    position: relative;
}

#send-email-otp,#send-mob-otp{
    background-color: #055de1;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 5px;
}
#verify-mob-otp,#verify-email-otp{
    background-color: #0b621c;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 5px;
}
#resend-email-otp,#resend-mob-otp{
    background-color: #055de1;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 5px;
}
.eye-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
@media (max-width:768px) {
    .profile-update .form-group{
        flex-wrap: wrap;
    }
}





.main-profile{
    padding: 20px;
}
.main-profile .tabbed-headings{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 30px;
    border-bottom: 2px solid rgb(209, 209, 209);
    padding: 1px;
    overflow-x: auto;
}
.tabbed-headings .tab-head{
    padding: 10px;
    border-bottom: 3px solid white;
    cursor: pointer;
    font-weight: 500;
    color: #69707A;
}
.tabbed-headings .tab-active{
    color: #285f88;
    border-bottom: 3px solid #285f88;
}

/* Billing */
.main-billingdetails{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.main-billingdetails .current-plan{
    margin: 20px 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-evenly;
}
.current-plan .plan-cards{
    box-shadow: 0 0.15rem 1.75rem 0 rgb(33 40 50 / 15%);
    border: 1px solid rgba(33, 40, 50, 0.125);
    border-radius: 4px;
    color: #69707A;
    width: 200px;
    height: 80px;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.current-plan .current{
    border-left: 4px solid #009846;
}
.current-plan .from{
    border-left: 4px solid #7A2350;

}
.current-plan .to{
    border-left: 4px solid #105589;
}
.current-plan .plan-cards .plan-text-small{
    font-size: 12px;
}
.current-plan .plan-cards .plan-text-big{
    font-size: 20px;
    font-weight: 500;
}
.main-billingdetails .billingdetails{
    box-shadow: 0 0.15rem 1.75rem 0 rgb(33 40 50 / 15%);
    border: 1px solid rgba(33, 40, 50, 0.125);
    margin: 0px 60px;
    margin-top: 20px;
}
.billing-head{
    padding: 15px 10px;
    color: #69707A;
    background-color: #F8F8F8;
    border-bottom: 1px solid rgba(33, 40, 50, 0.125);
    font-weight: 500;
}
.billingdetails table{
    width: 100%;
    border-collapse: collapse;
}
.billingdetails table tbody tr, .billingdetails table td{
    border-bottom: 1px solid rgba(33, 40, 50, 0.125);
    padding: 15px 10px;
    text-align: start;
    font-size: 14px;
}
.billingdetails table th{
    border-bottom: 1px solid rgba(33, 40, 50, 0.678);
    padding: 15px 10px;
    text-align: start;
}
@media (max-width:768px) {
    .main-profile .tabbed-headings{
        gap: 10px;
    }
    .main-billingdetails .billingdetails{
        margin: 0px;
    }
}

/* Notification */

.main-notificationdetails{
    margin-top: 30px;
    display: flex;
}
.main-notificationdetails>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
.main-notificationdetails .notificationdetails{
    max-width: 800px;
    width: 100%;
}
.notificationdetails .email-notification{
    box-shadow: 0 0.15rem 1.75rem 0 rgb(33 40 50 / 15%);
    border: 1px solid rgba(33, 40, 50, 0.125);
}
.email-notification .email-notify-head{
    background-color: #F8F8F8;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(33, 40, 50, 0.125);
    color: #69707A;
    font-size: 16px;
    font-weight: 500;
    padding: 15px 10px;
}
.toggle-container {
    display: flex;
    align-items: center;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 22px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    border-radius: 50%;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: blue;
}

input:checked + .slider:before {
    transform: translateX(22px);
}
.email-notification .email-notify-body{
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.email-notify-body .email-detail{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.email-notify-body .email-detail>span{
    font-size: 14px;
    color: #69707A;
}
.email-notify-body .email-detail>input{
    background-color: #E9ECEF;
    padding: 14px 8px;
    border-radius: 5px;
    border: 1px solid rgba(33, 40, 50, 0.125);
    font-size: 14px;
    outline: none;
    color: #69707A;
}
.email-notify-body .email-checkboxes{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.email-checkboxes .checkbox-head{
    font-size: 14px;
    color: #69707A;
}
.email-checkboxes .single-checkbox{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}
.contractor-profile-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.contractor-profile-modal-content {
    background-color: #fff;
    margin: auto;
    padding: 20px;
    border-radius: 8px;
    max-width: 600px;
    width: 95%;
    position: relative;
}
.contractor-profile-modal-content>form{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.contractor-profile-close {
    color: #aaa;
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 28px;
    cursor: pointer;
}

.contractor-profile-form-group,
.contractor-profile-form-group-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;

}
.contractor-profile-form-group-1{
  width: 100%;
}
.contractor-profile-button-group{
  width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}
.contractor-profile-button-group>button{
    background-color: #285f88;
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}
.contractor-profile-form-group label,
.contractor-profile-form-group-1 label {
    margin-top: 10px;
    font-size: 14px;
    font-family: Poppins;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.contractor-profile-form-group>input,
.contractor-profile-form-group>select,
.contractor-profile-form-group>textarea{
    width: 260px;
    background-color: #f8f8f8;
    border: none;
    outline: none;
    padding: 15px 10px;
    border-radius: 5px;
    resize: none;
}
@media (max-width:610px) {
  .contractor-profile-form-group{
    width: 100%;
  }
  .contractor-profile-form-group>input,
.contractor-profile-form-group>select,
.contractor-profile-form-group>textarea{
    width: 100%;
}
}

.contractor-profile-form-group-1>input,
.contractor-profile-form-group-1>textarea{
        width: 100%;
    background-color: #f8f8f8;
    border: none;
    outline: none;
    padding: 15px 10px;
    border-radius: 5px;
    resize: none;
}


.contractor-profile-timer {
    margin-left: 10px;
    font-weight: bold;
    color: red;
}
.contractor-profile-otp-section{
    display: flex;
    flex-direction: column;
    gap: 5PX;
}

/* Srvics */
 .main-construction-services .services-heading,
.main-other-services .services-heading{
    font-size: 16px;
    font-weight: 500;
    color: rgb(54, 54, 54);
    padding: 10px 0px;
}
.Services-form{
    padding: 20px;
}
.main-other-services{
  margin-top: 20px;
}
.main-construction-services .construction-related-services-list,
.main-other-services .other-related-services-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}
.main-construction-services .construction-related-services-list .single-service,
.main-other-services .other-related-services-list .single-service{
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 5px;
    background-color: #f8f8f8;;
    font-size: 14px;
    color: #525252;
}
.main-construction-services .construction-related-services-list .single-service:nth-child(odd),
.main-other-services .other-related-services-list .single-service:nth-child(odd){
  background-color: #ebeaea;
}
.construction-related-services-list .single-service>span:first-child,
.other-related-services-list .single-service>span:first-child{
    font-size: 14px;
    font-weight: 400;
}
.construction-related-services-list .single-service .remove-service,
.other-related-services-list .single-service .remove-service{
    color: red;
    font-weight: bold;
    cursor: pointer;
    font-size: 20px;
}
.main-construction-services #add-construction-service,
.main-other-services  #add-other-service{
    background-color: #D96F2C;
    color: white;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 100px;
    margin: 10px;
    text-align: center;
}

.main-construction-services .input-container,
.main-other-services .input-container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 10px;
}
.main-construction-services .input-container>input,
.main-other-services .input-container>input{
    padding: 5px;
    font-size: 14px;
    border: 1px solid grey;
    border-radius: 5px;
}
.main-construction-services .input-container>span,
.main-other-services .input-container>span{
    background-color: #285f88;
    color: white;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}
.update-buttons>button{
  background-color: #285f88;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  text-align: center;
}
/* Modal container */
.modal-edit-services {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

/* Modal content */
.modal-edit-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 10px;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
}
.modal-edit-content>h2{
  padding: 10px;
  padding-bottom: 0px;
}
/* Close button */
.close-modal-edit {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
}
/* Projcts */
.projects-info-container{
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
  padding: 20px;
}
.project-container-heading>span{
  font-size: 20px;
  font-weight: 500;
  color: rgb(66, 66, 66);
}
.project-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}
.left, .mid, .right{
  margin-top: 20px;
  padding: 5px;
  display: flex;
  gap: 30px;
  flex-direction: column;
  flex-wrap: wrap;
}
.left, .right{
  flex-wrap: wrap;
}
.right{
  display: flex;
  flex-wrap: wrap;
}
@media(max-width:1200px){
  .project-container{
    margin-top: 20px;
  }
  .left ,.right,.mid{
    margin-top: 0px;
    flex-wrap: wrap;
  }
  .project-container{
    display: flex;
    flex-direction: none;
  }
  .right{
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 100%;
  }
}

.project-box{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-radius: 8px;
  padding-bottom: 10px;
  border: 1px solid ghostwhite;
  max-width: 350px;
  width: 100%;
  background-color: white;
  transition: all 0.2s ease-in-out;
  flex-wrap: wrap;
}
.project-box:hover{
  transform: scale(1.02);
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
/* slider for image and video */


.slider-container {
  width: 100%;
  max-width: 350px;
  margin: 0px 0;
  position: relative;
  overflow: hidden;
  /* border: 2px solid #ccc; */
  border-radius: 10px 10px 0px 0px;
}

.content-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  height: 100%;
  max-width: 350px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.slide img, .slide video {
  width: 100%;
  max-width: 350px;
  height: 200px;
  object-fit: cover;
  display: block;
}

button.prev, button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
}

button.prev {
  left: 10px;
}

button.next {
  right: 10px;
}

button.prev:hover, button.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.like-button {
  /* position: absolute; */
  /* bottom: 10px; */
  right: 10px;
  /* background-color: rgba(0, 0, 0, 0.5); */
  /* color: white; */
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  /* z-index: 2; */
  border-radius: 5px;
  font-size: 12px;
}

.like-button:hover {
  background-color: rgba(224, 224, 224, 0.8);
}
.like-button .fa-heart {
color: gray;
transition: color 0.3s ease;
}

.like-button.liked .fa-heart {
color: red;
}
.like-button {
background: none;
border: none;
cursor: pointer;
color: #333;
display: flex;
align-items: center;
}
.like-button i{
font-size: 16px;
margin-right: 4px;
}
.like-button.liked i {
color: red; /* Red color for liked state */
transition: color 0.3s;
}

.pro-box-descrp{
  margin-top: 6px;
  margin-left: 10px;
  margin-right: 10px;
  /* padding-left: 5px;
  padding-right: 5px; */
}
.project-name{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pro-name{
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 0px;
}
.contractor-name{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  margin-bottom: 4px;
}
.con-name{
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.con-name:hover{
  transform: scale(1.02);

}
.contractor-name .quote{
  width: 80px;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 0px;
  border-radius: 12px;
  color: #008994;
  border: 1px solid #008994;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}
.contractor-name .quote:hover{
  background-color: #008994;
  color: white;
}
.project-price .price{
  font-size: 14px;
  font-weight: 500;
}
.project-address .pro-address{
  font-size: 14px;
  font-weight: 500;
}
.desp{
  display: flex;
  justify-content: space-evenly;
  gap: 5px;
  margin-top: 5px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.desp .feature{
  width: max-content;
  font-size: clamp(10px,3vw,8px);
  font-weight: 400;
  padding: 2px 6px;
  border: 1px solid rgb(181, 181, 181);
  border-radius: 12px;
  transition: all 0.19s ease-in-out;
  cursor: pointer;
}
.desp .feature:hover{
  transform: scale(1.06);
}
.delete-btn{
  border: none;
  color: red;
  cursor: pointer;
}
.main-add-projct{
  width: 100%;
  margin-top: 10px;
}
#addProjectBtn{
  margin-left: 20px;
  font-size: 14px;
  background-color: #0B3A62;
  width: max-content;
  color: white;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}
/* Modal Styles */
.projects1Modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  padding-top: 60px;
}

.projects1Modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  max-width: 600px;
  width: 95%;
  border-radius: 10px;
  overflow-y: auto;
}

.projects1Close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.projects1Close:hover,
.projects1Close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Button Styles */

.projects1Modal button:hover {
  background-color: #17364e;
}

.projects1Modal form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

.projects1Modal form>div{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  gap: 5px;
}

.projects1Modal form input {
  background-color: #f8f8f8;
    border: none;
    outline: none;
    padding: 15px 10px;
    border-radius: 5px;
    resize: none;
  width: 260px;
}

.projects1Modal form label {
  margin-top: 10px;
  font-size: 14px;
  font-family: Poppins;
}
.project-update-button{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-update-button>button{
  padding: 10px 20px;
  background-color: #285f88;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

/* Project Box Styles */
.projects-info-container {
  padding: 20px;
}

.project-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.project-box {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
}

.project-name h4,
.project-price .price,
.project-address .pro-address,
.contractor-name .con-name {
  margin: 5px 0;
}

.project-box .edit-btn{
  margin-top: 10px;
  background-color: #008992;
  color: white;
  border: none;
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
#update-pic-btn,#update-btn-container-logo {
  background-color: #008992;
  color: white;
  border: none;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 5px;
}
.project-box .edit-btn:hover, #update-pic-btn:hover,#update-btn-container-logo:hover {
  background-color: #056e75;
}
.add-project {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    justify-content: space-evenly;
    cursor: pointer;
}
.add-project .openModalBtn{
    font-size: 14px;
    font-weight: 500;
    background-color: #285f88;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    color: white;
    border: none;
}

.add-project > span {
    font-size: 18px;
    font-weight: 600;
}
.submit {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
.submit > button {
    padding: 10px 20px;
    background-color: #91add8;
    border-radius: 5px;
    border: 1px solid black;
    font-weight: bold;
    cursor: pointer;
}
#main-upload {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
}
.project-card {
    width: 300px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 10px;
}
.project-card p {
    font-size: 14px;
    padding: 5px;
    font-weight: 600;
}
.next-block{
    display: flex;
    align-items: center;
    justify-content: center;
}
.next-block #conpro-form-submit{
    background-color: green;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}
/* Modal Styling */
.modal-forproject {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    
    /* Center the modal using flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-forproject .modal-content {
    margin-top: 20px;
    background-color: #fefefe;
    padding: 20px 25px;
    border-radius: 10px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;  /* Limit max height to 90% of the viewport height */
    overflow-y: auto;  /* Enable vertical scrolling if content overflows */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}


@media (max-width:790px){
    /* .modal-forproject .modal-content{
        margin: 20% auto;
    } */
}
.modal-forproject .modal-content h3{
    font-weight: 500;
    margin-bottom: 15px;
    padding-bottom: 2px;
    border-bottom: 2px solid rgb(105, 105, 105);
}
.close-modal-btn{
    display: flex;
    justify-content: flex-end;
}
.close{
    cursor: pointer;
    font-size: 26px;
    font-weight: bolder;
    right: 0px;
    text-align: right;
    width: 100%;
}
.modal-forproject .modal-content fieldset {
    margin-bottom: 10px;
    border-radius: 6px;
}
.modal-forproject fieldset legend{
    font-size: 14px;
    margin-left: 10px;
    padding: 2px;
}
.modal-forproject fieldset input{
    font-size: 14px;
}
.modal-forproject .modal-content input[type="text"],
.modal-forproject .modal-content input[type="file"] {
    width: 100%;
    padding: 8px 10px;
    margin-top: 0px;
    border-radius: 5px;
    border: none;
    outline: none;
}

.modal-forproject .modal-content button {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.image-preview,
.video-preview {
    position: relative;
    margin-top: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-preview img{
    max-width: 400px;
    width: 100%;
    max-height: 400px;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    padding-bottom: 20px;
    border-radius: 4px;

}
.video-preview video{
    max-width: 400px;
    width: 100%;
    padding: 10px;
    padding-bottom: 20px;
    max-height: 400px;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;

}
.remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: red;
    color: white;
    padding: 2px 7px;
    border-radius: 50%;
    cursor: pointer;
}


