@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=REM:ital,wght@0,100..900;1,100..900&display=swap');
@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&family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
/*Start Main Nav bar */
*{    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}
.navigation-bar{
    position: fixed;
    top: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    z-index: 50;
    position: fixed;
    width: 100%;
    transition: all 1s ease;
    /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */
    /* border: 1px solid #CFCFCF */
}
/* main logo */
.navigation-bar .main-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}
.navigation-bar .main-logo .logo-img{
    height: 35px;
    width: 35px;
}
.navigation-bar .main-logo .name-img{
  height: 20px;
  width: 150px;
}
.navigation-bar .main-logo .logo-name{
    font-size: 20px;
    font-family: "Lato", sans-serif;
    font-weight: bold;
}
@media (min-width:1024px) and (max-width:1230px){
  .navigation-bar .main-logo .logo-img{
    height: 20px;
    width: 20px;
  }
  .navigation-bar .main-logo .name-img{
    height: 15px;
    width: 120px;
  }
}
/* nav sections */
.navigation-bar .nav-sections{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.navigation-bar .nav-sections .single-section{
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.navigation-bar .single-section .nav-buyer{
    font-family: "REM", sans-serif;
    font-weight: 400;
    color: white;
    font-size: 15px;
}
.navigation-bar .single-section .nav-agent{
  font-family: "REM", sans-serif;
    font-weight: 400;
    color: white;
    font-size: 15px;

}
.navigation-bar .single-section .nav-tenants{
  font-family: "REM", sans-serif;
    font-weight: 400;
    color: white;
    font-size: 15px;

}
.navigation-bar .single-section  .nav-findcontractor{
  font-family: "REM", sans-serif;
    font-weight: 400;
    color: white;
    font-size: 15px;

}
.navigation-bar .all-hover-heading{
  display: flex;
  align-items: center;
}
.navigation-bar .nav-sections .single-section .all-hover-heading >span{
  color: white;
}

.navigation-bar .nav-contractor{
  background-color: #7A2350;
  padding: 8px 10px;
  border-radius: 5px;
  color: white;
  font-size: 14px;
}
.navigation-bar .nav-builder{
  background-color: #F7C201;
  padding: 8px 10px;
  border-radius: 5px;
  color: white;
  font-size: 14px;
}
.navigation-bar .nav-postproperty{
  background-color: #10578B;
  padding: 8px 10px;
  border-radius: 5px;
  color: white;
  font-size: 14px;
}
/* Modal for post property popup */
.post-property-modal {
  display: none;
  position: fixed;
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.post-property-modal-content {
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid #888;
  max-width: 700px;
  width: 100%;
  position: relative;
  animation: slideDown 0.5s ease;
  border-radius: 20px;
}
@keyframes slideDown {
  from {
    top: -100px;
  }
  to {
    top: 50%;
  }
}
.post-property-close {
  position: absolute;
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  right: 15px;
  top: 5px;
  z-index: 99;
}

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

.post-property-heading {
  position: absolute;
  text-align: center;
  margin: 15px 0px;
  font-weight: 600;
  font-size: 22px;
  z-index: 99;
  left: 220px;
}
.main-navigation-btns-post-property{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}
.main-navigation-btns-post-property .post-prop-modal-info{
  width: 50%;
  padding: 20px;
}
.post-prop-modal-info .sell-modal-head{
  text-align: center;
  padding: 40px 10px 10px 10px;
  font-size: 20px;
}
.post-prop-modal-info .post-porperty-modal-desc{
  font-size: 12px;
  text-align: center; 
}
.main-navigation-btns-post-property .post-prop-modal-info>img{
  width: 100%;
  height: 170px;
}
#post-prop-modal-sell{
  background-color: rgb(247, 194, 1,0.85);
  border-radius: 15px 0px 0px 15px;
}
#post-prop-modal-rent{
  background-color: #F0EEF1;
  border-radius: 0px 15px 15px 0px;
}
.continue-btn-sell{
  text-align: center;
  margin: 10px;
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  transition: transform 0.5s ease-in-out;
  font-weight: 500;
}
.continue-btn-sell:hover{
  transform: scale(1.05);
}
#continue-post-prop-modal-sell{
  background-color: white;
  color: black;
}
#continue-post-prop-modal-rent{
  background-color: rgb(247, 194, 1,0.85);
}
@media (min-width:1024px) and (max-width:1230px) {
  .navigation-bar .single-section .nav-buyer{
    font-size: 12px;
  }
  .navigation-bar .single-section .nav-agent{
    font-size: 12px;
  }
  .navigation-bar .single-section .nav-tenants{
    font-size: 12px;
  }
  .navigation-bar .single-section  .nav-findcontractor{
    font-size: 12px;
  }
  .navigation-bar .nav-contractor{
    font-size: 10px;
  }
  .navigation-bar .nav-builder{
    font-size: 10px;
  }
  .navigation-bar .nav-postproperty{
    font-size: 10px;
  }
}
@media (max-width:1020px) {
  .navigation-bar .nav-sections{
    display: none;
  }
}
/* nav- profile*/
.navigation-bar .nav-main-profile {
  display: flex;
  align-items: center;
  justify-content: center;
}
.navigation-bar .nav-main-profile #nav-profile-heading{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    color: white;
    font-size: 14px;
}
.navigation-bar .nav-main-profile .nav-profile{
  font-family: "REM", sans-serif;
  font-weight: 500;
}
@media (min-width:1024px) and (max-width:1230px){
  .navigation-bar .nav-main-profile #nav-profile-heading{
    font-size: 11px;
  }
}
/* Main menu */
.navigation-bar .main-menus #menu{
  padding: 0px 3px;
  color: white;
  cursor: pointer;
}
@media (min-width:1024px) and (max-width:1230px){
  .navigation-bar .main-menus #menu{
    font-size: 18px;
  }
}
/* Scrolled */
.navbar-scrolled{
  background-color: rgb(241, 241, 241);
}
.navbar-scrolled .nav-contractor{
  color: white;
}
.navbar-scrolled .nav-builder{
  color: white;
}
.navbar-scrolled .nav-postproperty{
  color: white;
}
.navbar-scrolled .single-section .nav-buyer{
 color: black;
}
.navbar-scrolled .single-section .nav-agent{
 color: black;
}
.navbar-scrolled .single-section .nav-tenants{
 color: black;
}
.navbar-scrolled .single-section  .nav-findcontractor{
 color: black;
}
.navbar-scrolled .nav-sections .single-section .all-hover-heading>span{
  color: black;
}
.navbar-scrolled .nav-main-profile #nav-profile-heading{
  color: black;
}
.navbar-scrolled .main-menus #menu{
  color: black;
}

