culture.css

/* ------------------------------------------SECTION-1------------------------------------------ */


#section1 {
     padding-top: 10rem;
     margin: 0 auto;
     display: block;
     width: 70%;
}

.section1 h4 {
     font-family: 'Raleway', sans-serif;
     font-size: 1.6rem;
     font-weight: 500;
     color: white;
}

.section1 h1 {
     font-family: 'Raleway', sans-serif;
     font-size: 4em;
     padding: 1rem 0;
     color: white;
}

.section1 p {
     font-size: 18.5px;
     line-height: 1.8;
     font-family: 'Raleway', sans-serif;
}

.section1 :nth-child(3) {
     margin-bottom: 1.6em;
}


/* ------------------------------------------SECTION-1------------------------------------------ */



/* ------------------------------------------SECTION-2------------------------------------------ */


#section2 {
     padding-top: 10rem;
     margin: 0 auto;
     display: block;
     width: 70%;
}

.section2 h4 {
     letter-spacing: 12px;
     text-align: center;
     font-family: 'Raleway', sans-serif;
     font-size: 1.6rem;
     font-weight: 500;
     color: white;
}

.section2 h1 {
     text-align: center;
     font-family: 'Raleway', sans-serif;
     font-size: 4em;
     color: white;
     margin-bottom: 2.3rem;
}

.section2 p {
     font-size: 18.5px;
     line-height: 1.8;
     font-family: 'Raleway', sans-serif;
}

.section2 :nth-child(3) {
     margin-bottom: 1.6em;
}


/* ------------------------------------------SECTION-2------------------------------------------ */


/* ------------------------------------------SECTION-3------------------------------------------ */


#section3 {
     color: white;
     padding: 8em 0;
     text-align: center;
     background: linear-gradient(black, rgb(43, 43, 43), rgb(0, 0, 0));
}

.section3 h1 {
     margin-bottom: 1em;
     font-weight: 400;
     font-size: 2rem;
}

.section3 h2 {
     font-size: 3em;
     padding: 5px;
}

.section3 h3 {
     font-size: 1rem;
     font-weight: 400;
     margin-bottom: 2rem;
}

.section3 p {
     width: 50%;
     font-size: 1.4rem;
     margin: 20px auto;
}

/* ------------------------------------------SECTION-3------------------------------------------ */


/* ------------------------------------------SECTION-4------------------------------------------ */


#section4 {
     width: 70%;
     margin: 0 auto;
     display: block;
}

.section4 h1 {
     padding: 1.2em 0;
     font-family: 'Raleway', sans-serif;
     font-size: 3em;
     color: rgb(255, 255, 255);
}

.section4 h2 {
     font-family: 'Raleway', sans-serif;
     font-size: 2rem;
     color: rgb(121, 148, 255);
}

.section4 p {
     padding-bottom: 2em;
     font-family: 'Raleway', sans-serif;
     font-size: 1.2rem;
     line-height: 1.7;
}


/* ------------------------------------------SECTION-4------------------------------------------ */


/* ------------------------------------------SECTION-5------------------------------------------ */
#section5 {
     padding: 3em 0;
     background:linear-gradient(rgb(18, 18, 18),black);
     margin: 4em auto;
     width: 90%;
     border-radius: 20px;
}

.section5 { 
     margin: 3em auto;
     width: 70%;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
}

#section5>h1 {
     font-size: 2.5rem;
     text-align: center;
     color: white;
}

#section5 h4 {
     padding: 5px 0;
     font-size: 1.3rem;
     text-align: center;
     color: rgb(153, 149, 149);
}


.section5child1 {
     width: 80%;
}

.section5child1 h1 {
     color: rgb(121, 148, 255);
     font-size: 1rem;
}

.section5child1 h3 {
     padding: 13px 0 1rem 0;
     color: grey;
}

.section5child1 p {
     padding-bottom: 3.2rem;
     line-height: 1.7;
}

/* ------------------------------------------SECTION-5------------------------------------------ */


/* ------------------------------------------SECTION-6------------------------------------------ */


.section6 {
     display: block;
     margin: 0 auto;
     width: 70%;
}

