body
{
    background-color: #eaeaf6;
}

#menu
{
    background-color:#f1f1ff;
    padding: 10px 30px 10px 30px;
}

#menu a
{
    color: #7177f9;
}

#navbarNav
{
    justify-content: end;
}

#logo
{
    width: 150px;
    height: auto;
}

#sign3
{
    border: 1px solid #7177f9;
    border-radius: 5px;
    padding: 7px;
    text-decoration: none;
    font-size: 15px;
}

#sign1
{
    padding-right: 35px;
}

#sign2
{
    padding-right: 80px;
}

#sign5
{
    border: 1px solid;
    border-radius: 2px;
    padding-left: 11px;
    padding-right: 11px;
    padding-top: 8px;
}


#text1
{
    font-size: 12px;
    padding-left: 40px;
    padding-right: 0px;
}

.container-fluid
{
    background: url(../images/bg4.jpg);
    height: 655px;
}

.container-fluid h1
{
    text-align: center;
    margin-top: 200px;
    color: #f1f1ff;
    font-size: 28px;
}

#drop2
{
    width: 150px !important;
    padding: 2px !important;
    
}

#sign4
{
    border-radius: 3px !important;
    padding: 9px 42px 8px 42px !important;
    text-decoration: none !important;
    font-size: 15px !important;
    color: white !important;
    background-color: #7177f9 !important;
}

#srch
{
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    background: #f1f1ff !important;
    height: 60px !important;
}

#centerbtn
{
    justify-content: center; 
    padding-top :40px;
}

#centerbtn1
{
    background: #f1f1ff !important;
    height: 60px !important;
    padding: 0px;
}

#wlcm
{
    font-family: "DM Sans",sans-serif;
    padding-left: 20px;
    font-size: 20px;
    font-weight: 600;
}

.Dashboard
{
    margin-top: 100px;
}

.Dashboard h1
{
    font-size: larger;
    font-family: "DM Sans",sans-serif;
}

#container{
	box-shadow: 0px 2px 2px 2px grey;
	text-align: center;
	border-radius: 5px;
	overflow: hidden;
	height: 270px;
	width: 200px;
  
	
}

.product-image {
	transition: all 0.3s ease-out;
	display: inline-block;
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%;
	display: inline-block;
}

#svg1
{
    padding-top: 45px;
    background-color: #ffffff;
}

#svg2
{
    background-color: #7177f9;
    border-radius: 70px;
    padding: 10px;
}

#svg0
{
    background-color: #f4a150;
    padding: 10px;
    border-radius: 10px;
}

#svg3
{
    background-color: #eb3f9a;
    padding: 10px;
    border-radius: 10px;
}

#svg4
{
    background-color: white;
    padding: 2px;
    border-radius: 10px;
}

#svg10
{
    background-color: #a49dff;
    padding: 5px;
    border-radius: 14px;
}

#svg11
{
    background-color: #a49dff;
    padding: 0px 5px 0px 5px;
    border-radius: 14px;
}

#svg5
{
    background-color: white;
    padding: 3px;
    border-radius: 2px;
}

#svg1 h2
{
    padding-top: 15px;
    font-size: 30px;
    color:#625f59;
}

#container img {width: 100%;height: 100%;}

.info {
    background: #7177f9;
    font-family: 'Bree Serif', serif;
    transition: all 0.3s ease-out;
    transform: translateX(-100%);
    position: absolute;
    line-height: 1.8;
    text-align: left;
    cursor: no-drop;
    color: #FFF;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    padding: 10px;
}

.info2 {
    background: #f4a150;
    font-family: 'Bree Serif', serif;
    transition: all 0.3s ease-out;
    transform: translateX(-100%);
    position: absolute;
    line-height: 1.8;
    text-align: left;
    cursor: no-drop;
    color: #FFF;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    padding: 10px;
}

.info3 {
    background: #eb3f9a;
    font-family: 'Bree Serif', serif;
    transition: all 0.3s ease-out;
    transform: translateX(-100%);
    position: absolute;
    line-height: 1.8;
    text-align: left;
    cursor: no-drop;
    color: #FFF;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    padding: 10px;
}

.info4 {
    background: #f4a150;
    font-family: 'Bree Serif', serif;
    transition: all 0.3s ease-out;
    transform: translateX(-100%);
    position: absolute;
    line-height: 1.8;
    text-align: left;
    cursor: no-drop;
    color: #FFF;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    padding: 10px;
}

.info5 {
    background: #7177f9;
    font-family: 'Bree Serif', serif;
    transition: all 0.3s ease-out;
    transform: translateX(-100%);
    position: absolute;
    line-height: 1.8;
    text-align: left;
    cursor: no-drop;
    color: #FFF;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    padding: 10px;
}