/* Buyer-hover */

.all-hover {
  background-color: #f1f1f1;
  /* border: 1px solid #CFCFCF; */
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  position: fixed;
  top: 65px;
  left: 60px;
  font-size: 14px;
  align-items: flex-start;
  justify-content: center;
  padding: 25px 50px;
  border-radius: 10px;
  backdrop-filter: blur(2px);
  display: none;
}

.all-hover .hover-content-main {
  display: flex;
  gap: 50px;
}

.all-hover .hover-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.all-hover .hover-content .hover-heading {
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.all-hover .hover-content .hover-heading>span{
  padding: 3px;
  border-radius: 50%;
  align-items: center;
  color: rgb(58, 58, 58);
  border: 1px solid rgb(194, 194, 194);
}
.all-hover .hover-content .hover-heading>div{
  font-weight: 600;
  font-size: 15px;
  color: black;
}
.hover-heading #house{
  background-color: #acb6e5cb;
}
.hover-heading #apartment{
  background-color: #ffd8c0b4;
}
.hover-heading #storefront{
  background-color: #b5f1ccc5;
}
.hover-heading #houseboat{
  background-color: #9fe9f68c;
}
.hover-heading #nature-people{
  background-color: #ffc0d9b2;
}

.all-hover .hover-content .hover-tags {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hover-tags ul{
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 25px;
}
.hover-tags ul li a {
  text-decoration: none;
  color: rgb(39, 39, 39);
  position: relative;
  padding: 2px;
  font-weight: 500;
}

.hover-tags ul li a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width 0.5s ease;
}

.hover-tags ul li a:hover::before {
  width: 100%;
}

#buyer-hover-heading:hover + #buyer-hover {
  display: block;
}
.all-hover-heading {
  cursor: pointer;
}
#buyer-hover:hover {
  display: block;
}

/* customer hover */
#customer-hover{
  position: absolute;
  left: 500px;
}

