
	
.enquire-btn {
    background: #f2a968;
    font: 400 12px / 20px 'Quicksand', sans-serif;
    color: #fff;
    padding: 10px 25px;
    display: inline-block;
    letter-spacing: 1px;
    margin: 10px 0 0 0;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}	

.enquire-btn:hover{background:#000;}
	
	
	    
.flex-container {
  padding: 0.5rem;
  margin: 2rem auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flex-item {
  background: white;
  /*padding: 0.5rem;*/
  margin: 0.5rem;
  flex: 1 1 auto;
  text-align:left;
  border: 1px solid #B3B3B3;
}

.item-pd{
    padding: 0.5rem ;
}

.item-active{
    border: 2px solid #229C82 !important;
    transform: scaleY(1.1) !important;
}

.popular-div{
    position: absolute;
    top: -15px;
    background: #229C82;
    font: 700 11px / 14px 'Quicksand', sans-serif;
    color: #fff;
    padding: 10px 25px;
    display: inline-block;
    letter-spacing: 1px;
    margin: 10px 0 0 0;
    text-transform: uppercase;
    width: 70%;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
}


  @media screen and (min-width: 320px) {
      .flex-item {
        width: 100%;
      }
      
     .item-active {
        margin: 3.5rem 0.5rem;
    }    
      
      
  }
  @media screen and (min-width: 640px) {
      .flex-item {
        width: calc(50% - 1rem);
        margin: 2.5rem 0.5rem;
      }
    
  }
  @media screen and (min-width: 1100px) {
      .flex-item {
         width: calc(25% - 1rem);
      }
   
  }
}

.color1{
    color:#000000;
}

.color2{
    color:#1C2120;
}

.color3{
    color:#229C82;
}

.color4{
    color:#A1A1A1;
}

.color5{
    color:#DAA520;
}


#package-block, .text1{
    font: 400 18px / 23.4px 'Crimson Text', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding:5px 0px;
}

#package-block, .text2{
    font: 500 11px / 14px 'Quicksand', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#package-block, .text3{
    font: 700 24px / 31.2px 'Crimson Text', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#package-block, .text4{
    font: 400 12px / 15px 'Quicksand', sans-serif;
    letter-spacing: 1px;
}

#package-block ul li{
    font: 400 12px / 15px 'Quicksand', sans-serif;
    letter-spacing: 1px;
    color:#000000;
    padding:2px 0px;
    text-transform:none;
}

#package-block ul{
    list-style: unset;
    margin-bottom: 5px;
}

::marker {
  font-size: 10px;
}


.pdtb-5{
    padding:10px 0px;
}

#package-block hr{
    color:#B3B3B3;
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
}







.form-column1 {
  float: left;
  width: 40%;
  background-image: url("../images/modal-img.png"); 
  height: 600px; 
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover; 
}


.form-column2 {
  float: left;
  width: 60%;
  padding:20px;
}


.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .form-column1, .form-column2 {
    width: 100%;
  }
  
 .popup-container {
    width: 90% !important;
    margin: 1em auto !important;
    height:100%;
    overflow:scroll;
} 

.col2-1, .col2-2, .col3-1{
  width: 100% !important;
}

.col3-2{
  width: 60% !important;
}

.col3-3{
  width: 40% !important;
}

.col2, .col3 {
    display: block !important;
}

.form-column1 {
  height: 250px !important;
}

.popup-container {
    top: 0% !important;
}

.col-mob{
    display: flex !important;
    gap: 5px;
}


}



.col-mob{
    display: contents;
}



.form-column2 h2{
    font: 300 36px / 40.01px 'Crimson Text', serif;
    text-transform: uppercase;
    color:#3B3B3B;
}

.form-column2 p{
    font: 400 14px / 28px 'Quicksand', sans-serif;
    color:#3B3B3B;
}



.popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 1000;
  width: 100%;
  background-color: rgba(94, 110, 141, 0.9);
  opacity: 0;
  visibility: hidden;
  transition:500ms all;

}

.popup.is-visible {
  opacity: 1;
  visibility: visible;
 transition:1s all;
}

.popup-container {
  transform:translateY(-50%);
  transition:500ms all;
  position: relative;
  width: 60%;
  margin: 2em auto;
  top: 10%;
  background: #FFF;
  border-radius: .25em .25em .4em .4em;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.is-visible .popup-container {
  transform:translateY(0);
  transition:500ms all;
}

.popup-container .popup-close {
    position: absolute;
    top: 8px;
    font-size: 0;
    right: 8px;
    width: 28px;
    height: 28px;
    background: #3B3B3B;
    border-radius: 50%;
}


.popup-container .popup-close::before,
.popup-container .popup-close::after {
    content: '';
    position: absolute;
    top: 13px;
    width: 12px;
    height: 2px;
    background-color: white;
}

.popup-container .popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}

.popup-container .popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}






.popup2 .popup-container {
    transform: translateY(0);
    transition: 500ms all;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}







input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
  border: 1px solid #F3F3F3;
  height: auto;
  margin: 0;
  outline: 0;
  padding: 8px;
  width: 100%;
  font: 400 14px / 28px 'Quicksand', sans-serif;
  color: #3B3B3B;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  margin-bottom: 10px;
}


.form-enquire {
  padding: 10px;
  color: #FFF;
  background-color: #F2A968;
  font: 600 14px / 20px 'Quicksand', sans-serif;
  text-align: center;
  text-transform:uppercase;
  width: 100%;
  border: 1px solid #F2A968;
  border-width: 1px 1px 3px;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
  margin-top: 20px;
}



.form-column2 label {
    font: 400 14px / 28px 'Quicksand', sans-serif;
    color: #3B3B3B;
    text-align: left;
    margin-left:6px;
}



.popup-form{
    text-align:left;
}







.col2, .col3{
    display: flex;
    gap: 5px;
    text-align: left;
    align-items: center;
}

.col2-1, .col3-1{
    width: 50%;
}

.col2-2{
    width: 50%;
}


.col3-2{
    width: 30%;
}

.col3-3{
    width: 20%;
}



::-ms-input-placeholder { 
  font: 400 14px / 28px 'Quicksand', sans-serif;
  color: #3B3B3B;
}

::placeholder {
  font: 400 14px / 28px 'Quicksand', sans-serif;
  color: #3B3B3B;
}



/*.responsive {*/
/*  width: 100%;*/
/*  max-width: 400px;*/
/*  height: auto;*/
/*}*/