.into {
    display: flex;
    flex-wrap: nowrap;
}

.into h6 {
    font-family: system-ui;
    font-weight: 600;
}

.info p
{
    font-size: 60px;
    font-weight: 500;
    color: #ffffff;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.info2 p
{
    font-size: 60px;
    font-weight: 500;
    color: #ffffff;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.info3 p
{
    font-size: 60px;
    font-weight: 500;
    color: #ffffff;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.info4 p
{
    font-size: 60px;
    font-weight: 500;
    color: #ffffff;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.info5 p
{
    font-size: 60px;
    font-weight: 500;
    color: #ffffff;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.info h4
{
    font-size: 18px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.info2 h4
{
    font-size: 18px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.info3 h4
{
    font-size: 18px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.info4 h4
{
    font-size: 18px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.info5 h4
{
    font-size: 18px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


.product-image:hover .info{transform: translateX(0);}

.info ul li{transition: 0.3s ease;}
.info ul li:hover{transform: translateX(50px) scale(1.3);}

.product-image:hover .info2{transform: translateX(0);}

.info2 ul li{transition: 0.3s ease;}
.info2 ul li:hover{transform: translateX(50px) scale(1.3);}

.product-image:hover .info3{transform: translateX(0);}

.info3 ul li{transition: 0.3s ease;}
.info3 ul li:hover{transform: translateX(50px) scale(1.3);}

.product-image:hover .info4{transform: translateX(0);}

.info4 ul li{transition: 0.3s ease;}
.info4 ul li:hover{transform: translateX(50px) scale(1.3);}

.product-image:hover .info5{transform: translateX(0);}

.info5 ul li{transition: 0.3s ease;}
.info5 ul li:hover{transform: translateX(50px) scale(1.3);}

.product-image:hover img {transition: all 0.3s ease-out;}
.product-image:hover img {transform: scale(1.2, 1.2);}


/* Dashboard */

.row
{
    margin-right: 0px;
    margin-left: 0px;
}

.dashcard
{
    margin-top: 50px;
    width: 380px;
    height: 300px;
    background-color: white;
    box-shadow: 0px 5px 5px 5px lightblue;
    margin-bottom: 50px;
    padding: 10px;
}

.dashcard h1
{
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 520;
}

.dashcard img
{
    width: 110px;
    height: 120px;
    box-shadow: 0px 1px 7px 1px;

}

.vimg img
{
    width: 20px;
    height: 20px;
    box-shadow: none;
}
.vimg p
{
    margin-top: 10px;
    margin-left: 18px
}

.dashcard h2 a
{
    color: #525151;
    font-size: 25px;
    text-decoration: none;
}

.dashcard h3
{
    font-size: 16px;
}

.dashcard h4
{
    font-size: 16px;
    color: rgb(180, 180, 180);
    font-weight: 500;
}

.dashcard p
{
    font-size: 14px;
}


.btnconn
{
    display: flex;
    justify-content: center;
}

.btnconn h4
{
    font-size: 16px;
    color: rgb(87, 87, 87);
    font-weight: 500;
    display: flex;
    justify-content: center;
}
/*listising*/



#links
{
    font-weight: bold;
}


#iconp
{
    padding-left: 10px;
}

#iconp h1
{
    padding-left: 10px;
}

#iconp p
{
    font-weight: 400;
}

.card2
{
    background-color: #ffffff;
    border-radius: 5px;
    margin-left: 5px;
    margin-top: 20px;
}

.card2 h5
{
    font-size: medium;
    padding: 12px;
}

.card
{
    background-color: #ffffff;
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 0px;
    width: inherit;
}

.cardS
{
    background-color: #ffffff;
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 0px;
    width: inherit;
}


#cstyle
{
    display: flex; 
    justify-content: center; 
    margin-top: 20px;
    padding: 0px;
}

.card-content
{
    padding-right: 13px;
    padding-left: 13px;
    padding-top: 13px;
}

@media only screen and (max-width: 1024px)
{
   .card-content
    {
        padding-right: 0px;
        padding-left: 0px;
        padding-top: 10px;
    } 
}

@media only screen and (max-width: 912px)
{
    .pdng{
        padding-left:35px !important;
    }
}


.cardS-content2
{
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 13px;
}

#userp
{
    padding-top: 0px;
    padding-left: 10px;
    padding-bottom: 5px;
}

#userp p
{
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 490;
    color: #8f8f8f;
}

#userp h6
{
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #525151;
}


#userp img
{
width: 50px;
height: 50px;
background-color: #2196F3;
padding: 5px;
border-radius: 3px;
}

.card h1
{
    font-size: 16px;
}

#exampleFormControlSelect1
{
    width: 120px !important;
}

.form-control
{
    border: 4px solid #ced4da;
    padding-top: 2px;
    padding-bottom: 2px;
    margin: 10px;
}

#listicon
{
    background:#eaeaf6;
    padding: 4px;
    border-radius: 4px;
}

#infoicon 
{
    font-size: smaller;
    padding-left: 20px;
}

#infoicon1
{
    font-size: smaller;
    padding-left: 78px;
}

p
{
    margin-bottom: 8px;
}
#infoicon2
{
    font-size: smaller;
    padding-left: 33px;
}

#infoicon3
{
    padding-left: 20px;
    padding-bottom: 20px;
    font-size: 15px;
    font-weight: 600;
}

#infoicon4
{
    padding-bottom: 20px;
    padding-left: 20px;
    font-size: 15px;
    font-weight: 600;
}

#infoicon5
{
    padding-bottom: 20px;
    padding-left: 20px;
    font-size: 15px;
    font-weight: 600;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }

  #pbar p
  {
    font-size: 16px;
    color:#eb3f9a;
  }

  #pbar h1
  {
    font-size: 14px;
    color:#eb3f9a;
    margin-top: 5px;
  }


.onbtn
{
    position: absolute;
    font-weight: 600;
    font-size: 16px;
    pointer-events: none;
    top: 7px;
    left: 6px;
    color: white;
}

.offbtn
{
    position: absolute;
    font-weight: 600;
    font-size: 16px;
    pointer-events: none;
    top: 7px;
    left: 32px;
    color: white;
}

.progress
{
    height: 10px;
}

#pbar1 p
{
  font-size: 16px;
  color:#eb3f9a;
}

#listlink2
{
    width: auto;
    justify-content: center;
    border-top: 4px solid #eaeaf6;  
}


#listlink
{
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    text-decoration: none;
    color: #625f59;
    font-weight: 600;
    font-size: 13px;
}

@media only screen and (max-width: 1024px)
{
    #listlink
    {
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
    }
}

#listlink2 :hover
{
    background-color: #eaeaf6;
    transition: 0.5s;
}

/* Extra Large */

@media only screen and (max-width: 1200px) {   
    #iconp svg
    {
        width: 55px;
        height: 55px;
    }

    #iconp h1
    {
        font-size: 14px;
    }

    #iconp p
    {
        font-size: 13px;
    }

    #infoicon1
    {
        padding-left: 60px;
    }

    #infoicon3
    {
        font-size: 13px;
    }
    #infoicon4
    {
        font-size: 13px;
        padding-left: 12px;
    }
    #infoicon5
    {
        font-size: 13px;
    }

    #pbar p
    {
        font-size: 14px;
    }

    #pbar h1
    {
        font-size: 12px;
        font-weight: 400;
    }

    #pbar1 p
    {
        font-size: 14px;
        color:#eb3f9a;
    }
}

/* Large */

@media only screen and (max-width: 992px)
{
    .card
    {
        width: 300px;
    }
    #iconp svg
    {
        width: 55px;
        height: 55px;
    }

    #iconp h1
    {
        font-size: 14px;
    }

    #iconp p
    {
        font-size: 13px;
    }

    #infoicon1
    {
        padding-left: 60px;
    }

    #infoicon3
    {
        font-size: 12px;
    }
    #infoicon4
    {
        font-size: 12px;
        padding-left: 13px;
    }
    #infoicon5
    {
        font-size: 12px;
    }

    #pbar p
    {
        font-size: 14px;
    }

    #pbar h1
    {
        font-size: 12px;
        font-weight: 400;
    }

    #pbar1 p
    {
        font-size: 14px;
        color:#eb3f9a;
    }

    #listlink
    {
        padding-top: 8px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 8px;
    }

}

/* Medium */

@media only screen and (max-width: 768px)
{
    .card
    {
        width: 310px;
    }
    #iconp svg
    {
        width: 58px;
        height: 58px;
    }

    #iconp h1
    {
        font-size: 13px;
        padding-left: 5px;
    }

    #iconp p
    {
        font-size: 14px;
    }

    #infoicon
    {
        padding-left: 30px;
    }
    #infoicon1
    {
        padding-left: 30px;
    }

    #infoicon2
    {
        padding-left: 30px;
    }

    #infoicon3
    {
        font-size: 12px;
        padding-left: 12px
    }
    #infoicon4
    {
        font-size: 12px;
        padding-left: 6px;
    }
    #infoicon5
    {
        font-size: 12px;
        padding-left: 18px;
    }

    #pbar p
    {
        font-size: 15px;
    }

    #pbar h1
    {
        font-size: 12px;
        font-weight: 400;
    }

    #pbar1 p
    {
        font-size: 14px;
        color:#eb3f9a;
    }

    #listlink
    {
        padding-top: 6px;
        padding-left: 8px;
        padding-right: 8px;
        padding-bottom: 6px;
    }

}

/* Small */

@media only screen and (max-width: 576px)
{
    .col-12
    {
        display: flex;
        justify-content: center;
    }
    .card
    {
        width: 265px;
    }
    #iconp svg
    {
        width:50px;
        height: 50px;
    }

    #iconp h1
    {
        font-size: 15px;
    }

    #iconp p
    {
        font-size: 13px;
    }

    #infoicon1
    {
        padding-left: 70px;
    }

    #infoicon2
    {
        padding-left: 30px;
    }

    #infoicon3
    {
        font-size: 13px;
        padding-left: 16px;
    }
    #infoicon4
    {
        font-size: 13px;
        padding-left: 25px;
    }
    #infoicon5
    {
        font-size: 13px;
        padding-left: 25px;
    }

    #pbar p
    {
        font-size: 14px;
    }

    #pbar h1
    {
        font-size: 12px;
        font-weight: 400;
    }

    #pbar1 p
    {
        font-size: 14px;
        color:#eb3f9a;
    }

}

@media (max-width: 991px) {
    .hidden-tab 
    {
      display: none;
    }
  }

@media (min-width: 991px)
{
    .hidden-btn
    {
        display: none;
    }
}
      
.btn-outline-primary
{
    border-radius: 0%;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#rent , #sell , #lease
{
    margin-left: 10px;
}

#form1
{
    width: 120px !important;
}

.btn-outline-success
{
    font-size: 12px;
    margin-left: 12px;
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.list
{
    margin-top: 100px;
}

.navbar-collapse
{
    justify-content: left;
}


.col-12.col-xl-4.col-lg-4.col-md-4.col-sm-6 {
    padding: 10px;
    display: flex;
    justify-content: center;
}

.col-12.col-xl-3.col-lg-4.col-md-4.col-sm-6 {
    display: flex;
    justify-content: center;
}



/* Feed CSS */

#short img
{
    width: 15px;
    height: 15px;
    margin-bottom: 4px;
}

#short
{
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    text-decoration: none;
    color: #625f59;
    font-weight: 600;
    font-size: 13px;
}

/* Feed CSS End */

/* Feed CSS */
.Sort
{
    border: 1px solid #2196F3;
    display: flex;
}

#global
{
    color: #FFF;
    background-color: #2196F3;
    padding: 5px 5px 1px 8px;
}

#private
{
    color: #2196F3;
    background-color: #eaeaf6;
    padding: 5px 8px 1px 5px;
}

#cityname
{
    font-size: mium;
    color: #8f8f8f;
    font-family: 'Arial Narrow';
    letter-spacing: 1px;
    background-color: #f8f9fa;
}

option
{
    border: none;
}

.Sort2 
{
    display: flex;
    margin-top: 8px;
}

.Sort2 h6
{
    font-size: 1rem;
}

.Sort3
{
    display: flex;
    width: 566px;
    justify-content: flex-end;
}

.Sort3 a
{
    border: 1px solid #b0b4ff;
    padding: 5px 10px 5px 10px;
    margin: 0px 0px 0px 20px;
    text-decoration: none;
    border-radius: 5px;
}

.Sort3 p
{
    margin: 0px;
    color: #b0b4ff;
}

@media only screen and (max-width: 1200px) 
{
    .Sort3
    {
        width: 440px;
    }
}

@media only screen and (max-width: 1140px) 
{
    .Sort3
    {
        width: 370px;
    }
}
@media only screen and (max-width: 1050px) 
{
    .Sort2 h6
    {
        font-size: 14px;
    }

    .Sort3 h6
    {
        font-size: 14px;
    }

    #cityname
    {
        width: 75px;
        font-size: 14px;
    }
}




@media only screen and (max-width: 990px) 
{
    .Sort3
    {
        width: 680px !important;
    }
}

@media only screen and (max-width: 850px) 
{
    .Sort3
    {
        width: 550px !important;
    }
}



@media only screen and (max-width: 769px) 
{
    .Sort
    {
        border: 1px solid #2196F3;
        display: flex;
    }

    #btn-Paha2
    {
        padding: 4px 12px 4px 12px !important; 
        font-size: 11px !important;
    }

    #global
    {
        color: #FFF;
        background-color: #2196F3;
        padding: 5px 5px 1px 5px;
        font-size: 11px;
    }

    #private
    {
        color: #2196F3;
        background-color: #eaeaf6;
        padding: 5px 5px 1px 5px;
        font-size: 11px;
    }
    .Sort2 h6
    {
        font-size: 11px;
        margin-left: 10px !important;
    }

    .Sort3 h6
    {
        font-size: 11px;
        margin-left: 10px !important;
    }

    .Sort2 select
    {
        margin-left: 0px !important;
    }
    .Sort3 select
    {
        margin-left: 0px !important;
    }
    .Sort3 h6
    {
        font-size: 11px;
    }

    #cityname
    {
        width: 75px;
        font-size: 12px;
    }
    .Sort3
    {
        width: 580px !important;;
    }
    .Sort3 a
    {
        width: 100px;
        font-size: 10px;
    }
}



@media only screen and (max-width: 576px) 
{
    
}


@media only screen and (max-width: 541px) 
{
    .Sort3
    {
        width: 365px !important;
    }
}

@media only screen and (max-width: 415px) 
{
    .Sort3 a {
        width: 92px;
        font-size: 10px;
        margin: 0px 0px 0px 12px;
        padding: 4px 6px 4px 6px;
    }
    .Sort3
    {
        width: 231px !important;
    }
    #global
    {
        color: #FFF;
        background-color: #2196F3;
        padding: 5px 5px 1px 5px;
        font-size: 10px;
    }

    #private
    {
        color: #2196F3;
        background-color: #eaeaf6;
        padding: 5px 5px 1px 5px;
        font-size: 10px;
    }

    #btn-Paha2 {
        padding: 4px 12px 4px 12px !important;
        font-size: 11px !important;
    }
}

@media only screen and (max-width: 360)
{

    .Sort3
    {
        width: 365px !important;
    }
}

@media only screen and (max-width: 415px) 
{
    .Sort3 a {
        width: 92px;
        font-size: 10px;
        margin: 0px 0px 0px 12px;
        padding: 4px 6px 4px 6px;
    }
    .Sort3
    {
        width: 231px !important;
    }
    #global
    {
        color: #FFF;
        background-color: #2196F3;
        padding: 5px 5px 1px 5px;
        font-size: 10px;
    }

    #private
    {
        color: #2196F3;
        background-color: #eaeaf6;
        padding: 5px 5px 1px 5px;
        font-size: 10px;
    }

    #btn-Paha2 {
        padding: 4px 12px 4px 12px !important;
        font-size: 11px !important;
    }   
}


/* Login Form Css */


/*form {*/
/*  --background: white;*/
/*  --border: rgba(0, 0, 0, 0.125);*/
/*  --borderDark: rgba(0, 0, 0, 0.25);*/
/*  --borderDarker: rgba(0, 0, 0, 0.5);*/
/*  --bgColorH: 0;*/
/*  --bgColorS: 0%;*/
/*  --bgColorL: 98%;*/
/*  --fgColorH: 210;*/
/*  --fgColorS: 50%;*/
/*  --fgColorL: 38%;*/
/*  --shadeDark: 0.3;*/
/*  --shadeLight: 0.7;*/
/*  --shadeNormal: 0.5;*/
/*  --borderRadius: 0.125rem;*/
/*  --highlight: #306090;*/
/*  background: white;*/
/*  border: 1px solid var(--border);*/
/*  border-radius: var(--borderRadius);*/
/*  box-shadow: 0 1rem 1rem -0.75rem var(--border);*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  padding: 1rem;*/
/*  position: relative;*/
/*  overflow: hidden;*/
/*}*/

/*form .email, form .email a {*/
/*  color: hsl(var(--fgColorH), var(--fgColorS), var(--fgColorL));*/
/*  font-size: 0.825rem;*/
/*  order: 4;*/
/*  text-align: center;*/
/*  margin-top: 0.25rem;*/
/*  outline: 1px dashed transparent;*/
/*  outline-offset: 2px;*/
/*  display: inline;*/
/*}*/

/*form a:hover {*/
/*  color: hsl(var(--fgColorH), var(--fgColorS), calc(var(--fgColorL) * 0.85));*/
/*  transition: color 0.25s;*/
/*}*/

/*form a:focus {*/
/*  color: hsl(var(--fgColorH), var(--fgColorS), calc(var(--fgColorL) * 0.85));*/
/*  outline: 1px dashed hsl(var(--fgColorH), calc(var(--fgColorS) * 2), calc(var(--fgColorL) * 1.15));*/
/*  outline-offset: 2px;*/
/*}*/

/*form > div {*/
/*  order: 2;*/
/*}*/

/*label {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*}*/

/*.label-show-password {*/
/*  order: 3;*/
/*}*/

/*label > span {*/
/*  color: var(--borderDarker);*/
/*  display: block;*/
/*  font-size: 0.825rem;*/
/*  margin-top: 0.625rem;*/
/*  order: 1;*/
/*  transition: all 0.25s;*/
/*}*/

/*label > span.required::after {*/
/*  content: "*";*/
/*  color: #dd6666;*/
/*  margin-left: 0.125rem;*/
/*}*/

/*label input {*/
/*  order: 2;*/
/*  outline: none;*/
/*}*/

/*label input::placeholder {*/
/*  color: var(--borderDark);*/
/*}*/

/* trick from https://css-tricks.com/snippets/css/password-input-bullet-alternatives/ */
/*label input[name="password"] {*/
/*  -webkit-text-security: disc;*/
/*}*/

/*input[name="show-password"]:checked ~ div label input[name="password"] {*/
/*  -webkit-text-security: none;*/
/*}*/

/*label:hover span {*/
/*  color: hsl(var(--fgColorH), var(--fgColorS), var(--fgColorL));*/
/*}*/

/*input[type="checkbox"] + div label:hover span::before,*/
/*label:hover input.text {*/
/*  border-color: hsl(var(--fgColorH), var(--fgColorS), var(--fgColorL));*/
/*}*/

/*label input.text:focus,*/
/*label input.text:active {*/
/*  border-color:  hsl(var(--fgColorH), calc(var(--fgColorS) * 2), calc(var(--fgColorL) * 1.15));*/
/*  box-shadow: 0 1px  hsl(var(--fgColorH), calc(var(--fgColorS) * 2), calc(var(--fgColorL) * 1.15));*/
/*}*/

/*input.text:focus + span,*/
/*input.text:active + span {*/
/*  color:  hsl(var(--fgColorH), calc(var(--fgColorS) * 2), calc(var(--fgColorL) * 1.15));*/
/*}*/

/*input {*/
/*  border: 1px solid var(--border);*/
/*  border-radius: var(--borderRadius);*/
/*  box-sizing: border-box;*/
/*  font-size: 1rem;*/
/*  height: 2.25rem;*/
/*  line-height: 1.25rem;*/
/*  margin-top: 0.25rem;*/
/*  order: 2;*/
/*  padding: 0.25rem 0.5rem;*/
/*  width: 15rem;*/
/*  transition: all 0.25s;*/
/*}*/

/*input[type="submit"] {*/
/*  color: hsl(var(--bgColorH), var(--bgColorS), var(--bgColorL));*/
/*  background: hsl(var(--fgColorH), var(--fgColorS), var(--fgColorL));*/
/*  font-size: 0.75rem;*/
/*  font-weight: bold;*/
/*  margin-top: 0.625rem;*/
/*  order: 4;*/
/*  outline: 1px dashed transparent;*/
/*  outline-offset: 2px;*/
/*  padding-left: 0;*/
/*  text-transform: uppercase;*/
/*}*/

/*input[type="checkbox"]:focus + label span::before,*/
/*input[type="submit"]:focus {*/
/*  outline: 1px dashed hsl(var(--fgColorH), calc(var(--fgColorS) * 2), calc(var(--fgColorL) * 1.15));*/
/*  outline-offset: 2px;*/
/*}*/

/*input[type="submit"]:focus {*/
/*  background: hsl(var(--fgColorH), var(--fgColorS), calc(var(--fgColorL) * 0.85));*/
/*}*/

/*input[type="submit"]:hover {*/
/*  background: hsl(var(--fgColorH), var(--fgColorS), calc(var(--fgColorL) * 0.85));*/
/*}*/

/*input[type="submit"]:active {*/
/*  background: hsl(var(--fgColorH), calc(var(--fgColorS) * 2), calc(var(--fgColorL) * 1.15));*/
/*  transition: all 0.125s;*/
/*}*/

/* Checkbox styling */
/*.a11y-hidden {*/
/*  position: absolute;*/
/*  top: -1000em;*/
/*  left: -1000em;*/
/*}*/

/*input[type="checkbox"] + label span {*/
/*  padding-left: 1.25rem;*/
/*  position: relative;*/
/*}*/

/*input[type="checkbox"] + label span::before {*/
/*  content: "";*/
/*  display: block;*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 0.75rem;*/
/*  height: 0.75rem;*/
/*  border: 1px solid var(--borderDark);*/
/*  border-radius: var(--borderRadius);*/
/*  transition: all 0.25s;*/
/*  outline:1px dashed transparent;*/
/*  outline-offset: 2px;*/
/*}*/

/*input[type="checkbox"]:checked + label span::after {*/
/*  content: "";*/
/*  display: block;*/
/*  position: absolute;*/
/*  top: 0.1875rem;*/
/*  left: 0.1875rem;*/
/*  width: 0.375rem;*/
/*  height: 0.375rem;*/
/*  border: 1px solid var(--borderDark);*/
/*  border-radius: var(--borderRadius);*/
/*  transition: all 0.25s;*/
/*  outline:1px dashed transparent;*/
/*  outline-offset: 2px;*/
/*  background: hsl(var(--fgColorH), var(--fgColorS), var(--fgColorL));*/
/*}*/

/** PERSON */
/*figure {*/
/*  --skinH: 30;*/
/*  --skinS: 100%;*/
/*  --skinL: 87%;*/
/*  --hair: rgb(180,70,60);*/
/*  background: hsl(var(--fgColorH), calc(var(--fgColorS) * 2), 95%);*/
/*  border: 1px solid rgba(0,0,0,0.0625);*/
/*  border-radius: 50%;*/
/*  height: 0;*/
/*  margin: auto auto;*/
/*  margin-bottom: 2rem;*/
/*  order: 1;*/
/*  padding-top: 60%;*/
/*  position: relative;*/
/*  width: 60%;*/
/*  overflow: hidden;*/
/*}*/

/*figure div {*/
/*  position: absolute;*/
/*  transform: translate(-50%, -50%);*/
/*}*/

/*figure .skin {*/
/*  background: hsl(var(--skinH), var(--skinS), var(--skinL));*/
/*  box-shadow: inset 0 0 3rem hsl(var(--skinH), var(--skinS), calc(var(--skinL) * 0.95));*/
/*}*/

/*figure .head {*/
/*  top: 40%;*/
/*  left: 50%;*/
/*  width: 60%;*/
/*  height: 60%;*/
/*  border-radius: 100%;*/
/*  box-shadow: 0 -0.175rem 0 0.125rem var(--hair);*/
/*}*/

/*figure  .ears {*/
/*  top: 47%;*/
/*  left: 50%;*/
/*  white-space: nowrap;*/
/*}*/

/*figure .ears::before,*/
/*figure .ears::after {*/
/*  content: "";*/
/*  background: hsl(var(--skinH), var(--skinS), var(--skinL));*/
/*  border-radius: 50%;*/
/*  width: 1rem;*/
/*  height: 1rem;*/
/*  display: inline-block;*/
/*  margin: 0 2.1rem;*/
/*}*/

/*figure .head .eyes {*/
/*  top: 55%;*/
/*  left: 50%;*/
/*  white-space: nowrap;*/
/*}*/

/*@-webkit-keyframes blink {*/
/*  0%, 90%, 100% {*/
/*    height: 10px;*/
/*  }*/
/*  95% {*/
/*    height: 0;*/
/*  }*/
/*}*/

/*@keyframes blink {*/
/*  0%, 90%, 100% {*/
/*    height: 10px;*/
/*  }*/
/*  95% {*/
/*    height: 0px;*/
/*  }*/
/*}*/

/*figure .head .eyes::before,*/
/*figure .head .eyes::after {*/
/*  content: "";*/
/*  background: var(--borderDarker);*/
/*  border-radius: 50%;*/
/*  width: 10px;*/
/*  height: 10px;*/
/*  display: inline-block;*/
/*  margin: 0 0.5rem;*/
/*  -webkit-animation: blink 5s infinite;*/
/*  animation: blink 5s infinite;*/
/*  transition: all 0.15s;*/
/*}*/

/*input[name="show-password"]:checked ~ figure .head .eyes::before,*/
/*input[name="show-password"]:checked ~ figure .head .eyes::after {*/
/*  height: 0.125rem;*/
/*  animation: none;*/
/*}*/

/*figure .head .mouth {*/
/*  border: 0.125rem solid transparent;*/
/*  border-bottom: 0.125rem solid var(--borderDarker);*/
/*  width: 25%;*/
/*  border-radius: 50%;*/
/*  transition: all 0.5s*/
/*}*/

/*form:invalid figure .head .mouth {*/
/*  top: 75%;*/
/*  left: 50%;*/
/*  height: 10%;*/
/*}*/

/*form:valid figure .head .mouth {*/
/*  top: 60%;*/
/*  left: 50%;*/
/*  width: 40%;*/
/*  height: 40%;*/
/*}*/

/*figure .hair {*/
/*  top: 40%;*/
/*  left: 50%;*/
/*  width: 66.66%;*/
/*  height: 66.66%;*/
/*  border-radius: 100%;*/
/*  overflow: hidden;*/
/*}*/

/*figure .hair::before {*/
/*  content: "";*/
/*  display: block;*/
/*  position: absolute;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  background: var(--hair);*/
/*  border-radius: 50%;*/
/*  top: -60%;*/
/*  left: -50%;*/
/*  box-shadow: 4rem 0 var(--hair);*/
/*}*/

/*figure .neck {*/
/*  width: 10%;*/
/*  height: 40%;*/
/*  top: 62%;*/
/*  left: 50%;*/
/*  background: hsl(var(--skinH), var(--skinS), calc(var(--skinL) * 0.94));*/
/*  border-radius: 0 0 2rem 2rem;*/
/*  box-shadow: 0 0.25rem var(--border);*/
/*}*/

/*figure .person-body {*/
/*  width: 60%;*/
/*  height: 100%;*/
/*  border-radius: 50%;*/
/*  background: red;*/
/*  left: 50%;*/
/*  top: 126%;*/
/*  background: hsl(var(--fgColorH), var(--fgColorS), var(--fgColorL));*/
/*}*/

/*figure .shirt-1,*/
/*figure .shirt-2 {*/
/*  width: 12%;*/
/*  height: 7%;*/
/*  background: hsl(var(--bgColorH), var(--bgColorS), var(--bgColorL));*/
/*  top: 76%;*/
/*  left: 36.5%;*/
/*  transform: skew(-10deg) rotate(15deg)*/
/*}*/

/*figure .shirt-2 {*/
/*  left: 52.5%;*/
/*  transform: skew(10deg) rotate(-15deg)*/
/*}*/

/* Login Form Css */


@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
/* reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* subtle color palette */
  --black-1a: hsla(0, 0%, 0%, 0.2);
  /* basic color palette */
  --black-1: hsl(0, 0%, 0%);
  --black-2: hsl(0, 0%, 40%);
  --white-1: hsl(0, 0%, 100%);
  /* fonts */
  --ft-fy-fallback-1: sans-serif;
  --ft-fy-1: "Poppins", var(--ft-fy-fallback-1);
  --ft-se-200: 0.85rem;
  --ft-se-400: 1.05rem;
  --ft-se-600: 2rem;
  /* spaces */
  --space-100: 0.5em;
  --space-150: 0.7em;
  --space-200: 1em;
  /* fixed spaces */
  --space-fd-400: 15px;
}
.form {
  --form__label_cr: var(--black-2);
  color: var(--form_cr, var(--black-1));
  width: calc(100%);
  box-shadow: 0 0 30px var(--black-1a);
  padding-block: var(--form__header_pg-bk, var(--space-200));
  background-color: white;
  max-width: 100%;
}

/*@media only screen and (max-width: 762px)*/
/*{*/
/*    .form*/
/*    {*/
/*        max-width: 100%;*/
/*    }*/
/*}*/


/*@media only screen and (max-width: 414px)*/
/*{*/
/*    .form*/
/*    {*/
/*        max-width: 100%;*/
/*    }*/
/*}*/

.form__header {
  padding-inline: var(--space-fd-400);
  text-align: center;
}
.form__linput {
  display: flex;
  margin-inline: var(--space-fd-400);
  margin-block-end: var(--space-100);
  flex-direction: column;
}
.form__label {
  color: var(--form__label_cr, var(--black-2));
}
.form__input {
  border: 1px solid var(--form__input_br-cr, var(--black-1a));
  padding: var(--space-100) var(--space-150);
  color: var(--form__label_cr, var(--black-2));
  outline: none;
  font-size: var(--form__input_ft-se, var(--ft-se-200));
  font-family: var(--form__input_ft-fy, var(--ft-fy-1));
  background-color: aliceblue;
  border-radius: 30px;
}

.form__input:focus {
  --form__label_cr: var(--black-1);
  --form__input_br-cr: var(--form__label_cr);
}

.h1 {
  font-size: var(--ft-se-600);
}

.pageform {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0px;
}


.bgf
{
    background: #0064a0;
    color: white;
}

/* property listing */

.search-form{
    box-shadow: 1px 1px 14px #ccc;
    border-radius: 8px;
    padding: 13px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    display: block;
    top: 30px;
}

.search-form label{
    display: inline-block;
    color: #000;
    font-size: 15px;
    margin-bottom: 0;
}

.center-holder input{
        background: #0f8acf !important;
    color: #fff !important;
    font-size: 17px;
    padding: 10px 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-form input {
    font-weight: 500 !important;
    border-radius: 5px;
    font-size: 13px;
    border: 1px solid #f6f7f8;
    background: #f6f7f8;
    color: #777;
    outline: none;
    width: 100%;
    padding: 14px;
    margin: 10px 0px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.contact-form select {
    font-weight: 400 !important;
    border-radius: 5px;
    font-size: 15px;
    border: 1px solid #f6f7f8;
    background: #f6f7f8;
    color: #777 !important;
    outline: none;
    width: 100%;
    padding: 14px;
    margin: 10px 0px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}