:root {
  --primary: #476C73;
  --hover: #0B1B1E;
  --active: #0B1B1E;
  --bg: #E2EBE9;
  --heading: #476C73;
  --text: #99BDBB ;
}

/*-------------------------------------
   :: HTML
-------------------------------------*/
*{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  margin: margin('m-0');
  padding: padding('p-0');
}

*, *::after, *::before{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  margin: margin('m-0');
  padding: padding('p-0');
}

html{
  overflow-x: hidden;
}

/*-------------------------------------
   :: Body
-------------------------------------*/
body{
  font-size: 1rem;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", Lato, Montserrat, Oswald, "Source Sans Pro", Raleway, Roboto Slab, Playfair Display, Nunito, "Helvetica Neue", Arial, "Noto Sans", sans-serif, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/*-------------------------------------
   :: headinging Style
-------------------------------------*/
h1, h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5 {
  font-size: 26px;
  margin-bottom: 50px;
  margin-top: 0;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 1px;
  transition: color, 0.4s, ease-in-out;
  text-transform: capitalize;
  color: var(--heading);
  text-align: center;
}

p{
  font-size: 14px;
  line-height: 1.75;
  font-weight: 400;
  color: var(--text);
  text-align: center;
}

a{
  color: var(--primary);
  text-decoration: none;
  transition: color 0.4s ease-in-out;
  outline: 0;
  font-weight: 500;
}

a:hover{
  color: var(--hover);
}

a:focus{
  outline: 0;
  text-decoration: none;
  color: var(--active);
}

/* st1 */
.modal .heading{
  margin-bottom: 15px;
}
.modal .txt{
  font-size: 16px;
  margin-bottom: 0;
}
/*-------------------------------------
   :: modal
-------------------------------------*/
.modal{
  display: none;
  opacity: 0;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4);
}

.modal.fade{
  display: block;
  opacity: 1;
  animation: fadeIn 0.4s; ease-in-out forwards;
  -webkit-animation: fadeIn 0.4s; ease-in-out forwards;
}

/* Add Animation */
@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

.flex{
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-box{
  background: var(--bg);
  width: 407px;
  height: auto;
  padding: 20px 20px;
}

.modal-content{
  margin-top: 20px;
}

form{
  display: block;
  margin-top: 20px;
}

.form-group{
  width: 100%;
  margin-right: 20px;
}

.modal-header{
  text-align: right;
}

.modal-header svg{
  width: 24px;
  height: 24px;
  cursor: pointer;
  fill: var(--heading);
  transition: fill 0.4s ease-in-out;
}

.modal-header svg:hover{
  fill: var(--primary);
}

.modal-logo{
  text-align: center;
  margin-bottom: 30px;
}

.modal-img{
  display: flex;
  justify-content: center;
  width: 814px;
  transform: translate(20px, 20px);
  animation: slideIn 0.4s ease-in-out forwards;
  -webkit-animation: slideIn 0.4s ease-in-out forwards;
}

@-webkit-keyframes slideIn {
  from {transform: translate(20px, 20px); opacity: 0} 
  to {transform: translate(0,0); opacity: 1}
}

@keyframes slideIn {
  from {transform: translate(20px, 20px); opacity: 0}
  to {transform: translate(0,0); opacity: 1}
}

.modal-img .img{
  width: 407px;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.policy{
  margin-bottom: 0;
}
/*-------------------------------------
   :: Buttons
-------------------------------------*/
button,
[type="button"],
[type="submit"]{
  display: inline-block;
  padding: 0.75rem 1.125rem;
  width: 100%;
  height: 50px;
  font-size: 14px;
  text-transform:uppercase;  
  color: var(--bg); 
  transition: all 0.4s ease-in-out;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  border-radius: 0.25rem;
  margin-top: 20px;
  background-color: var(--primary);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

button:hover,
[type="button"]:hover,
[type="submit"]:hover{
  background-color: var(--hover);
}

button:focus,
[type="button"]:focus,
[type="submit"]:focus{
  background-color: var(--active);
}

button:active,
[type="button"]:active,
[type="submit"]:active,{
  background-color: va(--active);
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{
  border: 0;
}

/*-------------------------------------
   :: Forms
-------------------------------------*/
input[type="text"], 
input[type="email"], 
textarea{
  font-size: 14px;
  display: block;
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: 50px;
  padding: 1.25em;
  background: white;
  outline: none;
  background-clip: padding-box;
  border-radius: 0.25rem;
  border: none;
  border-bottom: none; 
  color: var(--text);  
  transition: all 0.4s ease-in-out;
  font-weight: 400;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

input[type="text"]:hover,
input[type="email"]:hover,
textarea:hover{
  border-color: var(--primary);
}

input[type="text"]:focus, 
input[type="email"]:focus, 
textarea:focus{
  border-color: var(--active);
}

input[type="text"]:hover::-webkit-input-placeholder, 
input[type="email"]:hover::-webkit-input-placeholder, 
textarea:hover::-webkit-input-placeholder{
  color: var(--heading);  
}


input[type="text"]:hover::-moz-placeholde,
input[type="email"]:hover::-moz-placeholde,
textarea:hover::-moz-placeholder{
  color: var(--heading); 
}


input[type="text"]:hover::-ms-input-placeholder,
input[type="email"]:hover::-ms-input-placeholder,
textarea:hover::-ms-input-placeholder{
  color: var(--heading); 
}


input[type="text"]:hover::-moz-placeholder,
input[type="email"]:hover::-moz-placeholder,
textarea:hover::-moz-placeholder{
  color: var(--heading); 
}

/*-------------------------------------
   :: Mobile 
-------------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 578px)and (orientation: Portrait){
  .modal-box{
    width: 100%;
    margin: 0 16px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 987px)and (orientation: Portrait){
  .modal-img .img{
    display: none;
  }
}
@media only screen and (min-width: 320px) and (max-width: 987px)and (orientation: Landscape){
  .modal-img .img{
    display: none;
  }
}