@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');



@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');







html {



  scroll-behavior:smooth;



}



*{



  margin: 0;



  padding: 0;



  box-sizing: border-box;



  font-family: 'Poppins', sans-serif;



}



/* custom scroll bar */



::-webkit-scrollbar {



    width: 10px;



}



::-webkit-scrollbar-track {



    background: #f1f1f1;



}



::-webkit-scrollbar-thumb {



    background: #2b2b2b;



}



::-moz-selection{



  background: rgb(0,123,255,0.3);



}



::selection{



  background: rgb(0,123,255,0.3);



}

.ikon {



  text-align: center;



  color: #F2F2F2;



  position: relative;



  top: 12px;



  right: 7px;



  



}

canvas {
  position:absolute;top:0;left:0
  background-image: linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
  background-image: -o-linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
  background-image: -moz-linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
  background-image: -webkit-linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
  background-image: -ms-linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
  background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(105,173,212)),
      color-stop(0.84, rgb(23,82,145))
  );
}



.ikonlar {



  position: relative;



  left: 1px;



  color:white;



}









.content{



  max-width: 1250px;



  margin: auto;



  padding: 0 30px;



}



i {



  padding-top:25px;



  padding-left: 15px;



}



.navbar{



  position: fixed;



  width: 100%;



  z-index: 2;



  padding: 25px 0;



  -webkit-transition:all 0.3s ease;



  transition: all 0.3s ease;



}



.navbar.sticky{



  background: #1b1b1b;



  padding: 10px 0;



  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);



}



.navbar .content{



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center;



  -webkit-box-pack: justify;



      -ms-flex-pack: justify;



          justify-content: space-between;



}



.navbar .logo a{



  color: #fff;



  font-size: 30px;



  font-weight: 600;



  text-decoration: none;



}



.fa-snowflake {
  color: #fff;
  position: absolute;
  top: -20px;
  animation: fall linear forwards;
}

@keyframes fall {
  to {
    transform: translateY(105vh);
  }
}
.navbar .menu-list{



  display: -webkit-inline-box;



  display: -ms-inline-flexbox;



  display: inline-flex;



}



.menu-list li{



  list-style: none;



}



.menu-list li a{



  color: #fff;



  font-size: 18px;



  font-weight: 500;



  margin-left: 25px;



  text-decoration: none;



  -webkit-transition:all 0.3s ease;



  transition: all 0.3s ease;



}



.menu-list li a:hover{



  color: #007bff;



}



.banner{



  background: black;



  height: 100vh;



  background-size: cover;



  background-position: center;



  background-attachment: fixed;



}







.team{



  padding: 30px 0;



  background-color: #1b1b1b;



  color: #f1f1f1;



  min-height: 1200px;



}







.about{



  padding: 30px 0;



}



.about .title{



  font-size: 38px;



  font-weight: 700;



}



.about p{



  



  text-align: justify;



}



.icon{



  color: #fff;



  font-size: 20px;



  cursor: pointer;



  display: none;



}



.menu-list .cancel-btn{



  position: absolute;



  right: 30px;



  top: 20px;



}



@media (max-width: 1230px) {



  .content{



    padding: 0 60px;



  }



}



@media (max-width: 1100px) {



  .content{



    padding: 0 40px;



  }



}



@media (max-width: 900px) {



  .content{



    padding: 0 30px;



  }



}



@media (max-width: 868px) {



  body.disabled{



    overflow: hidden;



  }



  .icon{



    display: block;



  }



  .icon.hide{



    display: none;



  }



  .navbar .menu-list{



    position: fixed;



    height: 100vh;



    width: 100%;



    max-width: 400px;



    left: -100%;



    top: 0px;



    display: block;



    padding: 40px 0;



    text-align: center;



    background: #222;



    -webkit-transition:all 0.3s ease;



    transition: all 0.3s ease;



  }



  .navbar.show .menu-list{



    left: 0%;



  }



  .navbar .menu-list li{



    margin-top: 45px;



  }



  .navbar .menu-list li a{



    font-size: 23px;



    margin-left: -100%;



    -webkit-transition:0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);



    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);



  }



  .navbar.show .menu-list li a{



    margin-left: 0px;



  }



}



