/*=========
fonts
===========*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: "Archia-Regular";
    src: url(fonts/Archia-Regular.otf)
}

body {	
     font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;    
	background: #fff;
	color: #FFFFFF;	
}

a {
    display: inline-block;
    text-decoration: none;
    transition: 0.2s all ease;
    -webkit-transition: 0.2s all ease;
    -moz-transition: 0.2s all ease;
}

a:visited,
a:hover,
a:active {
    text-decoration: none;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
}

::selection {
    color: white; 
    background: #ff7675;
}

::-webkit-selection {
    color: white; 
    background: #ff7675;
}

::-moz-selection {
    color: white; 
    background: #7b6969;
}

/*scrollto-top*/
.scrollto-top {
    width: 40px;
    height: 40px;
    border-radius: 20px 20px 0 0;
    background: rgba(0,0,0,.5);   
    text-align: center;
    padding-top: 8px;
    font-size: 22px;
    color: #ffffff;
    position: fixed;
    right: 5px;
    bottom: 5px;
    display: none;
    transition: 0.2s all ease;
    -webkit-transition: 0.2s all ease;
    -moz-transition: 0.2s all ease;
}

.scrollto-top:hover {   
    background: #000;
    color: #fff;
    box-shadow: 0px 0px 5px rgba(0,0,0,.5);
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
}

/*hero-area start*/
/* hero section css start here */
.hero_Section {
    min-height: 100vh;
    background-color: #161616;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero_content h1 {
    font-family: "Archia-Regular";
    font-size: 95px;
    font-weight: 200;
    color: #fff;
    text-align: center;
    letter-spacing: 22px;
    text-indent: 20px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 60px;
    line-height: 85px;
}

.hero_content > h6 {
    font-family: "Montserrat", sans-serif;
    text-align: center;
    letter-spacing: 4px;
    margin-top: 20px;
    margin-bottom: 40px;
    font-size: 22px;
    font-weight: 300;
    line-height: 30px;
}


.hero_content > button {
    font-family: "Montserrat", sans-serif;
  text-align: center;
  background-color: #0000;
  border: 1px solid #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 46px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 300;
  line-height: 20px;
  transition:all;
  display: flex;
  color: #fff;
}


.hero-button  {
 
     text-align: center;
}


.hero-button a {
     color: #ffffff;
  font-size: 12px;
  bottom: 2px solid #ffffff;
  padding:12px 31px 12px;
  border-radius:10px;
  text-decoration: none;
    border: 1px solid #ffffff;
    box-sizing: border-box;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    outline: 3px solid #161616;
    letter-spacing: 2px;
}

.hero-button a:hover {
  outline: 2px solid #fff;
}




.hero-a {
    text-align: center;
    margin-bottom: 12px;
}

.hero-a a {
    color: #ffffff;
  font-size: 12px;
  bottom: 2px solid #ffffff;
  padding:13px 36px 13px;
  border-radius:10px;
  justify-content: center;
  border:1px solid #EAEAEA;
  /*! transition:0.3s; */

    /*! transition: all 0.3s ease; */
    /*! box-sizing: border-box; */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
    text-decoration: none;
    box-sizing: border-box;
    outline: 3px solid #161616;
    letter-spacing: 2px;
}

.hero-a  a:hover {
 
     outline: 3px solid #fff;
}

.hero_content > button:hover {
   
    border-width: 2px;
}

.hero_Section .eye_bg img.eye_1 {
    width: 10vw;
    position: absolute;
    inset: 22% auto auto 11%;
}

.hero_Section .eye_bg img.eye_2 {
    width: 8vw;
    position: absolute;
    inset: 10% auto auto 36%;
}

.hero_Section .eye_bg img.eye_3 {
    width: 6.5vw;
    position: absolute;
    inset: 22% 36% auto auto;
}

.hero_Section .eye_bg img.eye_4 {
    width: 8vw;
  position: absolute;
  inset:
10% 10% auto auto;
}

.hero_Section .eye_bg img.eye_5 {
    width: 9.5vw;
  position: absolute;
  inset:
34% 2% auto auto;
}

.hero_Section .eye_bg img.eye_6 {
    width: 7.5vw;
  position: absolute;
  inset:
auto auto 35% 8%;
}

.hero_Section .eye_bg img.eye_7 {
    width: 10vw;
  position: absolute;
  inset:
auto auto 10% 23%;
}

.hero_Section .eye_bg img.eye_8 {
    width: 7vw;
  position: absolute;
  inset:
auto 26% 9% auto;
}

.hero_Section .eye_bg img.eye_9 {
    width: 12vw;
  position: absolute;
  inset:
auto 7% 22% auto;
}

.hero_Section .eye_bg img {
    z-index: 1;
}

.hero_content h1,
.hero_content h6,
.hero_content button {
    position: relative;
    z-index: 2;
}






/*===================
header-area start
=====================*/


.main-wrapper {
    padding: 120px 0px 40px;
    background: #161616;
}

.main-img img {
    width: 170px;
}

.main-img {
    margin-bottom: 60px;
}

.main-item h2 {
    color: #FFFFFF;
    font-size :26px;
    font-weight: 300;
    line-break: 10px;
    letter-spacing: 4px;
    margin-bottom: 50px;
}

.main-item p {
    font-size: 16px;
    font-weight: 100;
    margin: 16px;
}

.para {
    margin-top: 60px;
}

.para p {
   font-size: 16px;
    font-weight: 100; 
}

.deep-p {
    margin-top: 40px;
}

.deep-p p {
   font-size: 16px;
    font-weight: 100;  
}

.content-item {
    margin-top: 50px;
}

.content-item h4 {
    font-size: 17px;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 34px;
}