/* Login Hover */
.nav-login-hover{
  display: none;
  position: absolute;
  top: 65px;
  background-color: #f1f1f1;
  /* border: 1px solid #CFCFCF; */
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  padding: 15px 20px;
  border-radius: 10px;
}
.nav-login-hover .myactivity-heading{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  cursor: pointer;

}
.nav-login-hover .myactivity-heading>span:first-child{
  color: rgb(105, 105, 105);
  font-size: 13px;
  font-weight: 500;
  text-wrap: nowrap;
  font-family: 'REM';
}
.nav-login-hover .myactivity-heading>span:last-child{
  border: 1px solid grey;
  width: 100%;
}
.nav-login-hover .myactivity-list{
  padding: 10px;
}
.nav-login-hover .myactivity-list>ul{
  font-size: 14px;
  list-style: none;
  line-height: 30px;
}
.nav-login-hover .myactivity-list>ul>li{
  color: black;
  font-size: 13px;
  font-family: 'REM';
  cursor: pointer;
  font-weight: 500;
}
.nav-login-hover .myactivity-change-user-type{
  color: black;
  font-size: 14px;
  font-weight: bold;
  text-wrap: nowrap;
  font-family: 'REM';
  cursor: pointer;

}
.nav-login-hover .myactivity-login{
  padding: 5px 10px;
  background-color: #111111;
  color: white;
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;

}

/* Logout */
.nav-logout-hover{
  display: none;
  position: absolute;
  top: 65px;
  background-color: #f1f1f1;
  padding: 15px 20px;
  
  border-radius: 10px;
}
.nav-logout-hover .myactivity-heading{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  cursor: pointer;

}
.nav-logout-hover .myactivity-heading>span:first-child{
  color: rgb(105, 105, 105);
  font-size: 13px;
  font-weight: 500;
  text-wrap: nowrap;
  font-family: 'REM';
}
.nav-logout-hover .myactivity-heading>span:last-child{
  border: 1px solid grey;
  width: 100%;
}
.nav-logout-hover .myactivity-list{
  padding: 10px;
}
.nav-logout-hover .myactivity-list>ul{
  font-size: 14px;
  list-style: none;
  line-height: 30px;
}
.nav-logout-hover .myactivity-list>ul>li{
  color: black;
  font-size: 13px;
  font-family: 'REM';
  cursor: pointer;
  font-weight: 500;
}
.nav-logout-hover .myactivity-change-user-type,
.nav-logout-hover .my-profile-link{
  color: black;
  font-size: 14px;
  font-weight: bold;
  text-wrap: nowrap;
  font-family: 'REM';
  cursor: pointer;
  padding: 5px 0px;

}
/* Modal styling */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 99; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fff;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 400px;
  border-radius: 8px;
}

.close-btn {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

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

/* Radio buttons styling */
.radio-buttons{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 1px;
}
.radio-buttons label {
  display: block;
  margin-bottom: 10px;
}

#changeUserTypeButton {
  padding: 5px 15px;
  background-color: #008994;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}

#changeUserTypeButton:hover {
  background-color: #05737a;
}

#send-otp{
  background-color: #007bff;
  width: max-content;
  padding: 5px 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: white;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
#send-otp:hover{
  background-color: #0056b3;
}
#otpSection p{
  font-size: 16px;
  font-weight: bold;
}
#editMobileBtn {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #7A2350;
  cursor: pointer;
  border-radius: 5px;
  color: white;
  font-size: 14px;
}
#otpverifiedmsg{
  margin-top: 10px;
  color: green;
  font-size: 13px;
  font-weight: 500;
  align-items: center;
  display: none;
  justify-content: center;
  align-items: center;
}
#otpInput {
  padding: 10px;
  width: 100%;
  border: 1px solid grey;
  margin-bottom: 10px;
  border-radius: 5px;
}

#verifyOtpBtn {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #029846;
  cursor: pointer;
  border-radius: 5px;
  color: white;
  font-size: 14px;
}
#verifyOtpBtn:hover{
  background-color: #03813c;
}
#resendOtpBtn{
  margin-top: 10px;
  padding: 5px 10px;
  background-color: grey;
  cursor: pointer;
  border-radius: 5px;
  color: white;
  font-size: 14px;
}
.changeotpshow {
  display: none;
}

