@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap'); 
html{
  font-size: 63.5%;
  overflow-x: hidden;
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
}
:root{
  --orange:#ffa500;
}

*{
  font-family: 'Nunito', sans-serif;
  margin:0; padding:0;
  box-sizing: border-box;
  text-transform: capitalize;
  outline: none; border:none;
  text-decoration: none;
  transition: all .2s linear;
}

*::selection{
  background:#581088;
  color:rgb(221, 84, 141);
}  
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "Roboto";
    list-style: none;
    box-sizing: border-box;
    background: rgb(37, 31, 31);
  }
  section {
    
    padding:2rem 9%;
  }
  
  .bg img {
    width: 110vw;
    height: 110vh;
    filter: brightness(0.6);
  }
  
  .rock1 {
    position: absolute !important;
    left: 10vw !important;
    top: 20vh !important;
  }
  
  .rock1 img {
    width: 40%;
    filter: brightness(0.5);
  }
  
  .text h1 {
    font-family: "AlphaCentauri" !important;
    font-size: 5vw;
    color: #fff;
    letter-spacing: 10px;
    position: relative;
    top: 35vh;
    left: 34vw;
  }
  
  .earth img {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 34vw;
    top: 25vh;
    z-index: 1;
    filter: brightness(0.7);
  }
  
  .mid {
    left: -150px !important;
    bottom: -100px !important;
    top: unset !important;
  }
  
  .mid img {
    width: 100%;
    z-index: 2;
    left: -20px;
    top: 20vh !important;
    filter: brightness(0.8);
  }
  
  .fore {
    right: -50px !important;
    bottom: -200px !important;
    top: 0px !important;
    left: unset !important;
  }
  
  .fore img {
    width: 400px;
    height: 110vh;
    z-index: 3;
    filter: brightness(0.5);
  }

/* part 2 */
  
.heading{
  text-align: center;
  padding:2.5rem 0;
}

.heading span{
  font-size: 3.5rem;
  background:rgba(8, 139, 214, 0.2);
  color:var(--orange);
  border-radius: .5rem;
  padding:.2rem 1rem;
}

.heading span.space{
  background:none;
}

.btn{
  display: inline-block;
  margin-top: 1rem;
  background:#fcb045;
  color:#fff;
  padding:.8rem 3rem;
 
  border-radius: 0.35em;
  cursor: pointer;
  font-size: 1.7rem;
  text-decoration: none;
}
.btn-disc{
  background:rgba(11, 26, 112, 0.2);
}  
.btn:hover{
  background:linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
  color: rgb(18, 74, 82);
  border-radius: 0.5em;
}.btn{
    display: inline-block;
    margin-top: 1rem;
    background:var(--orange);
    color:rgb(22, 123, 170);
    padding:.8rem 3rem;
    border:.2rem solid var(--orange);
    cursor: pointer;
    font-size: 1.7rem;
    text-decoration: none;
  }
  
  .btn:hover{
    background:rgba(31, 94, 212, 0.2);
    color: #fff;
    border-radius: 0.5em;
  }



  .swiper-slide{
    
    padding: 10px;
  }
  .box{
    background-color: #fff;
  }
  .box-rev{
    flex: 1 1 30rem;
    border-radius: .5rem;
    padding:1rem;
    text-align: center;
    font-size: 5rem;
    color:#333;
  }
  .services .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
  }
  
  .services .box-container .box{
    flex: 1 1 30rem;
    border-radius: .5rem;
    padding:1rem;
    text-align: center;
  }
  
  .services .box-container .box i{
    padding:1rem;
    font-size: 5rem;
    color:var(--orange);
  }
  
  .services .box-container .box h3{
    font-size: 2.5rem;
    color:#333;
  }
  
  .services .box-container .box p{
    font-size: 1.5rem;
    color:#666;
    padding:1rem 0;
  }
  
  .services .box-container .box:hover{
    box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
  }
  
  .gallery .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
  }
  
  .gallery .box-container .box{
    overflow: hidden;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
    border:1rem solid #fff;
    border-radius: .5rem;
    flex:1 1 30rem;
    height: 25rem;
    position: relative;
  }
  
  .gallery .box-container .box img{
    height: 100%;
    width:100%;
    object-fit: cover;
  }
  
  .gallery .box-container .box .content{
    position: absolute;
    top:-100%; left:0;
    height: 100%;
    width:100%;
    text-align: center;
    background:rgba(0,0,0,.7);
    padding:2rem;
    padding-top: 5rem;
  }
  
  .gallery .box-container .box:hover .content{
    top:0;
  }
  
  .gallery .box-container .box .content h3{
    font-size: 2.5rem;
    color:var(--orange);
  }
  
  .gallery .box-container .box .content p{
    font-size: 1.5rem;
    color:#eee;
    padding:.5rem 0;
  }
  
  .review .review-slider{
    padding-bottom: 2rem;
  }
  
  .review .box{
    padding:2rem;
    text-align: center;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
    border-radius: .5rem;
  }
  
  .review .box img{
    height:13rem;
    width:13rem;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
  }
  
  .review .box h3{
    color:#333;
    font-size: 2.5rem;
  }
  
  .review .box p{
    color:#666;
    font-size: 1.5rem;
    padding:1rem 0;
  }
  
  .review .box .stars i{
    color:var(--orange);
    font-size: 1.7rem;
  }
  
  .contact .row{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
    align-items: center;
  }
  
  .contact .row .image{
    flex:1 1 35rem;
  }
  
  .contact .row .image img{
    width:100%;
  }
  
  .contact .row form{
    flex:1 1 50rem;
    padding:2rem;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
    border-radius: .5rem;
  }
  
  .contact .row form .inputBox{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
  }
  
  .contact .row form .inputBox input, .contact .row form textarea{
    width:49%;
    margin:1rem 0;
    padding:1rem;
    font-size: 1.7rem;
    color:#333;
    background:#f7f7f7;
    text-transform: none;
    border-radius: 0.4em;
  }
  .formbg{
    background-color:#5e9ccf;
    flex:1 1 40rem;
    border-radius: 2em;
}
  .contact .row form textarea{
    height: 15rem;
    resize: none;
    width:100%;
  }

