responsive.css

@media(max-width: 1480px) {
     .button a {
          width: 100%;
          cursor: pointer;
          color: #ffffff;
          padding: 1rem 8em;
          background-color: #04040466;
          box-shadow: 2px 2px 20px black;
     }

     #section3 {
          width: 70%;
     }
}

@media (max-width: 1250px) {
     #section3 {
          width: 80%;
     }

     #section10 {
          margin: 1rem auto 4em auto;
          width: 92%;
     }

     .section10 {
          padding: 8em 2em 2em 8em;
     }
}

@media(max-width: 1100px) {
     #section7 h1 {
          font-size: 4em;
          top: -8em;
          line-height: 1;
     }

     #section7 p {
          font-size: 1.5em;
          top: -20.6em;
          width: 53%;
     }

     #section7 .btn7 {
          top: -27em;
          padding: 15px 28px;
          font-size: 1.1rem;
     }

     #section3 {
          width: 88%;
     }

     .twosection .block {
          height: 120px;
          width: 120px;
     }

     .threesection .block {
          height: 120px;
          width: 120px;
     }

     #section2 h1 {
          width: 80%;
     }

     .button a {
          width: 100%;
          cursor: pointer;
          color: #ffffff;
          padding: 1rem 6em;
          background-color: #04040466;
          box-shadow: 2px 2px 20px black;
     }

     .section10 {
          padding: 5em 2em 2em 2em;
     }

     .section10 form {
          display: grid;
          grid-template-columns: 320px 500px;
     }

     .formbtn {
          width: 80%;
          margin-left: 31em;
     }
}



@media(max-width: 950px) {
     #section3 {
          width: 98%;
     }

     .section3 {
          display: block;
     }

     .section3child1 {
          justify-content: center;
          align-items: center;
          display: flex;
     }

     .section3child2 {
          display: flex;
     }

     .sectiontwo {
          margin-top: -8.1em;
          margin-bottom: 3em;
     }

     .sectionthree {
          display: none;
     }

     .twosection .block {
          margin: 1em 2.5px 5px 2.5px;
     }

     .button a {
          padding: 1rem 4em;
     }

     .scetion4child1 img {
          width: 240px;
          height: 240px;
     }

}

@media(max-width: 900px) {
     #section7 h1 {
          font-size: 3em;
          top: -10.6em;
          line-height: 1;
     }

     #section7 p {
          font-size: 1.5em;
          top: -20.6em;
          width: 68%;
     }

     #section7 .btn7 {
          top: -27em;
          padding: 15px 28px;
          font-size: 1.1rem;
     }

     .section10 form {
          display: grid;
          grid-template-columns: 300px 500px;
     }

     #name,
     #email,
     #number {
          font-size: 1.1rem;
          padding: 17px 33px;
          margin: 12px 0;
     }

     #textarea {
          width: 75%;
          height: 95%;
          font-size: 1.1rem;
     }

     .formbtn {
          width: 80%;
          margin-left: 27em;
     }

     #section5 h1 {
          font-size: 3em;
     }
}

@media(max-width: 830px) {

     #name,
     #email,
     #number {
          font-size: 1.1rem;
          padding: 17px 270px 17px 17px;
          margin: 12px 0;
     }

     #textarea {
          padding: 17px 350px 17px 17px;
          width: 500px;
          height: 200px;
          font-size: 1.1rem;
     }

     .section10 form {
          display: grid;
          grid-template-columns: 300px;
     }

     .formbtn {
          width: 80%;
          margin-left: 16em;
     }

     .section4 {
          display: block;
          width: 100%;
     }

     .scetion4child1 {
          width: 90%;
          margin: 0 auto;
     }

     .scetion4child1 p {
          width: 90%;
     }

     .scetion4child2 {
          width: 90%;
          margin: 0 auto;
     }

     .scetion4child1 img {
          width: 250px;
          height: 250px;
     }

     .scetion4child2>.spell>ol {
          font-size: 2.6em;
          line-height: 1.3;
     }

     #section6 {
          width: 94%;
     }

     .section8child1 {
          margin-top: 6em;
          margin-bottom: 4em;
          text-align: center;
          width: 100%;
     }

     .section8child1 h1 {
          line-height: 1;
          width: 100%;
          font-size: 4em;
     }

     .section8child1 p {
          margin: 1em 0;
          font-size: 1.2rem;
          line-height: 1.5;
          width: 100%;
     }

     .section8child2 {
          display: flex;
          justify-content: center;
          text-align: center;
          width: 100%;
     }

     .section8 {
          display: block;
     }
}