.nav-logout-hover .myactivity-logout{
  padding: 5px 10px;
  background-color: #111111;
  color: white;
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  margin-top: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.nav-logout-hover .myactivity-logout>span{
  font-size: 16px;
}

/* Menu Options */
.main-menu-contents {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background-color: #F9F9FA;
  transition: right 0.6s ease;
  z-index: 99;
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid gray;
}
.main-menu-contents.open {
  right: 0;
}
.close-menu {
  position: absolute;
  top: 8px;
  right: 20px;
  font-size: 30px;
  cursor: pointer;
  color: #333;
}
.main-menu-contents .main-menu-login{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  padding: 20px 10px;
  border-bottom: 2px solid rgb(190, 190, 190);
}
.main-menu-contents .main-menu-login>img{
  border-radius: 50%;
  height: 20px;
  width: 25px;
}
.main-menu-contents .main-menu-login>span{
  font-weight: 500;
  cursor: pointer;
  font-size: 16px;
  color: rgb(73, 73, 73);
}
.main-menu-contents #change-user-type-side{
  display: none;
  padding: 0px 10px;
  color: black;
  font-size: 14px;
  cursor: pointer;
}
.main-menu-contents .menu-other-services{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 20px;
}
.main-menu-contents .menu-other-services>div{
  color: white;
  font-size: 15px;
  padding: 8px 10px;
  border-radius:5px;
  width: 150px;
  text-align: center;
  cursor: pointer;
}
.main-menu-contents .menu-other-services>div:first-child{
  background-color: #7A2350;
}
.main-menu-contents .menu-other-services>div:nth-child(2){
  background-color: #F7C201;
}
.main-menu-contents .menu-other-services>div:nth-child(3){
  background-color: #10578B;
}
.main-menu-contents .text-our-services{
  margin: 0px 20px;
  border-bottom: 2px solid rgb(214, 214, 214);
  font-size: 17px;
  font-weight: 500;
  padding: 10px ;
  color: rgb(97, 97, 97);
}
.main-menu-contents .menu-options>ul{
  list-style: none;
  line-height: 30px;
  padding: 10px 20px;
}
.main-menu-contents .menu-options>ul>li{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;

}
.main-menu-contents .menu-options>ul>li:hover{
  background-color: #E9EAEC;
  border-radius: 5px;
}
.main-menu-contents .menu-options>ul>li>span{
  font-size: 28px;
  color: rgb(73, 73, 73);
}
.main-menu-contents .menu-options>ul>li>div{
  color: rgb(58, 58, 58);
  font-family: "REM", sans-serif;

}
.main-menu-contents .menu-other-options>div{
  margin: 5px 20px;
  border-bottom: 2px solid rgb(214, 214, 214);
  font-size: 16px;
  font-weight: 500;
  padding: 5px 10px;
  color: rgb(71, 71, 71);
  text-align: center;
  cursor: pointer;

}
.main-menu-contents #myactivity-logout-side{
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.main-menu-contents #myactivity-logout-side .material-symbols-rounded{
  font-size: 18px;
}
/* Modal Styles */
.contactus-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  padding-top: 60px;
}

.contactus-modal-content {
  background-color: #F9F9FA;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  max-width: 600px;
  width: 100%;
  border-radius: 10px;
}

.close-contactus {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: relative;
  text-align: end;
}

.close-contactus:hover,
.close-contactus:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.contactus-modal-content h2{
  position: relative;
  bottom: 20px;
  padding: 0px 10px;
}
/* Form Styles */
#contactForm{
  display: flex;
  flex-direction: column;
  position: relative;
  bottom: 20px;
  padding: 0px 10px;
}
#contactForm label {
  margin: 10px 0 5px;
  font-weight: 500;
  color: rgb(54, 54, 54);
}

#contactForm input, #contactForm textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  outline: none;
  border-bottom: 2px solid #ccc;
  background-color: transparent;
}

#sendButton_contact {
  background-color: #D96F2C;
  color: white;
  padding: 5px 20px;
  cursor: pointer;
  width: max-content;
  border-radius: 5px;
}

#sendButton_contact:hover {
  background-color: #b35c26;
}
#errorMessages{
  color: red;
  font-size: 10px;
}

/* End main nav bar */