.section6 h1 {
     font-size: 4em;
     font-weight: bold;
     text-align: center;
     color: white;
}

.section6 h3 {
     padding: 10px 0 2em 0;
     font-weight: 400;
     font-size: 1.4rem;
     text-align: center;
     color: white;
}

.section6 p {
     font-family: 'Raleway', sans-serif;
     font-size: 1.2rem;
     padding-bottom: 3em;
     line-height: 1.5;
}

/* ------------------------------------------SECTION-6------------------------------------------ */


/* ------------------------------------------SECTION-7------------------------------------------ */


#section7 {
     background:linear-gradient(rgb(18, 18, 18),black);
     border-radius: 20px;
     display: block;
     margin: 0 auto;
     width: 90%;
}

.section7 {
     display: block;
     margin: 0 auto;
     width: 75%;
}

.section7 h1 {
     font-size: 3.5em;
     font-family: 'Raleway', sans-serif;
     text-align: center;
     color: white;
     padding: 1.6em 0 1rem 0;
}

.section7 p {
     font-size: 1.2em;
     line-height: 1.7;
     font-family: 'Raleway', sans-serif;
     color: white;
     padding: 1.6em 0 1em 0;
}

.section7 h3 {
     padding: 1.6rem 0 0 0;
     color: rgb(170, 170, 254);
}

/* ------------------------------------------SECTION-7------------------------------------------ */


/* ------------------------------------------SECTION-8------------------------------------------ */


#section8 {
     background:linear-gradient(rgb(18, 18, 18),black);
     border-radius: 20px;
     display: block;
     margin: 2em auto;
     width: 90%;
}

.section8 {
     display: block;
     margin: 0 auto;
     width: 75%;
}

.section8 h1 {
     font-family: 'Raleway', sans-serif;
     line-height: 1.7;
     padding-top: 3em;
     color: white;
}

.section8 h2 {
     margin-bottom: 2em;
     color: white;
}

.section8child {
     grid-gap: 30px;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
}

.section8child li {
     font-family: 'Raleway', sans-serif;
     padding: 4px 0 24px 0;
     line-height: 1.9;
     list-style: square;
     color: white;
}

/* ------------------------------------------SECTION-8------------------------------------------ */


/* ------------------------------------------SECTION-9------------------------------------------ */
#section9 {
     background:linear-gradient(rgb(18, 18, 18),black);
     border-radius: 20px;
     display: block;
     margin: 2em auto;
     width: 90%;
}

.section9 {
     padding: 2em 0;
     display: block;
     margin: 2em auto;
     width: 75%;
}

.section9 h1 {
     font-size: 3rem;
     color: white;
     padding-bottom: 1em;
}

.section9 p {
     width: 90%;
     font-family: 'Raleway', sans-serif;
     line-height: 1.8;
     padding-bottom: 1em;
     font-size: 1.2rem;
}

/* ------------------------------------------SECTION-9------------------------------------------ */


/* ------------------------------------------SECTION-10------------------------------------------ */


#section10 {
     background:linear-gradient(rgb(18, 18, 18),black);
     border-radius: 20px;
     display: block;
     margin: 2em auto;
     width: 90%;
}

.section10 {
     padding: 2em 0;
     display: block;
     margin: 2em auto;
     width: 75%;
}

.section10 h1 {
     font-size: 3rem;
     color: white;
     padding-bottom: 1em;
}

.section10 p {
     width: 90%;
     font-family: 'Raleway', sans-serif;
     line-height: 1.8;
     padding-bottom: 1em;
     font-size: 1.2rem;
}



/* ------------------------------------------SECTION-10----------------------------------------- */


/* ------------------------------------------SECTION-11------------------------------------------ */


#section11 {
     background:linear-gradient(rgb(18, 18, 18),black);
     border-radius: 20px;
     display: block;
     margin: 2em auto;
     width: 90%;
}

.section11 {
     padding: 2em 0;
     display: block;
     margin: 2em auto;
     width: 75%;
}

.section11 h1 {
     font-size: 3rem;
     color: white;
     padding-bottom: 1em;
}