/* About Section */
.main {
  background-color:rgb(37, 31, 31);
  padding: 10rem 0;
}

.main__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 90%;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  padding: 0 50px;
}

.main__content {
  color: #fff;
  width: 100%;
}

.main__content h1 {
  font-size: 2rem;
  background-color: #fe3b6f;
  background-image: linear-gradient(to top, #ff087b 0%, #ed1a52 100%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  text-transform: uppercase;
  margin-bottom: 32px;
}

.main__content h2 {
  font-size: 4rem;
  background: #ff8177; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #9114ff,
    #da22ff
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #8f0eff,
    #da22ff
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.main__content p {
  margin-top: 1rem;
  font-size: 2rem;
  font-weight: 700;
}

.main__btn {
  font-size: 1.8rem;
  background: #833ab4;
  background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
  background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
  padding: 20px 60px;
  border: none;
  border-radius: 4px;
  margin-top: 2rem;
  cursor: pointer;
  position: relative;
  transition: all 0.35s;
  outline: none;
}

.main__btn a {
  position: relative;
  z-index: 2;
  color: #fff;
  text-decoration: none;
}

.main__btn:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ff1ead;
  transition: all 0.35s;
  border-radius: 4px;
}

.main__btn:hover {
  color: #fff;
}

.main__btn:hover:after {
  width: 100%;
}

.main__img--container {
  text-align: center;
}

.main__img--card {
  margin: 10px;
  height: 500px;
  width: 500px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
}

.fa-layer-group,
.fa-users {
  font-size: 14rem;
}

#card-2 {
  background: #ff512f;
  background: -webkit-linear-gradient(to right, #dd2476, #ff512f);
  background: linear-gradient(to right, #dd2476, #ff512f);
}

/* Mobile Responsive */
@media screen and (max-width: 1100px) {
  .main__container {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    height: 90%;
    
  }

  .main__img--container {
    display: flex;
    justify-content: center;
  }

  .main__img--card {
    height: 425px;
    width: 425px;
  }

  .main__content {
    text-align: center;
    margin-bottom: 4rem;
  }

  .main__content h1 {
    font-size: 2.5rem;
    margin-top: 2rem;
  }

  .main__content h2 {
    font-size: 3rem;
  }

  .main__content p {
    margin-top: 1rem;
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 480px) {
  .main__img--card {
    width: 250px;
    height: 250px;
  }

  .fa-users,
  .fa-layer-group {
    font-size: 4rem;
  }

  .main__content h1 {
    font-size: 2rem;
    margin-top: 3rem;
  }
  .main__content h2 {
    font-size: 2rem;
  }

  .main__content p {
    margin-top: 2rem;
  }

  .main__btn {
    padding: 12px 36px;
    margin: 2.5rem 0;
  }
}


/* Footer CSS */


.footer__container {
  background-color: rgb(39, 34, 34);
  padding: 5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: medium;
}

#footer__logo {
  color: #fff;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 2rem;
}

.footer__links {
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: center;
}

.footer__link--wrapper {
  display: flex;
}

.footer__link--items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 16px;
  text-align: left;
  width: 160px;
  box-sizing: border-box;
}

.footer__link--items h2 {
  margin-bottom: 16px;
  color: #fff;
}

.footer__link--items a {
  color: #fff;
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: 0.3 ease-out;
}

.footer__link--items a:hover {
  color: #e9e9e9;
  transition: 0.3 ease-out;
}

.social__icon--link {
  color: #fff;
  font-size: 24px;
}

.social__media {
  max-width: 1000px;
  width: 100%;
}

.social__media--wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1000px;
  margin: 40px auto 0 auto;
}

.social__icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 240px;
}

.website__rights {
  color: #fff;
}

@media screen and (max-width: 820px) {
  .footer__links {
    padding-top: 2rem;
  }

  #footer__logo {
    margin-bottom: 2rem;
  }

  .website__rights {
    margin-bottom: 2rem;
  }

  .footer__link--wrapper {
    flex-direction: column;
  }

  .social__media--wrap {
    flex-direction: column;
  }
}

@media screen and (max-width: 480px) {
  .footer__link--items {
    margin: 0;
    padding: 10px;
    width: 100%;
  }
}