/* footer */
.main-footer-box{
  position: relative;
  top: 65px;
}
footer{
    padding: 20px 40px;
    background-image: linear-gradient(78deg, rgba(96, 96, 96, 0.04) 0%, rgba(96, 96, 96, 0.04) 35%,rgba(220, 220, 220, 0.04) 35%, rgba(220, 220, 220, 0.04) 100%),linear-gradient(150deg, rgba(83, 83, 83, 0.04) 0%, rgba(83, 83, 83, 0.04) 71%,rgba(6, 6, 6, 0.04) 71%, rgba(6, 6, 6, 0.04) 100%),linear-gradient(311deg, rgba(203, 203, 203, 0.04) 0%, rgba(203, 203, 203, 0.04) 58%,rgba(3, 3, 3, 0.04) 58%, rgba(3, 3, 3, 0.04) 100%),linear-gradient(137deg, rgba(110, 110, 110, 0.04) 0%, rgba(110, 110, 110, 0.04) 11%,rgba(226, 226, 226, 0.04) 11%, rgba(226, 226, 226, 0.04) 100%),linear-gradient(90deg, rgb(11,64,102),rgb(16,87,139));   display: flex;
    flex-wrap: wrap;
    color: white;
    justify-content: space-evenly;
    gap: 20px;
  }
  footer .social{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;   
  }
  footer .social>span{
    font-size: 23px;
    font-weight: 500;
    cursor: pointer;
    background-color: #f1f1f1;
    padding: 5px 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  footer .social>span>img:first-child{
    height: 30px;
  }
  footer .social>span>img{
    height: 20px;
  }
  footer .social>div{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
  }
  footer .social>div>div{
    background-color: white;
    border-radius: 12px;
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 5px 5px 0px 0px rgb(41, 40, 40);
    transition: all 0.1s ease-in-out;
  }
  footer .social>div>div:hover{
    box-shadow: 0px 0px 0px 0px black;
    transform: translateY(-2px);
  }
  footer .social>div .fa-square-facebook{
    color: #395693;
    font-size: 23px;
    text-align: center;
  }
  footer .social>div .fa-youtube{
    color: red;
    font-size: 23px;
    text-align: center;
  }
  footer .social>div .fa-square-x-twitter{
    color: black;
    font-size: 23px;
  }
  footer .social>div .fa-square-instagram{
    background: linear-gradient(225deg, #7F02F7, #F502BD, #F63119, #F5C000);
    background-clip: text;
    color: transparent;
    font-size: 23px;
  }
  footer .quick-links{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  footer .quick-links>span{
    font-size: 16px;
    font-weight: 400;
  }
  footer .quick-links>div{
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  footer .quick-links>div>a{
    font-size: 14px;
    color: rgb(219, 219, 219);
    cursor: pointer;
    text-decoration: none;
  }
  footer .contact-info{
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 250px;
    width: 100%;
  }
  footer .contact-info>div{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  footer .contact-info>div>span{
    font-size: 14px;
    color: rgb(219, 219, 219);
  }
  footer .subscribe{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:10px;
    max-width: 250px;
    width: 100%;
  }
  footer .subscribe>span{
    font-size: 16px;
    font-weight: 400;
  }
  footer .subscribe>div{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 5px;
  }
  footer .subscribe>div>span{
    font-size: 14px;
    color: rgb(219, 219, 219);
  }
  footer .subscribe>div>form>input{
    padding: 5px;
    border-radius: 2px;
    border: none;
  }
  footer .subscribe>div>form{
    /* border: 1px solid black; */
    display: flex;
    gap: 5px;
    justify-content:flex-start;
    align-items: flex-start;
  }
  footer .subscribe>div>form>.fotbtn{
    background-color: white;
    border: none;
    border-radius: 2px;
    padding: none;
    margin: none;
    padding: 5px;
    cursor: pointer;
    color: black;
    font-size: 14px;
    font-weight: bolder;
  }
  
  .copyright{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-image: radial-gradient(circle at center center, rgba(33,33,33,0),rgb(9,45,67)),repeating-linear-gradient(135deg, rgb(9,45,67) 0px, rgb(9,45,67) 1px,transparent 1px, transparent 4px),repeating-linear-gradient(45deg, rgb(56,56,56) 0px, rgb(56,56,56) 5px,transparent 5px, transparent 6px),linear-gradient(90deg, rgb(9,45,67),rgb(9,45,67));
    color: rgb(255, 255, 255);
    gap: 10px;
  
  }
  .copyright .wing{
    cursor: pointer;
    font-size: 14px;
  }
  .copyright>span{
    font-size: 15px;
  }
  .copyright>div{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .copyright>div>span{
    font-size: 14px;
    cursor: pointer;
  }
  .copyright>div>div{
    border: 1px solid white;
    height: 18px;
  }
  @media (max-width:768px) {
    footer{
        padding: 15px 20px;
        justify-content: flex-start;
    }
    .copyright>div{
        gap: 12px;
    }
  }
  /* main-content */
  .main-content{
    position: relative;
    top: 65px;
  }
  /* notify or pop up */
.customNotification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    color: rgb(0, 0, 0);
    padding: 20px 10px;
    border-radius: 12px;
    max-width: 300px;
    width: 100%;
    font-size: 16px;
    z-index: 9999;
    display: none;
    text-align: center;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    opacity: 0;  /* Set initial opacity to 0 for smooth fade-in */
    transition: opacity 0.3s ease, transform 0.3s ease;  /* Add transition for opacity and transform */
}

#notificationMessage {
    padding: 10px 5px;
    margin-bottom: 20px;
}

.okButton {
    background-color: #ffffff;
    color: #4caf50;
    border: none;
    margin-top: 10px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
}

.okButton:hover {
    background-color: #f1f1f1;
}