@media(max-width: 750px) {
     #banner h1 {
          font-size: 8em;
     }

     @keyframes bannerheading {
          0% {
               font-size: 4rem;
          }

          80% {
               opacity: 0;
               z-index: -11;
               font-size: 8rem;
          }

          100% {
               opacity: 0;
               font-size: 8rem;
          }
     }

     #banner h3 {
          top: 89%;
          left: 35%;
     }


     #section2 h1 {
          font-weight: bolder;
          margin: 0 auto;
          width: 90%;
          font-size: 2.5em;
     }

     #section1 {
          display: block;
     }

     .section1child2 img {
          display: none;
     }

     .button {
          width: 100%;
          font-size: 1.5rem;
          margin-top: 2.8rem;
     }

     .section1child1 {
          width: 100%;
     }

     .section1child2 {
          width: 100%;
     }

     .button {
          text-align: center;
          width: 100%;
     }

     .button a {
          text-align: center;
          color: black;
          padding: 1rem;
          border-radius: 40px;
          background-color: #ffffff;
     }

}

@media(max-width:600px) {
     #section6 {
          width: 99%;
     }

     #section7 h1 {
          font-size: 2.5em;
          top: -13.6em;
     }

     #section7 p {
          font-size: 1.3em;
          top: -25.6em;
          width: 84%;
     }

     #section7 .btn7 {
          top: -32em;
          padding: 12px 20px;
          font-size: 1rem;
     }

     .section1child1 h1 {
          width: 90%;
          margin: 0 auto;
          font-size: 2em;
     }

     .section1child1 p {
          width: 90%;
          margin: 0 2rem 0 2rem;
          font-size: 2em;
     }

     .scetion4child2>.spell>ol {
          font-size: 2.2em;
     }

     #section5 h1 {
          font-size: 2.5em;
     }

     .sec8-child1 h1 {
          font-size: 26px;
     }

     .sec8-child1 img {
          width: 100%;
          height: 200px;
     }

     .container {
          width: 200px;
          height: 200px;
     }

     .section10 h1 {
          font-size: 2rem;
     }

     .section10 p {
          width: 86%;
     }

     #name,
     #email,
     #number {
          padding: 17px 140px 17px 17px;
          margin: 12px 0;
     }

     #textarea {
          padding: 17px 250px 17px 17px;
          width: 370px;
          height: 200px;
     }

     .formbtn {
          width: 80%;
          margin-left: 8em;
     }
}

@media(max-width:450px) {
     #banner h1 { 
          margin-top: 3em;
          font-size: 6em;
     }

     @keyframes bannerheading {
          0% {
               font-size: 3rem;
          }

          80% {
               opacity: 0;
               z-index: -11;
               font-size: 6rem;
          }

          100% {
               opacity: 0;
               font-size: 6rem;
          }
     }

     #banner h3 {
          top: 89%;
          left: 25%;
     }

     .section1child1 p {
          display: block;
          width: 90%;
          margin: 0 auto;
          font-size: 1.5em;
     }

     #section2 h1 {
          font-weight: bolder;
          margin: 0 auto;
          width: 90%;
          font-size: 2.5em;
     }

     #section2 p {
          margin-top: 10px;
          line-height: 1.2;
          font-size: 1.2em;
          text-align: center;
     }

     .scetion4child2>.spell>ol {
          font-size: 1.8em;
     }

     #section5 h1 {
          font-size: 2em;
     }

     .section8child1 h1 {
          font-size: 2.5rem;
     }

     .sec8-child1 img {
          width: 90%;
          height: 170px;
     }

     .container {
          width: 160px;
          height: 160px;
     }

     .section10 h1 {
          font-size: 1.4rem;
     }

     .section10 p {
          width: 90%;
     }

     #name,
     #email,
     #number {
          padding: 12px 45px 17px 12px;
          margin: 12px 0;
     }

     #textarea {
          padding: 17px 200px 17px 17px;
          width: 275px;
          height: 120px;
          font-size: 1.1rem;
     }

     .formbtn {
          width: 73%;
          margin-left: 1em;
     }

     .footer {
          display: block;
     }

     #footer {
          display: block;
          margin: 2em auto 4em auto;
     }

     .footerchild1 h1 {
          font-size: 3em;
          text-align: center;
     }

     .footerchild1 p {
          text-align: center;
          font-size: 1.4em;
          color: rgb(165, 163, 163);
     }

     .footerchild2 {
          display: flex;
          margin: 10px auto;
          justify-content: space-evenly;
     }
}

@media(max-width:380px) {
     .twosection .block {
          height: 100px;
          width: 100px;
          margin: 5px 2.5px;
          font-size: 12px;
     }

     .threesection .block {
          height: 100px;
          width: 100px;
          margin: 5px 2.5px;
          font-size: 12px;
     }
}

@media(max-width:370px) {
     #name,
     #email,
     #number {
          padding: 12px 4px 17px 12px;
          margin: 12px 0;
     }

     #textarea {
          padding: 17px 200px 17px 17px;
          width: 235px;
          height: 120px;
          font-size: 1.1rem;
     }

     .formbtn {
          width: 72%;
          margin-left: 10px;
     }
}