@media (max-width: 380px) {



  .navbar .logo a{



    font-size: 27px;



  }



}







.binnerlogo{



  height: 70%;



  width: 100%;



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-pack: center;



      -ms-flex-pack: center;



          justify-content: center;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center;



}







.logoinner{



  padding:20px;



  height: auto;



  width: 60%;



  margin-top: 200px;



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-pack: center;



      -ms-flex-pack: center;



          justify-content: center;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center;



}







.loader-bar {



  width: 60vw;



  height: 12vw;



  display: -ms-grid;



  display: grid;



  -ms-grid-columns: (2vw)[3] (3vw 2vw)[10] (2vw)[2];



      grid-template-columns: repeat(3,2vw) repeat(10, 3vw 2vw) repeat(2,2vw);



  -ms-grid-rows: (2vw)[6];



      grid-template-rows: repeat(6,2vw);



}











@-webkit-keyframes blinky1 {



  99% {opacity: 0;}



  100% {opacity: 1;}



}











@keyframes blinky1 {



  99% {opacity: 0;}



  100% {opacity: 1;}



}







@-webkit-keyframes blinky2 {



  49% {opacity: 0;}



  50% {opacity: 1;}



  90% {opacity: 1;}



}







@keyframes blinky2 {



  49% {opacity: 0;}



  50% {opacity: 1;}



  90% {opacity: 1;}



}











.d{



  -webkit-animation: draw 2.5s infinite linear ;



          animation: draw 2.5s infinite linear ;



}



.d2 {



  -webkit-animation: draw 2.5s infinite linear ;



          animation: draw 2.5s infinite linear ;



}



 @-webkit-keyframes draw {



  to {



    stroke-dashoffset: 1000;



  }



}



 @keyframes draw {



  to {



    stroke-dashoffset: 1000;



  }



}











@-webkit-keyframes animate1 {



     to {



    stroke-dashoffset: 1000;



  }



}











@keyframes animate1 {



     to {



    stroke-dashoffset: 1000;



  }



}







.starting {



  margin: 20px;



  font-size: 36px;



  font-family: 'Press Start 2P', cursive;



}







.starting:after {



display: inline-block;



-webkit-animation: dotty steps(1,end) 3s infinite;



        animation: dotty steps(1,end) 3s infinite;



content: '';



}











@-webkit-keyframes dotty {



0%   { content: ''; }



25%  { content: '.'; }



50%  { content: '..'; }



75%  { content: '...'; }



100% { content: ''; }



}











@keyframes dotty {



0%   { content: ''; }



25%  { content: '.'; }



50%  { content: '..'; }



75%  { content: '...'; }



100% { content: ''; }



}















@-webkit-keyframes frame-animation {



  100% {



    -webkit-transform: translateX(-100%);



            transform: translateX(-100%);



  }



}















@keyframes frame-animation {



  100% {



    -webkit-transform: translateX(-100%);



            transform: translateX(-100%);



  }



}



.Animation {



  color: #fff;



  text-align: center;



  margin: 0 auto;



  max-width: 100px;



  overflow: hidden;



  font-size: 50px;



  margin-bottom: 20px;



}



.Animation-frames {



  -webkit-animation: frame-animation 500ms infinite;



          animation: frame-animation 500ms infinite;



  -webkit-animation-timing-function: steps(4);



          animation-timing-function: steps(4);



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  width: 400%;



}



.Animation-frame {



  display: block;



  width: 25%;



  max-width: 25%;



  -ms-flex-preferred-size: 25%;



      flex-basis: 25%;



}























.wrapper{



  margin-top: 60px;



  text-align: center;



  



}







