@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Open+Sans:wght@300&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

:root {
  --font-title: "Josefin Sans", sans-serif;
  --font-text: "Open Sans", sans-serif, bold;
  --font-button: "Josefin Sans", sans-serif;
  --font-color: rgb(130, 254, 239);
}

/*--------------------------- HOME - DEFAULT ---------------------------------*/

@media screen and (min-width: 1300px) {

  .home-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(38, 38, 38, 10);
    animation: zoom 20s
  }
  
  @keyframes zoom {
    0% {
      transform: scale(1.3);
    }
  
    100% {
      transform: scale(1);
    }
  }
  
  .home-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.1;
  }
  
  .home-banner {
    position: absolute;
    top: 10%;
    left: 5rem;
    width: 50%;
    height: 25vh;
    animation: moveBanner 2s;
  }
  
  @keyframes moveBanner {
    0% {
      transform: translateX(10rem) rotateX(-40deg);
      opacity: 0;
    }
    100% {
      transform: translateX(0) rotateX(0);
      opacity: 1;
    }
  }

  .home-banner h1 {
    position: absolute;
    color: #ffffff;
    overflow: hidden;
    top: 0%;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    word-spacing: 0.8rem;
    text-transform: initial;
    font-family: var(--font-title);
    width: 30rem;
    height: 6rem;
  }
  .home-banner h1::before {
    content: "";
    position: absolute;
    border-top: solid 0.2rem var(--font-color);
    border-left: solid 0.1rem var(--font-color);
    border-right: solid 10rem var(--font-color);
    border-bottom: solid 0.3rem var(--font-color);
    bottom: 4rem;
    left: 0.3rem;
  }

  .home-banner .banner-p-div p {
    color: #fff;
    margin-top: 0.8rem;
    position: absolute;
    top: 35%;
    font-size: 1.1rem;
    font-family: var(--font-text);
    letter-spacing: 0.1rem;
    word-spacing: 0.2rem;
    line-height: 2rem;
    /* background-color: rgba(26, 26, 26, 0.8); */
  }

  .home-banner .banner-btn-div .btn-toknowmore {
    padding: 0.5rem 1rem;
    position: absolute;
    font-size: 1.8vh;
    float: left;
    height: 4vh;
    top: 130%;
  }

  .home-banner button:hover {
    opacity: 0.7;
  }
}

@media screen and (min-width: 800px) and (max-width: 1299px) {

  .home-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(38, 38, 38, 10);
    animation: zoom 20s
  }
  
  @keyframes zoom {
    0% {
      transform: scale(1.3);
    }
  
    100% {
      transform: scale(1);
    }
  }
  
  .home-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.1;
  }
  
  .home-banner {
    position: absolute;
    top: 10%;
    left: 5rem;
    width: 50%;
    height: 25vh;
    animation: moveBanner 2s;
  }
  
  @keyframes moveBanner {
    0% {
      transform: translateX(10rem) rotateX(-40deg);
      opacity: 0;
    }
    100% {
      transform: translateX(0) rotateX(0);
      opacity: 1;
    }
  }

  .home-banner h1 {
    position: absolute;
    color: #ffffff;
    overflow: hidden;
    top: 0%;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    word-spacing: 0.8rem;
    text-transform: initial;
    font-family: var(--font-title);
    width: 30rem;
    height: 6rem;
  }
  .home-banner h1::before {
    content: "";
    position: absolute;
    border-top: solid 0.2rem var(--font-color);
    border-left: solid 0.1rem var(--font-color);
    border-right: solid 10rem var(--font-color);
    border-bottom: solid 0.3rem var(--font-color);
    bottom: 4rem;
    left: 0.3rem;
  }

  .home-banner p {
    color: #fff;
    margin-top: 0.3rem;
    position: absolute;
    top: 40%;
    font-size: 1rem;
    font-family: var(--font-text);
    letter-spacing: 0.1rem;
    word-spacing: 0.2rem;
    line-height: 2rem;
  }

  .home-banner button {
    padding: 0.5rem 1rem;
    position: absolute;
    font-size: 1rem;
    float: left;
    height: 30px;
    top: 140%;
  }

  .home-banner button:hover {
    opacity: 0.7;
  }
}

@media screen and (max-width: 799px) {

  #home {

    height: 25rem;

  }

  .home-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(38, 38, 38, 10);
    animation: zoom 20s;
  }
  
  @keyframes zoom {
    0% {
      transform: scale(1.3);
    }
  
    100% {
      transform: scale(1);
    }
  }
  
  .home-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.1;
  }
  
  .home-banner {
    position: absolute;
    top: 10%;
    left: 1rem;
    width: 90%;
    height: 35%;
    animation: moveBanner 2s;
  }
  
  @keyframes moveBanner {
    0% {
      transform: translateX(10rem) rotateX(-40deg);
      opacity: 0;
    }
    100% {
      transform: translateX(0) rotateX(0);
      opacity: 1;
    }
  }
  
 .home-banner h1 {
    position: absolute;
    color: #ffffff;
    overflow: hidden;
    top: 0%;
    font-size: 1rem;
    letter-spacing: 0.2rem;
    word-spacing: 0.8rem;
    text-transform: initial;
    font-family: var(--font-title);
    width: 15rem;
    height: 4.3rem;
  }
  .home-banner h1::before {
    content: "";
    position: absolute;
    border-top: solid 0.1rem var(--font-color);
    border-left: solid 0.1rem var(--font-color);
    border-right: solid 7rem var(--font-color);
    border-bottom: solid 0.37rem var(--font-color);
    bottom: 2.5rem;
    left: 0.1rem;
  }

  .home-banner p {
    color: #fff;
    margin-top: 0rem;
    position: absolute;
    top: 30%;
    left: 0.2rem;
    right: 1rem;
    width: 80%;
    height: 15rem;
    font-size: 0.9rem;
    font-family: var(--font-text);
    line-height: 1.5rem;
  }

  .home-banner button {
    padding: 0.4rem 1rem;
    position: absolute;
    font-size: 0.8rem;
    float: left;
    margin-top: 17rem;
  }

  .home-banner button:hover {
    opacity: 0.7;
  }
}