@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

 body{
   font-family: 'Poppins', sans-serif;
   font-weight: 300;
   font-size: 15px;
   line-height: 1.6;
   color: #fff;
   background-color: #1f2029;
   overflow: hidden;
   height: 100vh;
   -webkit-transition: all 300ms linear;
   transition: all 300ms linear;
   perspective: 800px;
 }
 a {
   cursor: pointer;
 }
 a:hover {
   text-decoration: none;
 }
 ::selection {
   color: #c4c3ca;
   background-color: #000;
 }
 ::-moz-selection {
   color: #c4c3ca;
   background-color: #000;
 }
 
 /* #Cursor
 ================================================== */
 
 .cursor,
 .cursor2,
 .cursor3{
   position: fixed;
   border-radius: 50%;	
   transform: translateX(-50%) translateY(-50%);
   pointer-events: none;
   left: -100px;
   top: 50%;
   mix-blend-mode: difference;
   -webkit-transition: all 300ms linear;
   transition: all 300ms linear;
 }
 .cursor{
   background-color: #fff;
   height: 0;
   width: 0;
   z-index: 99999;
 }
 .cursor2,.cursor3{
   height: 36px;
   width: 36px;
   z-index:99998;
   -webkit-transition:all 0.3s ease-out;
   transition:all 0.3s ease-out
 }
 .cursor2.hover,
 .cursor3.hover{
   -webkit-transform:scale(2) translateX(-25%) translateY(-25%);
   transform:scale(2) translateX(-25%) translateY(-25%);
   border:none
 }
 .cursor2{
   border: 2px solid #fff;
 }
 .cursor2.hover{
   background: rgba(255,255,255,1);
   border-color: transparent;
 }
 
 @media screen and (max-width: 1200px){
   .cursor,.cursor2,.cursor3{
     display: none
   }
 }
 
 /* #Primary style
 ================================================== */
 
 .hero-section {
     position: relative;
   width: 100%;
   display: block;
   overflow: hidden;
   height: 100vh;
   background-image: url('Artificial\ Intelligence\ wave\ for\ Natural\ AI\ by\ fantasy\ for\ Brain.gif');
   background-size: cover;
   background-position: center;
   transform: scale(1) rotateX(0);
   box-shadow: 0 0 40px rgba(0,0,0,0.2);
   -webkit-transition: all 300ms linear;
   transition: all 300ms linear;
   -webkit-transition-delay: 400ms;
   transition-delay: 400ms;
   transform-origin: center top;
 }
 .hero-section h1{
     color: #fff;
   font-size: 8vw;
   line-height: 1;
   font-weight: 900;
 }
 .hero-section .dancing{
   letter-spacing: 1px;
/*    color: #ffeba7; */
   font-size: 25px;
   line-height: 1;
   font-weight: 700;
   letter-spacing: 3px;
   text-transform: uppercase;
   transform: translateY(-175px) rotate(-45deg);
   z-index: 2;
 }
 .hero-section .dancing span{
   padding: 8px 15px;
   padding-right: 10px;
   display: inline-block;
   border-radius: 5px;
/*    background-color: #102770; */
 }
 @media screen and (max-width: 580px){
   .hero-section .dancing{
     font-size: 18px;
   }
 }
 .hero-section p{
   font-size: 20px;
   line-height: 1;
   font-weight: 700;
   color: #ffeba7;
 }
 .hero-section p span{
   margin-left: 15px;
   margin-right: 15px;
   position: relative;
   display: inline-block;
   cursor: pointer;
 }
 
 body.about-on .hero-section {
   transform: scale(0.75);
   -webkit-transition-delay: 0ms;
   transition-delay: 0ms;
 }
 body.contact-on .hero-section {
   transform: scale(0.75);
   -webkit-transition-delay: 0ms;
   transition-delay: 0ms;
 }
 body.travel-on .hero-section {
   transform: rotateX(-10deg);
   -webkit-transition-delay: 0ms;
   transition-delay: 0ms;
 }
 body.wildlife-on .hero-section {
   transform: rotateX(-10deg);
   -webkit-transition-delay: 0ms;
   transition-delay: 0ms;
 }
 body.nature-on .hero-section {
   transform: rotateX(-10deg);
   -webkit-transition-delay: 0ms;
   transition-delay: 0ms;
 }
 .about-text {
     position: absolute;
   font-size: 30px;
   line-height: 1;
   opacity: 0.5;
   font-weight: 700;
   color: #ffeba7;
   letter-spacing: 2px;
   top: 50%;
   left: 20px;
   cursor: pointer;
   z-index: 2;
   -webkit-writing-mode: vertical-lr;
   writing-mode: vertical-lr;
   transform: translateY(-50%);
   -webkit-transition: all 200ms linear;
   transition: all 200ms linear;
 }
 .about-text:hover {
   opacity: 1;
 }
 .about-section {
     position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   display: block;
   overflow: hidden;
   height: 100vh;
   background-color: #102770;
   transform: translateX(-100%);
   -webkit-transition: all 300ms linear;
   transition: all 300ms linear;
   z-index: 10;
 }
 body.about-on .about-section {
   transform: translateX(0);
   -webkit-transition-delay: 400ms;
   transition-delay: 400ms;
 }
 .about-close {
     position: absolute;
   top: 20px;
   right: 20px;
   width: 30px;
   display: block;
   overflow: hidden;
   height: 30px;
   -webkit-transition: all 200ms linear;
   transition: all 200ms linear;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 36px 36px;
   background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg');
   cursor: pointer;
   z-index: 11;
 }
 .about-close:hover {
     transform: rotate(90deg);
 }
 .section-center {
     position: absolute;
   width: 100%;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
 }
 .about-section img {
     width: 240px;
   height: 240px;
   border-radius: 50%;
   display: block;
   margin: 0 auto;
   box-shadow: 0 6px 25px rgba(255,235,167,.35);
 }
 .about-section p {
   letter-spacing: 1px;
   color: #fff;
   font-size: 16px;
   font-weight: 500;
 }
 .about-section p span {
   letter-spacing: 1px;
   color: #ffeba7;
   font-size: 20px;
   font-weight: 700;
 }
 
 .contact-text {
     position: absolute;
   font-size: 30px;
   line-height: 1;
   opacity: 0.5;
   font-weight: 700;
   color: #ffeba7;
   letter-spacing: 2px;
   top: 50%;
   right: 20px;
   cursor: pointer;
   z-index: 2;
   -webkit-writing-mode: vertical-lr;
   writing-mode: vertical-lr;
   transform: translateY(-50%) rotate(180deg);
   -webkit-transition: all 200ms linear;
   transition: all 200ms linear;
 }
 .contact-text:hover {
   opacity: 1;
 }
 .contact-section {
     position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   display: block;
   overflow: hidden;
   height: 100vh;
   /* background-color: #102770; */
   background: linear-gradient(135deg, #3a8dff, #006ab6);
   transform: translateX(100%);
   -webkit-transition: all 300ms linear;
   transition: all 300ms linear;
   z-index: 10;
 }
 body.contact-on .contact-section {
   transform: translateX(0);
   -webkit-transition-delay: 400ms;
   transition-delay: 400ms;
 }
 .contact-close {
     position: absolute;
   top: 20px;
   right: 20px;
   width: 30px;
   display: block;
   overflow: hidden;
   height: 30px;
   -webkit-transition: all 200ms linear;
   transition: all 200ms linear;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 36px 36px;
   background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg');
   cursor: pointer;
   z-index: 11;
 }
 .contact-close:hover {
     transform: rotate(90deg);
 }
 .contact-section a{
     margin: 0 auto;
   font-size: 32px;
   font-weight: 900;
   letter-spacing: 1px;
   color: #fff;
   display: inline-block;
 }
 .contact-section .social a{
     margin-left: 8px;
   margin-right: 8px;
   font-size: 15px;
   font-weight: 700;
   letter-spacing: 1px;
   color: #ffeba7;
 }
 @media screen and (max-width: 580px){
   .contact-section a{
     font-size: 17px;
   }
   .contact-section .social a{
     margin-left: 3px;
     margin-right: 3px;
     font-size: 13px;
     letter-spacing: 0;
   }
 }
 
 .travel-section,
 .wildlife-section,
 .nature-section {
     position: fixed;
   top: 100%;
  margin-top:20px;
   left: 0;
   padding: 100px 0;
   width: 100%;
   height: 100vh;
   display: block;
   overflow-x: hidden;
   overflow-y: auto;
   /* background-color: #102770; */
   background: linear-gradient(135deg, #3a8dff, #006ab6);
   -webkit-transition: all 300ms linear;
   transition: all 300ms linear;
   z-index: 10;
 }
 .travel-close,
 .wildlife-close,
 .nature-close {
     position: absolute;
   top: 20px;
   right: 20px;
   width: 30px;
  
   display: block;
   overflow: hidden;
   height: 30px;
   -webkit-transition: all 200ms linear;
   transition: all 200ms linear;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 36px 36px;
   background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg');
   cursor: pointer;
   z-index: 11;
 }
 .travel-close:hover,
 .wildlife-close:hover,
 .nature-close:hover {
     transform: rotate(90deg);
 }
 body.travel-on .travel-section {
   top: 0;
   -webkit-transition-delay: 400ms;
   transition-delay: 400ms;
 }
 body.wildlife-on .wildlife-section {
   top: 0;
   -webkit-transition-delay: 400ms;
   transition-delay: 400ms;
 }
 body.nature-on .nature-section {
   top: 0;
   -webkit-transition-delay: 400ms;
   transition-delay: 400ms;
 }
 .travel-section img,
 .wildlife-section img,
 .nature-section img {
   margin-top: 30px;
     width: 100%;
   height: auto;
   display: block;
   border-radius: 4px;
   box-shadow: 0 0 20px rgba(0,0,0,0.4);
 }
 .travel-section h3,
 .wildlife-section h3,
 .nature-section h3 {
   font-size: 7vw;
   line-height: 1;
   font-weight: 700;
   letter-spacing: 1px;
   color: #fff;
 }
 .travel-section p,
 .wildlife-section p,
 .nature-section p {
   font-size: 14px;
   line-height: 1.7;
   letter-spacing: 1px;
   font-weight: 500;
 }
 .travel-section p span,
 .wildlife-section p span,
 .nature-section p span {
   font-size: 20px;
   line-height: 1.3;
   font-weight: 700;
   color: #ffeba7;
 }
 /* #Link to page
 ================================================== */
 
 .logo {
   position: fixed;
   bottom: 30px;
   right: 30px;
   display: block;
   z-index: 200000;
   transition: all 250ms linear;
 }
 .logo img {
   height: 26px;
   width: auto;
   display: block;
   mix-blend-mode: difference;
 }
 
 
 @media (max-width: 1200px) {
   .hero-section .dancing{
     font-size: 15px;
     transform: translateY(-80px) rotate(-45deg);
   }
 }
 
 @media (max-width: 967px) {
   .hero-section h1{
     font-size: 11vw;
   }
   .hero-section p{
     font-size: 18px;
   }
   .hero-section p span{
     margin-left: 10px;
     margin-right: 10px;
   }
   .travel-section h3,
   .wildlife-section h3,
   .nature-section h3 {
     font-size: 13vw;
   }
 }

 

/* .wrapper .title{
  text-align: center;
} */

.title h4{
  display: inline-block;
  padding: 20px;
  color: #585757;
  font-size: 50px;
  font-weight: 500;
  letter-spacing: 1.2px;
  word-spacing: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  text-transform: uppercase;
  backdrop-filter: blur(15px);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  word-wrap: break-word;
}
.wrapper .card_Container {
  margin-top: 80px;
  display: flex;               /* Aligns cards horizontally */
         /* Centers the cards vertically within the container */
             /* Allows the cards to wrap if screen size is small */
  gap: 20px;  
}

.card_Container .card {
  position: relative;
  width: 300px; /* Fixed width of each card */
  height: 400px; /* Fixed height of each card */
  margin: 20px; /* Adds space between cards horizontally */
  overflow: hidden;
  box-shadow: 0 30px 30px -20px rgba(0, 0, 0, 1),
              inset 0 0 0 1000px rgba(67, 52, 109, .6);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.card .imbBx, .imbBx img{
  width: 100%;
  height: 100%;
}

.card .content{
  position: absolute;
  bottom: -160px;
  width: 100%;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  backdrop-filter: blur(15px);
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  transition: bottom 0.5s;
  transition-delay: 0.65s;
  /* color: white; */
}

.card:hover .content{
  bottom: 0;
  transition-delay: 0s;
}

.content .contentBx h3{
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 500;
  font-size: 18px;
  text-align: center;
  margin: 20px 0 15px;
  line-height: 1.1em;
  transition: 0.5s;
  transition-delay: 0.6s;
  opacity: 0;
  transform: translateY(-20px);
}

.card:hover .content .contentBx h3{
  opacity: 1;
  transform: translateY(0);
}

.content .contentBx h3 span{
  font-size: 12px;
  font-weight: 300;
  text-transform: initial;
}

.content .sci{
  position: relative;
  bottom: 10px;
  display: flex;
}

.content .sci li{
  list-style: none;
  margin: 0 10px;
  transform: translateY(40px);
  transition: 0.5s;
  opacity: 0;
  transition-delay: calc(0.2s * var(--i));
}

.card:hover .content .sci li{
  transform: translateY(0);
  opacity: 1;
}

.content .sci li a{
  color: #fff;
  font-size: 24px;
}

/* contact us */
.section {
  padding: 60px 20px;
  background-color: #1e0e67;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  top: 100px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
}

.contact-form {
  background-color: #1e0e67;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.contact-form:hover {
  transform: translateY(-5px);
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.form-group {
  flex: 1;
  min-width: 250px;
}

.form-control {
  width: 100%;
  padding: 15px;
  font-size: 1.1em;
  border: 2px solid #ddd;
  border-radius: 8px;
  transition: all 0.3s ease;
  background-color: #1e0e67;
}

.form-control:focus {
  border-color: #006ab6;
  outline: none;
  box-shadow: 0 0 8px rgba(0, 106, 182, 0.5);
}



textarea.form-control {
  resize: vertical;
  min-height: 150px;
}

.btn {
  padding: 15px 30px;
  font-size: 1.1em;
  background: linear-gradient(135deg, #3a8dff, #006ab6); /* Blue gradient button */
  /* color: white; */
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  width: 100%;
  text-align: center;
  color: white;
}

.btn:hover {
  background: linear-gradient(135deg, #006ab6, #3a8dff); /* Reverse gradient on hover */
  transform: translateY(-4px);
}

.btn:active {
  background: linear-gradient(135deg, #005b8b, #3a8dff); /* Darker gradient on active */
  transform: translateY(2px);
}

.section-title {
  font-size: 2.5em;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
}

.section-subtitle {
  font-size: 1.2em;
  color: #006ab6;
  margin-bottom: 20px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .form-row {
      flex-direction: column;
  }

  .contact-form {
      padding: 20px;
  }
}