.wrapper h1{



  font-family: 'Poppins', sans-serif;



  font-size: 48px;



  color: #fff;



  margin-bottom: 25px;



}







.our_team{



  width: auto;



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-pack: center;



      -ms-flex-pack: center;



          justify-content: center;



  -ms-flex-wrap: wrap;



      flex-wrap: wrap;



}







.our_team .team_member{



  overflow: hidden;



  width: 300px;



  margin: 20px;



  background: #fff;



  padding: 20px 10px;



  border-radius: 2%;



  max-height: 445px;



  height: -webkit-fit-content;



  height: -moz-fit-content;



  height: fit-content;



}







.our_team .team_member .member_img{



  background: #e9e5fa;  



  max-width: 190px;



  width: 100%;



  height: 190px;



  margin: 0 auto;



  border-radius: 50%;



  padding: 5px;



  position: relative;



  cursor: pointer;



}







.our_team .team_member .member_img img{



  width: 100%;



  height: 100%;



}



.our_team .team_member h3{



  text-transform: uppercase;



  font-size: 18px;



  line-height: 18px;



  letter-spacing: 2px;



  margin: 15px 0 0px;



  color: #0d3c89; 



}







.our_team .team_member span{



  font-size: 10px;



}







.our_team .team_member p{



  margin-top: 20px;



  font-size: 14px;



  line-height: 20px;



  color: #1b1b1b;



}











@-webkit-keyframes goingup{



  0%{



    -webkit-transform: translateY(0px);



            transform: translateY(0px);



  }



  100%{



    -webkit-transform: translateY(-65px);



            transform: translateY(-65px);



  }



}











@keyframes goingup{



  0%{



    -webkit-transform: translateY(0px);



            transform: translateY(0px);



  }



  100%{



    -webkit-transform: translateY(-65px);



            transform: translateY(-65px);



  }



}









.abouttm{



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-orient: vertical;



  -webkit-box-direction: normal;



      -ms-flex-direction: column;



          flex-direction: column;



  -webkit-box-pack: center;



      -ms-flex-pack: center;



          justify-content: center;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center;



}







.twinstabutton{



  width: 75px; 



  height: 75px; 



  background-color: #3879e3; 



  border-radius: 50%;



}















@-webkit-keyframes float {



  0% {



    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);



    -webkit-transform: translatey(0px);



            transform: translatey(0px);



  }



  50% {



    box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);



    -webkit-transform: translatey(-15px);



            transform: translatey(-15px);



  }



  100% {



    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);



    -webkit-transform: translatey(0px);



            transform: translatey(0px);



  }



}















@keyframes float {



  0% {



    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);



    -webkit-transform: translatey(0px);



            transform: translatey(0px);



  }



  50% {



    box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);



    -webkit-transform: translatey(-15px);



            transform: translatey(-15px);



  }



  100% {



    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);



    -webkit-transform: translatey(0px);



            transform: translatey(0px);



  }



}







@-webkit-keyframes floatwoshad {



  0% {



    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);



    -webkit-transform: translatey(0px);



            transform: translatey(0px);



  }



  50% {



    box-shadow: 0 15px 15px 0px rgba(0,0,0,0.3);



    -webkit-transform: translatey(-15px);



            transform: translatey(-15px);



  }



  100% {



    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);



    -webkit-transform: translatey(0px);



            transform: translatey(0px);



  }



}







@keyframes floatwoshad {



  0% {



    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);



    -webkit-transform: translatey(0px);



            transform: translatey(0px);



  }



  50% {



    box-shadow: 0 15px 15px 0px rgba(0,0,0,0.3);



    -webkit-transform: translatey(-15px);



            transform: translatey(-15px);



  }



  100% {



    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);



    -webkit-transform: translatey(0px);



            transform: translatey(0px);



  }



}











.blogtext{



  



  border-radius: 10px; 



  padding: 30px; 



  max-height: 800px; 



  max-width: 800px;



  overflow-y: hidden;



  scrollbar-color: #fff #fff;



  scrollbar-width: thin;



  



}







