@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style: none;
   font-family: 'Poppins', Arial, sans-serif;
   overflow-x: hidden;
}
bdy{
   display: flex;
   flex-direction: column;
   width: 100vw;
   left: 0;
   justify-content: center;
}
.container{
   margin: 0px auto;
}
.container h1{
   color: #510000;
}
.container.hero{
   width: 100vw;
   left: 0;
   height: 650px;
   font-size: 120%;
   background: #ffff;
   text-shadow: 0 2px 5px #00000019;
   display: flex;
   flex-direction: column-reverse;
   justify-content: center;
   align-items: flex-start;
   padding: 20px 20px 80px 40px;
   color: #000000ba;
   margin: 0 0 150px 0;
   border: solid 1px rgba(46, 0, 42, 0.774);
   border-radius: 0 0 60px 60px;
   box-shadow: 0 30px 100px rgba(65, 0, 38, 0.171);
   z-index: 2;
}

.container.contact{
   height: 800px;
   display: flex;
   flex-direction: column;
   gap: 40px;
   justify-content: center;
   text-align: center;
   align-items: center;
}
.container.contact a{
   padding: 5px;
}
.container.contact a img{
   width: 25px;
   height: 25px;
   filter: opacity(100%);
}
.contactAll{
   color: #180018ba;
   display: flex;
   flex-direction: column;
   gap: 40px;
   align-items: flex-start;
   margin-top: 30px;
}
.contactAll h2{
   color: #3a0029ba;
}
.contactLeft, .contactRight{
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-items: flex-start;
   overflow: visible;
}
.container.hero h1{
   color: #180018ba;
}
.container.hype{
   height: 500px;
   width: 100vw;
   display: flex;
   margin-top: -150px;
   flex-direction: column;
   padding: 20px;
   justify-content: center;
   align-items: center;
   text-align: center;
   gap: 0px;
}
.container.offer{
   height: 900px;
   width: 100vw;
   margin: 0;
   display: flex;
   padding: 10px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 40px;
   overflow-x: visible;
}
.hero img{
   width: 300px;
   height: 300px;
   align-self: flex-end;
}
img{
   height: 100px;
   width: 100px;
}
.alter{
   display: none;
}
.menu{
   position: fixed;
   text-align: center;
   margin-top: 0;
   padding-top: 30px;
   display: none;
   height: 100vh;
   width: 100vw;
   background: linear-gradient(45deg, #ffd5e9, #f9ffe9);
   filter: opacity(0%);
   z-index: 2;
}
.menu.active{
   display: block;
   animation: slide-in .5s 1 ease;
   animation-fill-mode: forwards;   
}
.menu.back{
   animation: back .5s 1 ease;
   animation-fill-mode: forwards;
}
.contactAll.active{
   display: block;
   animation: slide-in .5s 1 ease;
   animation-fill-mode: forwards;   
}
.contactAll.back{
   animation: back .5s 1 ease;
   animation-fill-mode: forwards;
}
.imageLink{
   overflow: visible;
}
@keyframes back{
   from{
      transform: translateX(0px);
   }
   to{
      transform: translateX(-200px);
      filter: opacity(0%);
   }
}
@keyframes slide-in{
   from{
      transform: translateX(-200px);
   }
   to{
      transform: translateX(0px);
      filter: opacity(100%);
   }
}
nav img{
   width: 130px;
   height: 30px;
   filter: opacity(90%);
}
ul{
   padding-top: 70px;
}
li{
   margin: 20px;
}
a{
   text-decoration: none;
   color: #a70000;
}
.call{
   color: rgb(80, 4, 36);
   font-size: 40px;
   background-color:transparent;
   box-shadow: 0, 20px, 60px, #00000019;
   padding: 40px;
   margin-bottom: 40px;
   border-radius: 30px;
}
.mail{
   color: #130113;
}
.back{
   padding: 10px;
   margin: 10px;
   position: absolute;
   transform: translate(120px);
   border: none;
   background: transparent;
}
.navbar{
   position: fixed !important;
   top: 0;
   width: 100vw;
   background: white;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #130113;
   z-index: 3;
   padding: 10px 20px 10px 20px;
   border-bottom: solid 1px #130113;
}
.navbar p{
   font-weight: bold;
   color: #180000ba;
   text-shadow: 0 1px 2px #ffffff88;
}
.hamburger{
   display: flex;
   flex-direction: column;
   gap: 4px;
}
.ham{
   width: 22px;
   height: 3px;
   border-radius: 1.5px;
   background: #380000ba;
   cursor: pointer;
}
.ham.mid{
   width: 16px;
}
.hero .intro{
   display: flex;
   width: 300px;
   flex-direction: column;
   gap: 20px;
}
.hero .buttons{
   display: flex;
   gap: 20px;
}
.buttons a{
   background: linear-gradient(40deg, #9a4ed8, #d66161bc);
   font-size: 70%;
   color: #ffffff;
   padding: 5px 25px 5px 25px;
   border-radius: 10px;
   box-shadow: inset 0 0px 5px #00000019;
}
.hero .hire{
   background: transparent;
   color: #ad0600;
   border: solid 1px #ad005f;
}
.summary{
   display: flex;
   align-items: center;
   gap: 40px;
}
.summ{
   display: flex;
   flex-direction: column;
   margin-top: 20px;
   gap: 10px;
}
.summ :first-child{
   font-size: 150%;
   color: #434343;
}
.grid{
   display: grid;
   grid-template-columns: 1fr;
   padding-top: 40px;
   gap: 20px;
}
.work{
   display: flex;
   border: solid 1px #270051;
   width: 300px;
   color: #270051;
   padding: 10px 20px 10px 20px;
   box-shadow: 0 15px 25px #4800653f;
   border-radius: 20px;
   justify-content: space-around;
   margin-inline: 90px;
   margin-top: -40px;
   margin-bottom: 40px;
   align-items: center;
   justify-self: center;
   z-index: 1;
}
.hype h1 {
   margin-bottom: 50px;
   z-index: -1;
}
.work :first-child{
   flex: 1;
}
footer{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 20px;
   height: 250px;
   background: linear-gradient(40deg, #9a4ed8, #d6b161bc);
   color: #ffffffb9;
   padding: 40px;
   border-radius: 60px 60px 0 0;
   text-align: center;
   font-size: 120%;
}
footer .cp{
   color: white;
   font-size: 70%;
}
footer a{
   color: white;
   text-decoration: underline;
   font-size: 12px;
}
hr{
   border: solid 1px white;
   width: 50vw;
}
.last{
   display: flex;
   gap: 20px;
   flex: 1;
}
.container.faq{
   display: flex;
   flex-direction: column;
   margin: 150px auto 100px auto;
   gap: 40px;
   justify-content: center;
   align-items: center;
   text-align: justify;
   width: 70vw;
   overflow: visible;
}
.container.faq h1{
   color: #510000;
   text-align: center;
}
.flex-box{
   display: flex;
   flex-direction: column;
   gap: 0px;
   width: 80vw;
   justify-content: center;
   overflow: visible;
}
.box-cells{
   display: flex;
   align-items: center;
   gap: 20px;

}
.box-cells, .hid{
   padding: 10px 20px 10px 20px;
   border-bottom: solid .5px;
}
.more{
   font-size: 25px;
   transition: all .2s;
   color: #510000;
   cursor: pointer;
   overflow: visible ;
}
.more.active{
   transform: rotate(45deg);
}
.hid{
   display: none;
   transition: all 1s;
   color: #510000;
}
.hid.show{
   display: block;
}

#down.active, .box-cells.active{
   filter: opacity(100%);
   transform: translateY(0px);
}

#down, .box-cells{
   filter: opacity(0%);
   transform: translateY(100px);
   transition: all .7s ease;
}
#left{
   filter: opacity(0%);
   transform: translateX(-100px);
   transition: all .7s ease;
}
#left.active{
   filter: opacity(100%);
   transform: translateX(0px);
}
#right{
  filter: opacity(0%);
  transform: translateX(100px);
  transition: all .7s ease; 
}
#right.active{
   filter: opacity(100%);
   transform: translateY(0px);
}

@media only screen and (min-width: 768px){
   *{
      overflow-x: visible;
   }
  .alter{
      display: flex;
      gap: 20px;
   }
   .alter a{
      color: #130113;
   }
   .hamburger{
      display: none;
   }
   header{
      position: fixed;
      top: 0;
      z-index: 2;
   }
   .body{
      display: flex;
      justify-content: center;
      padding: auto auto;
   }
   .flex-box{
      width: 50vw;
   }
   .container.faq{
      justify-self: center;
   }
   .container.hero{
      flex-direction: row;
      padding: 50px;
      justify-content: space-evenly;
      align-items: center;
   }
   .container.offer{
      height: 500px;
   }
   .grid{
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
      padding-inline: 40px;
   }
   .work{
      flex-direction: row;
      justify-self: center;
      margin-inline: auto;
   }
   .hero img{
      width: 400px;
      height: 400px;
     align-self: center;
   }
   .contactAll{
      display: flex;
      flex-direction: row;
      gap: 120px;
      align-items: flex-start;
      margin-top: 30px;
}
.box-cells, .hid{
   width: 50vw;
}
}