.section11 p {
     width: 90%;
     font-family: 'Raleway', sans-serif;
     line-height: 1.8;
     padding-bottom: 1em;
     font-size: 1.2rem;
}



/* ------------------------------------------SECTION-11------------------------------------------ */


/* ----------------------------------------SECTION-12-form---------------------------------------- */

#section12 {
     padding-top: 5em;
     margin: 1rem auto 4em auto;
     display: block;
     width: 87%;
}

.section12 {
     padding: 8em 2em 2em 12em;
     border-radius: 20px;
     background-color: #0f0f0f;
}

.section12 form {
     display: grid;
     grid-template-columns: 320px 600px;
}

.section12 h1 {
     line-height: 1.3;
     font-size: 2.6rem;
     color: white;
     font-family: 'Raleway', sans-serif;
}

.section12 p {
     margin-top: 10px;
     margin-bottom: 30px;
     width: 66%;
     font-family: 'Raleway', sans-serif;
     color: rgb(192, 192, 192);
}

#name,
#email,
#number {
     font-size: 1.1rem;
     padding: 17px 38px;
     color: rgb(255, 255, 255);
     background-color: #1a1a1a;
     border-radius: 25px;
     border: none;
     margin: 12px 0;
}

#textarea {
     width: 90%;
     height: 95%;
     font-size: 1.1rem;
     border-radius: 30px;
     color: rgb(255, 255, 255);
     border: none;
     background-color: #1a1a1a;
}

.formbtn {
     width: 80%;
     margin-left: 37em;
     margin-bottom: 2em;
     margin-top: 19px;
     display: flex;
     justify-content: center;
     font-size: 1rem;
     font-weight: 600;
     padding: 15px 10px;
     background-color: #818181;
     border-radius: 30px;
     text-align: center;
     align-items: center;
}


/* ------------------------------------------SECTION-12-form------------------------------------------ */

/* ------------------------------------------FOOTER------------------------------------------ */


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

.footer {
     display: flex;
     justify-content: space-between;
}

.footerchild1 h1,
p {
     color: white;
}

.footerchild2 {
     display: flex;
}

.footerchild2 li a {
     display: flex;
     color: white;
     padding: 10px 15px 0 15px;
     font-size: 1.4rem;
     font-family: 'Roboto', sans-serif;
}



/* ------------------------------------------FOOTER------------------------------------------ */

/* ****************************************** media query*******************************************/


@media (max-width: 1250px) {
     #section12 {
          margin: 1rem auto 4em auto;
          width: 92%;
     }

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

@media(max-width: 1100px) {
     .section12 {
          padding: 5em 2em 2em 2em;
     }

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

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

@media(max-width: 900px) {
     .section12 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;
     }
}

@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;
     }

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

     .formbtn {
          width: 80%;
          margin-left: 16em;
     }
}
@media(max-width:768px){
     #section1 {
          width: 90%;
     }
     .section1 h1 { 
          font-size: 2em; 
     }
     #section2 { 
          width: 90%;
     }
     .section3 h1 {  
          font-size: 1.3rem;
          width: 90%;
          margin: 0 auto 1em auto;
     }
     .section3 p {
          width: 80%;
          font-size: 1.2rem; 
     }
     .section4 h1{
          text-align: center;
     }
     #section4 {
          width: 90%; 
     }
     .section5 {
          margin: 3em auto;
          display: block;
          width: 80%;
     }
     .section5child1 {
          width: 90%;
     }
     .section6 { 
          width: 90%;
     }
     .section7 { 
          width: 90%;
     }
     
     .section8child {
          display: block;
     }
     .section8 { 
          width: 90%;
     }
     .section9 { 
          width: 90%;
     }
     .section10 { 
          width: 90%;
     }
     .section11 { 
          width: 90%;
     }
     
}

@media(max-width:600px) {
     .section12 h1 {
          font-size: 2rem;
     }

     .section12 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) {
     .section7 h1{
          font-size: 2.4em;
     }
     .section6 h1{
          font-size: 2.9em;
     }
     .section12 h1 {
          font-size: 1.4rem;
     }

     .section12 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: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;
     }
}


/* -----------------------------------------------cursor----------------------------------------------- */