.blogtextb{



  overflow-y: auto;



  



  max-height: 800px;



}







.blogtextb::-webkit-scrollbar {



  margin-right: 10px;



  width: 8px;



}











.blogtextb::-webkit-scrollbar-track {



  background-color: #e4e4e4;



  border-radius: 100px;



  height: 100%;



  



}







.blogtextb::-webkit-scrollbar-thumb {



  border-radius: 100px;



  background-image: rgb(49, 49, 49);



  box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);



}







.blog{



   display: -webkit-box;



   display: -ms-flexbox;



   display: flex;



   -ms-flex-wrap: wrap;



       flex-wrap: wrap;



   min-height: 800px;



}







.bloginner{



  max-height: 100%;



  width: 100%;



  background-color: white;



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex; 



  -ms-flex-wrap: wrap; 



      flex-wrap: wrap;



  



  -webkit-box-pack: space-evenly;



  



      -ms-flex-pack: space-evenly;



  



          justify-content: space-evenly;



  



}







.blogileft{



  max-width:50%;



  background-color: #E63442; 



  -webkit-box-align: center; 



      -ms-flex-align: center; 



          align-items: center;



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex; 



  -webkit-box-orient: vertical; 



  -webkit-box-direction: normal; 



      -ms-flex-direction: column; 



          flex-direction: column; 



  vertical-align: middle;



  -webkit-box-pack: center;



      -ms-flex-pack: center;



          justify-content: center; 



  min-width: 40%;







}











.topmedium{



  height:10%; 



  background-color:white;



  color: #1b1b1b;



  min-width: -webkit-fit-content;



  min-width: -moz-fit-content;



  min-width: fit-content; 



  padding: 15px;



  border-radius: 15px; 



  position: relative; 



  top: 32px; 



  -webkit-animation: floatwoshad 6s ease-in-out infinite; 



          animation: floatwoshad 6s ease-in-out infinite; 



  z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex;



  



}







.mediumblog{



  max-height:-webkit-fit-content;



  max-height:-moz-fit-content;



  max-height:fit-content;



  



  background-color: white;



  min-width: 60%; 



  border-radius: 5px; 



  -webkit-animation: float 6s ease-in-out infinite; 



          animation: float 6s ease-in-out infinite; 



  padding: 25px; 



  padding-top: 45px;



  padding-bottom: 45px;



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center; 



  -webkit-box-pack: center; 



      -ms-flex-pack: center; 



          justify-content: center; 



  -webkit-box-orient: vertical; 



  -webkit-box-direction: normal; 



      -ms-flex-direction: column; 



          flex-direction: column;



}











.pseudotextdiv{



  height:-webkit-fit-content;



  height:-moz-fit-content;



  height:fit-content; 



  background-color: #fff; 



  width: 100%; 



  border-top-left-radius: 15px;



  border-top-right-radius: 15px; 



  display: -webkit-box; 



  display: -ms-flexbox; 



  display: flex;



  -webkit-box-orient: vertical;



  -webkit-box-direction: normal;



      -ms-flex-direction: column;



          flex-direction: column;



  border-radius: 5px;



  



  margin-top: 15px;



  min-width: -webkit-max-content;



  min-width: -moz-max-content;



  min-width: max-content;



}







.takememedium{



  min-height: 20%;



  cursor: pointer;



  background-image: -webkit-linear-gradient(rgb(10, 163, 187), rgb(10, 90, 187));



  background-image: linear-gradient(rgb(10, 163, 187), rgb(10, 90, 187));



  width: 100%;



  margin-top: 5px; 



  border-bottom-left-radius: 25px;



  border-bottom-right-radius: 25px; 



  display: -webkit-box; 



  display: -ms-flexbox; 



  display: flex; 



  -webkit-box-pack: center; 



      -ms-flex-pack: center; 



          justify-content: center; 



  -webkit-box-align: center; 



      -ms-flex-align: center; 



          align-items: center;



  padding: 3px;



  -webkit-transition:background-image 2s;



  transition: background-image 2s;



}















