.form-btn{
    transform: rotate(90deg);
    background: #80c64a;
    background: -webkit-linear-gradient(45deg, #56ab2f, #82B724);
    background: -o-linear-gradient(45deg, #56ab2f, #82B724);
    background: -moz-linear-gradient(45deg, #56ab2f, #82B724);
    background: linear-gradient(45deg, #56ab2f, #82B724);    
    overflow: hidden; 
    padding: 10px 20px;
    top:350px;
    right: -55px;           
    color: #fff;
    overflow: hidden;
    z-index: 999;
    cursor: pointer;    
    position: fixed;
    text-decoration: none;
    transition: all ease 0.2s;
    -webkit-transition: all ease 0.2s;  
}
/*writing-mode: vertical-rl;
text-orientation: upright;*/
.form-btn:hover{
    padding: 15px 25px;
    color: #fff;
    background: #80c64a;
    text-decoration: none; 
    transition: all ease 0.2s;
    -webkit-transition: all ease 0.2s;
}
.form-btn i{
 transform: rotate(-90deg);
}

.form-group 			  { 
  position:relative; 
  margin-bottom:30px; 
}
input{

  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom: 1px solid #888;
  background: transparent;
  color: #000;
}
input:focus 		{ outline:none; }

textarea{

  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom: 1px solid #888;
  background: transparent;
  color: #000;
}
textarea:focus 		{ outline:none; }

select{

  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom: 1px solid #888;
  background: transparent;
  color: #000;
}
select:focus 		{ outline:none; }

option{
	color: #000;
}
input::-webkit-input-placeholder { color: #888;}
input:-moz-placeholder { color: #888;}
input::-moz-placeholder { color: #888;}
input:-ms-input-placeholder { color: #888;}

textarea::-webkit-input-placeholder { color: #888;}
textarea:-moz-placeholder { color: #888;}
textarea::-moz-placeholder { color: #888;}
textarea:-ms-input-placeholder { color: #888;}
/* LABEL ======================================= */
label 				 {
  color:#fff; 
  font-size:16px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label		{
  top:-20px;
  font-size:14px;
  color:#d4d4d4;
}

/* active state */
textarea:focus ~ label, textarea:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#fff;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; }
.bar:before, .bar:after 	{
  content:'';
  height:1px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#000; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}
/* active state */
textarea:focus ~ .bar:before, textarea:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* active state */
textarea:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes textareatHighlighter {
	from { background:#888; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes textareaHighlighter {
	from { background:#888; }
  to 	{ width:0; background:transparent; }
}
@keyframes textareaHighlighter {
	from { background:#888; }
  to 	{ width:0; background:transparent; }
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#888; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#888; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#888; }
  to 	{ width:0; background:transparent; }
}
#text1{
display:none;
}
#text2{
display:none;
}

.contact-card {
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contact-form .form-group {
  margin-bottom: 1.5rem;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  background: #fff;
  padding: 1rem 1rem 0.75rem;
  font-size: 15px;
  color: #212121;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: #56ab2f;
  box-shadow: 0 0 0 3px rgba(86, 171, 47, 0.12);
}

.contact-form label {
  position: absolute;
  left: 1rem;
  top: 0.9rem;
  color: #7a7a7a;
  font-size: 0.95rem;
  background: #fff;
  padding: 0 0.35rem;
  transition: all 0.2s ease;
}

.contact-form input:focus + label,
.contact-form input:not(:placeholder-shown) + label,
.contact-form textarea:focus + label,
.contact-form textarea:not(:placeholder-shown) + label,
.contact-form select:focus + label,
.contact-form select:valid + label {
  top: -0.55rem;
  font-size: 0.78rem;
  color: #56ab2f;
}

.btn-contact-submit {
  background: #0F613D;
  background: linear-gradient(45deg, #0F613D, #178157);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.9rem 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 20px rgba(86, 171, 47, 0.18);
}

.btn-contact-submit:hover,
.btn-contact-submit:focus {
  color: #fff;
  box-shadow: 0 12px 24px rgba(15, 97, 61, 0.24);
  transform: translateY(-1px);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #0F613D;
  box-shadow: 0 0 0 3px rgba(15, 97, 61, 0.12);
}

.contact-form input:focus + label,
.contact-form input:not(:placeholder-shown) + label,
.contact-form textarea:focus + label,
.contact-form textarea:not(:placeholder-shown) + label,
.contact-form select:focus + label,
.contact-form select:valid + label {
  color: #0F613D;
}

.contact-item a {
  color: inherit;
  text-decoration: none;
}

.contact-item a:hover {
  text-decoration: underline;
}
