section.contact {
   height: 100%;
   padding: 10vh 10vw;
}

section.contact::before {
   position: absolute;
   content: '';
   width: 100%;
   height: 100%;
   background-color: #f8f8f8;
   top: calc(100vh - 50vh);
   left: 0;
}

.bg_cont {
   position: absolute;
   width: 100%;
   /* height: 70vh; */
   height: calc(100vh - 50vh);
   top: 0;
   left: 0;
   /* background: #f8f8f8; */
   /* background: linear-gradient(to left, #005197, #339f5b) !important; */
   overflow: hidden;
}

:root {
   --bg: #f8f8f8;
   --text: #151515;
   --blue: #005197;
   --green: #339f5b;
 }
 
 
 body {
   background-color: var(--bg) !important;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }
 
 
 body::before,
 body::after {
   position: absolute;
   left: 0;
   top: 0;
   content: '';
   width: 100%;
   height: 100%;
   z-index: -1;
 
   opacity: 40%;
 }
 
 body::before {
   background: #8C8C8C;
   filter: url(#noiseFilter);
 }

 .hero {
   width: 100%;
   height: 100%;
 }
 
 
 /* Blobs */
 .blob-cont {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: -2;
   position: absolute;
    right: 5em;
    width: 30vw;
    height: 30vw;
 }
 
 
 .blob {
   border-radius: 100px;
   filter: blur(60px);
 }
 
 .blue {
   background-color: var(--blue);
   position: absolute;
   top: 200px;
   left: 100px;
   height: 300px;
   width: 300px;
   
   animation: blue 8s infinite ease;
 }
 
 .green {
   background-color: var(--green);
   position: absolute;
   top: 80px;
   right: -20px;
   height: 200px;
   width: 250px;
   
   animation: green 8s infinite ease;
 }
 
 
 @keyframes blue {
   0% {top: 200px; left: 100px; transform: scale(1);}
   30% {top: 300px; left: 150px; transform: scale(1.2);}
   60% {top: 100px; left: 200px; transform: scale(1.3);}
   100% {top: 200px; left: 100px; transform: scale(1);}
 }
 
 @keyframes green {
   0% {top: 80px; right: -20px; transform: scale(1.2);}
   30% {top: 300px; right: -20px;transform: scale(1);}
   60% {top: 200px; right: 100px;transform: scale(1);}
   100% {top: 80px; right: -20px; transform: scale(1.2);}
 }
 
//  @media only screen and (max-width: 1000px) {
//    body {
//      margin: 1em;
//    }
//  }




















.con_map {
   position: relative;
   /* border: 1px solid red; */
}

.txt-head span {
   color: #005197;
}

.txt-head span.mobile {
   display: none;
}

.map {
   /* border: 1px solid pink; */
   filter: grayscale(1);
   transition: all 0.5s ease;
}

.map:hover {
   filter: grayscale(0);
}

iframe {
   /* height: 80vh; */
   height: calc(100vh - 50vh);
   border: none;
}

/* contact us */
.con_us {
   /* border: #339f5b solid 1px; */
   margin-top: 2em;
   padding: 0 2em;

   display: flex;
   flex-direction: column;
   align-items: center;
}

.head_con {
   color: #005197 !important;
   text-align: center;
   font-family: 'Lato', sans-serif;
   font-size: 2.6rem !important;
   text-transform: none !important;
   letter-spacing: 2px !important;
}

.head_con b {
   background: linear-gradient(to right, #339f5b 0%, #005197 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-weight: 900;
}

.in_cont {
   display: flex;

   width: 60vw;
}

.text_cont,
.form_cont {
   width: 100%;
   padding: 0 2em;

   /* border: 1px solid rebeccapurple; */
}

.text_cont {
   display: flex;
   /* justify-content: center; */
   flex-direction: column;
   padding-top: 5rem;
}

.loca {
   margin-bottom: 1rem;
   line-height: 1.15;
}

.T,
.M {
   background: linear-gradient(to right, #339f5b 0%, #005197 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-weight: 600;
}

.form_cont form {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

/* .form_cont t {
   width: 100%;
   text-transform: capitalize;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1px;
   color: #005197;
   transform: translate(7px, 40px);
   transition: all 500ms ease;
}

.form_cont t:hover {
   transform: none;
}

#name,
#email,
#message {
   border: 10px solid;
   border-image-slice: 1;
   border-width: 2px;
   border-image-source: linear-gradient(to left, #005197, #339f5b, #005197);
   margin: 10px 0;
}

#name,
#email,
#message {
   border-left: 0;
   border-right: 0;
   border-top: 0;

   padding: 5px;
} */





.form_cont .form-input-material {
   margin: 25px 0;
   width: 100%;
 }
.form_cont input {
   color: #005197;
 }
.form_cont button,
.form_cont input {
   font: inherit;
   outline: none;
 }
 
 .form-input-material {
   position: relative;
   border: 10px solid;
   border-top: 0;
   border-left: 0;
   border-right: 0;
   border-image-slice: 1;
   border-width: 2px;
   border-image-source: linear-gradient(to left, #005197, #339f5b, #005197);
   margin: 10px 0;
 }
 .form-input-material::before {
   position: absolute;
   content: "";
   left: 0;
   bottom: -1px;
   width: 100%;
   height: 2px;
   background-color: var(--primary-color);
   transform: scaleX(0);
   transform-origin: center;
   transition: 0.5s;
 }
 .form-input-material:focus-within::before {
   transform: scaleX(1);
 }
 .form-input-material .form-control-material {
   padding: 0.5rem 0;
   background: none;
   border: none;
 }
 .form-input-material .form-control-material:focus ~ label, .form-input-material .form-control-material:not(:placeholder-shown) ~ label {
   transform: translateY(-110%) scale(0.8);
   color: var(--primary-color);
 }
 .form-input-material label {
   position: absolute;
   top: 0.5rem;
   left: 0;
   transition: 0.3s;
   transform-origin: left;
   font-family: 'Lato', sans-serif;
   text-transform: capitalize;
   color: #005197;
 }
 
 .btn-ghost {
   --btn-color: var(--primary-color);
   --btn-border-color: var(--primary-color);
   background: none;
   transition: 0.3s;
   overflow: hidden;
   color: var(--btn-color);
   border: 1px solid var(--btn-border-color);
 }
 .btn-ghost::before {
   position: absolute;
   content: "";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(120deg, transparent, var(--primary-color), transparent);
   transform: translateX(-100%);
   transition: 0.6s;
 }


















#submit {
   /* width: fit-content; */
   /* padding: 5px 10px; */
   /* font-size: 14px; */
   /* font-weight: 600; */
   text-transform: uppercase;
   letter-spacing: 1px;
   cursor: pointer;

}



p {
   font-family: 'Lato', sans-serif;
   /* font-weight: 300; */
   /* text-align: center; */
   /* font-size: 18px; */
   /* color: #676767; */
}

.frame {
   width: 90%;
   margin: 40px auto;
   text-align: center;
}

.custom-btn {
   color: #005197;
   border-radius: 12px;
   padding: 3px;
   font-weight: 600;
   background: transparent;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   display: inline-block;
   /* box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
      7px 7px 20px 0px rgba(0, 0, 0, .1),
      4px 4px 5px 0px rgba(0, 0, 0, .1); */
   outline: none;
}



/* 6 */
.btn-6 {
   background: #005197;
   background: linear-gradient(to bottom, #339f5b 0%, #005197 100%);
}

/* .btn-6 {
   background: #005197;
   background: linear-gradient(to right, #339f5b 0%, #005197 100%);
   line-height: 42px;
   padding: 0;
   border: none;
} */

.btn-6 span {
   position: relative;
   font-family: 'Lato';
   /* font-weight: 600; */
   display: block;
   width: 100%;
   height: 100%;
   background-color: #fff;
   border-radius: 10px;
   padding: 5px 10px;
   transition: all 500ms ease;
}

.btn-6:before,
.btn-6:after {
   position: absolute;
   content: "";
   height: 100%;
   width: 1px;
   box-shadow:
      -1px -1px 20px 0px rgba(255, 255, 255, 1),
      -4px -4px 5px 0px rgba(255, 255, 255, 1),
      7px 7px 20px 0px rgba(0, 0, 0, .4),
      4px 4px 5px 0px rgba(0, 0, 0, .3);
}

.btn-6:before {
   right: 0;
   top: 0;
   transition: all 500ms ease;
}

.btn-6:after {
   left: 0;
   bottom: 0;
   transition: all 500ms ease;
}

.btn-6:hover {
   /* background: transparent; */
   color: #fff;
   box-shadow: none;
   background: linear-gradient(to left, #339f5b 0%, #005197 100%);
}

.btn-6:hover span {
      background: transparent;

}

.btn-6:hover:before {
   transition: all 500ms ease;
   height: 100%;
}

.btn-6:hover:after {
   transition: all 500ms ease;
   height: 100%;
}

.btn-6 span:before,
.btn-6 span:after {
   position: absolute;
   content: "";
   box-shadow:
      -1px -1px 20px 0px rgba(255, 255, 255, 1),
      -4px -4px 5px 0px rgba(255, 255, 255, 1),
      7px 7px 20px 0px rgba(0, 0, 0, .4),
      4px 4px 5px 0px rgba(0, 0, 0, .3);
}

.btn-6 span:before {
   left: 0;
   top: 0;
   width: 100%;
   height: .5px;
   transition: all 500ms ;
}

.btn-6 span:after {
   right: 0;
   bottom: 0;
   width: 100%;
   height: .5px;
   transition: all 500ms ;
}

.btn-6 span:hover:before {
   width: 0;
}

.btn-6 span:hover:after {
   width: 0;
}

.btn-6:hover:before,
.btn-6:hover:after {
   height: 0;
}

@media (max-width: 440px) {
   .text_cont {
      display: none;
   }
}














section.test-motion {
   width: 0;
   position: relative;
   height: 0;
   background: red;
   padding: 0;
}

.c-scroll_item-testY {
   width: 100%;
   height: 100%;
   border: #151515 solid;
}


.c-scroll_item-testY span {

   width: 200px;
   height: 200px;
}

.js-parallax-mouse {
   width: 100%;
   height: 100%;
}

.tt {
   background-color: #005197;
}

.ttt {
   background-color: #339f5b;
}

.tttt {
   background-color: aqua;
}

.o-title-testY {
   width: 100%;
   height: 100%;
}



.list {
   list-style-type: none;
   // position: relative;
   // display: flex;
   // justify-content: center;
   // align-items: center;
   // width: 100%;
   // height: 100%;

   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: -2;
   position: absolute;
   // right: 15em;
   width: 100%;
   height: 100%;
 }
 
 .list .item {
   position: absolute;
   display: block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
   filter: blur(150px);
   text-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
   backface-visibility: hidden;
 }
 
 .list .item-01 {
   background-color: var(--blue);
    position: absolute;
    top: 200px;
    left: 40%;
    height: 800px;
    width: 800px;
   //  transition: all 0.3s;
 }
 
 .list .item-02 {
   background-color: var(--green);
   position: absolute;
   top: 600px;
   right: 20px;
   height: 500px;
   width: 500px;
   // transition: all 0.2s;
 }
 
//  .list .item-03 {
//    border: 3px solid #FF6F91;
//  }
 
//  .list .item-04 {
//    border: 3px solid #FF9671;
//  }
 
//  .list .item-05 {
//    border: 3px solid #FFC75F;
//  }
 
//  .list .item-06 {
//    border: 3px solid #F9F871;
//  }
 
//  .list .item-07 {
//    border: 3px solid #B8E067;
//  }
 
//  .list .item-08 {
//    border: 3px solid #86DDBB;
//  }