.takememedium:active{



  -webkit-transform: translateY(2px);



          transform: translateY(2px);



}















.mediumbutton{



  color:antiquewhite; 



  min-width: -webkit-max-content; 



  min-width: -moz-max-content; 



  min-width: max-content;



  font-weight: 700;



}







.blogiright{



  max-width:50%;



  background-color: #E63442; 



  text-align: center; 



  padding: 20px; 



  display: -webkit-box; 



  display: -ms-flexbox; 



  display: flex; 



  -webkit-box-align: center; 



      -ms-flex-align: center; 



          align-items: center; 



  -webkit-box-orient: vertical; 



  -webkit-box-direction: normal; 



      -ms-flex-direction: column; 



          flex-direction: column; 



  -webkit-box-pack: center; 



      -ms-flex-pack: center; 



          justify-content: center; 



  min-width: -webkit-fit-content; 



  min-width: -moz-fit-content; 



  min-width: fit-content;



}







.blogiright > h1{



  color: #fff;



}







.contact{



  



  display: -webkit-box;



  



  display: -ms-flexbox;



  



  display: flex;



  -ms-flex-wrap: wrap;



      flex-wrap: wrap;



}







.contactinner{



  height: 100%;



  width: 100%;



  background-color:#007bff;



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex; 



  -ms-flex-wrap: wrap; 



      flex-wrap: wrap;



  -webkit-box-pack: space-evenly;



      -ms-flex-pack: space-evenly;



          justify-content: space-evenly;







}







.contactleft{



  



  background-color:cadetblue; 



  -webkit-box-align: center; 



      -ms-flex-align: center; 



          align-items: center;



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex; 



  -webkit-box-orient: vertical; 



  -webkit-box-direction: normal; 



      -ms-flex-direction: column; 



          flex-direction: column; 



  vertical-align: middle;



  -webkit-box-pack: center;



      -ms-flex-pack: center;



          justify-content: center; 



  min-width: 40%;



}







.contactright{



  max-width:50%;



  background-color: coral; 



  text-align: center; 



  padding: 20px; 



  display: -webkit-box; 



  display: -ms-flexbox; 



  display: flex; 



  -webkit-box-align: center; 



      -ms-flex-align: center; 



          align-items: center; 



  -webkit-box-orient: vertical; 



  -webkit-box-direction: normal; 



      -ms-flex-direction: column; 



          flex-direction: column; 



  -webkit-box-pack: center; 



      -ms-flex-pack: center; 



          justify-content: center;



  min-width: -webkit-fit-content;



  min-width: -moz-fit-content;



  min-width: fit-content; 



  max-height: 800px;



}







.contactp1{



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-orient: horizontal;



  -webkit-box-direction: normal;



      -ms-flex-direction: row;



          flex-direction: row;



  -webkit-box-pack: space-evenly;



      -ms-flex-pack: space-evenly;



          justify-content: space-evenly;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center;



  min-width: 100%;



  background-color: brown;



  min-height: 200px;



  max-height: -webkit-fit-content;



  max-height: -moz-fit-content;



  max-height: fit-content;



}



.contactp2{



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-orient: horizontal;



  -webkit-box-direction: normal;



      -ms-flex-direction: row;



          flex-direction: row;



  -webkit-box-pack: space-evenly;



      -ms-flex-pack: space-evenly;



          justify-content: space-evenly;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center;



  min-width: 100%;



  background-color:darkorange;



  min-height: 200px;



  max-height: -webkit-fit-content;



  max-height: -moz-fit-content;



  max-height: fit-content;



}



.contactp3{



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-orient: horizontal;



  -webkit-box-direction: normal;



      -ms-flex-direction: row;



          flex-direction: row;



  -webkit-box-pack: space-evenly;



      -ms-flex-pack: space-evenly;



          justify-content: space-evenly;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center;



  min-width: 100%;



  background-color:purple;



  min-height: 200px;



  max-height: -webkit-fit-content;



  max-height: -moz-fit-content;



  max-height: fit-content;



}