.content-item p {
    font-size: 16px;
    font-weight: 100;
    margin: 16px;
}

.text-p {
    margin-top: 30px;
}

.deeply {
    margin-top: 40px;
}

.deeply p {
   font-size: 16px;
    font-weight: 100; 
}

.do-item {
    margin-top: 40px;
}

.do-item h4 {
    font-size: 17px;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 38px;
}

.do-item p {
     font-size: 16px;
    font-weight: 100;
}

.what-p {
    margin-top: 30px;
    margin-bottom: 40px;
}

.what-p p {
     font-size: 16px;
    font-weight: 100;
}

.we-p p {
   font-size: 16px;
    font-weight: 100; 
}

.hide-item {
    margin-top: 50px;
}

.hide-item h4 {
     font-size: 17px;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 36px;
}

.hide-item p {
     font-size: 16px;
    font-weight: 100; 
     margin: 15px;
}

.button {
    margin-top: 50px;
}

.button a {
    /*! color: #ffffff; */
    /*! font-size: 16px; */
    /*! bottom: 2px solid #ffffff; */
    /*! padding: 10px 29px 10px; */
    /*! border-radius: 10px; */
    /*! border: 1px solid #EAEAEA; */
    /*! transition: 0.3s; */
    /*! outline: 3px solid transparent; */
    color: #ffffff;
    font-size: 12px;
    bottom: 2px solid #ffffff;
    padding: 12px 31px 12px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid #ffffff;
    box-sizing: border-box;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    outline: 3px solid #161616;
    letter-spacing: 2px;
}

.button a:hover {
   outline: 3px solid #fff;
}

/*main-wrapper end*/

/* footer-area start*/


.footer-area {
    padding: 120px 0px 30px;
    background: #161616;
}

.ft-left h5 {
    font-size: 12px;
    font-weight: 100; 

}

.ft-right a {
    color: #ffffff;
    font-size: 12px;
    font-weight: 100; 
}

.ft-left {
    margin-left: 14rem;
}

.ft-right {
    margin-left: 5rem;
}

/*privacy-area */

.privacy-area {
     background: #161616;
     padding: 120px 0px 50px;
     
}

.privacy-a  {
     position: fixed;
  left: 22px; 
  top: 15%; 
  transform: translateY(-50%);
}

.privacy-a a {
    color: #A1A1A1;
    font-size: 18px;
    font-weight: 300;
    transition: 0.3s;
}

.privacy-a a:hover {
    color: #ffffff;
}


.middle-area {
    background: #161616;
     padding: 0px 0px 50px;
}

.middle-item h1 {
     font-family: "Archia-Regular";
     font-size: 90px;
     font-weight: 200;
     margin-bottom: 30px;
}

.mid-p {
      max-width: 635px;
        margin: 0 auto; 
    
}

.mid-p h3 {
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 20px;
}


.mid-p p {
    font-size: 14px;
    font-weight: 100;
    /*! margin: 10px; */
    margin: 14px 0px 0px;
}


.second-item {
    max-width: 635px;
    margin: 0 auto;

}

.second-item  h4 {
    margin-top: 30px;
     font-size: 22px;
    font-weight: 300;
    margin-bottom: 40px;
}


.second-item  p {
    font-size: 14px;
    font-weight: 100;
    margin: 11px 0px 0px;
}

.list-p {
    margin-top: 30px;
    margin-left: 2rem;
}

.custom-list {
    text-decoration: none;
    font-size: 14px;
    font-weight: 100;
}

.custom-list  li {
    margin: 15px 0px 10px;
}


.creature-item {
    max-width: 635px;
    margin: 0 auto;
    margin-top: 20px;
}


.creature-item p {
     font-size: 14px;
    font-weight: 100;
    margin: 15px 0px 0px;
}

.third-item {
    max-width: 635px;
    margin: 0 auto;
    margin-top: 20px;
}

.third-item p {
    font-size: 14px;
    font-weight: 100;
    margin: 16px 0px 0px;
}

.if-p {
    margin-top: 20px;
}

.if-p p {
    font-size: 14px;
    font-weight: 100;
}

.log-item {
   max-width: 635px;
    margin: 0 auto;
    margin-top: 50px; 
}

.log-item h3 {
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 30px;
}

.log-item  p {
     font-size: 14px;
    font-weight: 100;
     margin: 15px 0px 4px;
}

.party-item {
    max-width: 635px;
    margin: 0 auto;
    margin-top: 50px; 
}

.party-item h3 {
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 30px;
}

.party-item p {
      font-size: 14px;
    font-weight: 100;
    margin: 18px 0px 0px;
}

.party-p {
    margin-top: 30px;
}

.found-p {
    margin-top: 20px;
}

.online-item {
     max-width: 635px;
    margin: 0 auto;
    margin-top: 50px;
}

.online-item h3{
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 30px;
}

.online-item  P {
    font-size: 14px;
    font-weight: 100;
    margin: 15px 0px 0px;
}

.last-item {
    max-width: 635px;
    margin: 0 auto;
    margin-top: 50px;
}

.last-item h3 {
     font-size: 22px;
    font-weight: 300;
    margin-bottom: 30px;
}

.last-item p {
   font-size: 14px;
    font-weight: 100; 
}

.ftt-left h5 {
    font-size: 12px;
  font-weight: 100;
}

.ftt-right h5 {
    font-size: 12px;
  font-weight: 100;

}

.ftt-left {
    margin-left: 9rem;
}

.ftt-right {
   
    margin-left: 2rem;
}

.header-area {
    padding: 150px 0px 120px;
    background-image: url(images/background.png);
    background-position: center;
    background-size: cover;
}