.p1text{



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center;



  -webkit-box-pack: center;



      -ms-flex-pack: center;



          justify-content: center;



  max-width: 55%;



  height: 50%;



  min-width: -webkit-max-content;



  min-width: -moz-max-content;



  min-width: max-content;



  padding: 10px;



  background-color: aqua;



  border-radius: 10px;



}







.linep0{



  margin: 10px;



  min-width:50px;



  max-width: -webkit-max-content;



  max-width: -moz-max-content;



  max-width: max-content;



  height: 8px;



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-orient: horizontal;



  -webkit-box-direction: normal;



      -ms-flex-direction: row;



          flex-direction: row;



  -webkit-box-pack: center;



      -ms-flex-pack: center;



          justify-content: center;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center;



  border-radius: 4px;



}











.linep1{



  min-width:75px;



  height: 8px;



  max-width: -webkit-max-content;



  max-width: -moz-max-content;



  max-width: max-content;



 



  display: -webkit-box;



 



  display: -ms-flexbox;



 



  display: flex;



  -webkit-box-orient: horizontal;



  -webkit-box-direction: normal;



      -ms-flex-direction: row;



          flex-direction: row;



  -webkit-box-pack: center;



      -ms-flex-pack: center;



          justify-content: center;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center;



}







.quarterblock{



  min-width: 25%;



  height: 50%;



  background-color: aqua;



  border-top-left-radius: 10px;



  border-bottom-left-radius: 10px;



}







.quarterblock2{



  width: 25%;



  height: 50%;



  background-color: aqua;



  border-top-right-radius: 10px;



  border-bottom-right-radius: 10px;



}







.genesiscontact{



  height: 70%;



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-pack: center;



      -ms-flex-pack: center;



          justify-content: center;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center;



  -webkit-box-orient: vertical;



  -webkit-box-direction: normal;



      -ms-flex-direction: column;



          flex-direction: column;



  



  width: 100%;



  border-radius: 5px;



}







.genesistoppart{



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-pack: center;



      -ms-flex-pack: center;



          justify-content: center;



  -webkit-box-orient: vertical;



  -webkit-box-direction: normal;



      -ms-flex-direction: column;



          flex-direction: column;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center;



  border-radius: 5px;



  height: 20%;



  width: 100%;



  background-color:teal;



}







.genesisbottompart{



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-pack: center;



      -ms-flex-pack: center;



          justify-content: center;



  -webkit-box-orient: vertical;



  -webkit-box-direction: normal;



      -ms-flex-direction: column;



          flex-direction: column;



  -webkit-box-align: center;



      -ms-flex-align: center;



          align-items: center;



  border-bottom-left-radius: 5px;



  border-bottom-right-radius: 5px;



  height: 80%;



  width: 80%;



  background-color: beige;



}







.weightline{



  width:40%;



  height: 8px;



  background-color: aqua;



  



}







.highlinestart{



  width:15px;



  height: 15px;



  background-color: aqua;



  border-radius: 4px;



}







.highlineend{



  width:15px;



  height: 15px;



  background-color: aqua;



  border-radius: 4px;



}







#button-addon1 {



  color: #2155CD;



}







i {



  color: #2155CD;



}







.form-control::-webkit-input-placeholder {



  font-size: 0.95rem;



  color: #2155CD;



  font-style: italic;



}







.form-control::-moz-placeholder {



  font-size: 0.95rem;



  color: #2155CD;



  font-style: italic;



}







.form-control:-ms-input-placeholder {



  font-size: 0.95rem;



  color: #2155CD;



  font-style: italic;



}







.form-control::placeholder {



  font-size: 0.95rem;



  color: #2155CD;



  font-style: italic;



}







.form-control.shadow-0:focus {



  box-shadow: none;



}







.footerinner > div{



  color: white;



}