careers.css

/*-- ------------------------------------- section-1 ------------------------------------ */

#section1 {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 707px;
}

#section1::before {
     position: absolute;
     content: "";
     top: 0;
     left: 0;
     z-index: -1;
     opacity: 0.9;
     height: 100%;
     width: 100%;
     background: url("./images/video-bg.png") no-repeat center center/cover;
}

.section1 h1 {
     color: white;
     font-size: 5em;
     position: absolute;
     top: 55%;
     left: 6%;
}

.section1 h2 {
     color: white;
     font-size: 5em;
     position: absolute;
     top: 67%;
     left: 6%;
}

.section1 .btn {
     background-color: #fff;
     padding: 15px 28px;
     border: none;
     border-radius: 30px;
     font-weight: 600;
     font-family: 'Raleway', sans-serif;
     font-size: 1.1rem;
}

.btn1 {
     position: absolute;
     top: 85%;
     left: 6%;
}

.btn2 {
     position: absolute;
     top: 85%;
     left: 24%;
}

/*-- ------------------------------------- section-1 ------------------------------------ */

/*-- ------------------------------------- section-2 ------------------------------------ */
#section2 {
     width: 90%;
     display: block;
     text-align: left;
     margin: 2em auto;
}

#section2 h1 {
     width: 76%;
     color: white;
     font-family: 'Raleway', sans-serif;
     font-size: 1.8rem;
     font-weight: 400;
}


/*-- ------------------------------------- section-2 ------------------------------------ */

/*-- ------------------------------------- section-3 ------------------------------------ */

#section3 {
     width: 90%;
     display: block;
     margin: 0 auto;
}

.section3 {
     margin: 2em 0;
}

.section3 h5 {
     margin-top: 60px;
     margin-bottom: 28px;
     font-size: 1.3em;
     color: white;
}

.section3child1 h2 {
     margin: 10px 0;
     color: white;
}

.section3child1 p {
     color: rgb(198, 198, 198);
     margin-bottom: 19px;
}

.section3child1 a {
     color: white;
}

/*-- --------------------------------------- section-3 ------------------------------------- */

/*-- --------------------------------------- section-4 ------------------------------------- */


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

.section4 {
     margin: 2em 0;
}

.section4 h5 {
     margin-top: 60px;
     margin-bottom: 28px;
     font-size: 1.3em;
     color: white;
}

.section4mainchild {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
}

.section4child1 {
     margin-right: 12em;
}

.section4child1 h2 {
     margin: 10px 0;
     color: white;
}

.section4child1 p {
     color: rgb(198, 198, 198);
     margin-bottom: 19px;
}

.section4child1 a {
     color: white;
}


/*-- --------------------------------------- section-4 ------------------------------------- */

/*-- --------------------------------------- section-5 ------------------------------------- */

#section5 {
     width: 90%;
     display: block;
     margin: 0 auto;
}

.section5 {
     margin: 2em 0;
}

.section5 h5 {
     margin-top: 60px;
     margin-bottom: 28px;
     font-size: 1.3em;
     color: white;
}

.section5mainchild {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
}

.section5child1 {
     margin-right: 12em;
}

.section5child1 h2 {
     margin: 10px 0;
     color: white;
}

.section5child1 p {
     color: rgb(198, 198, 198);
     margin-bottom: 19px;
}

.section5child1 a {
     color: white;
}

/*-- --------------------------------------- section-5 ------------------------------------- */


/*-- --------------------------------------- section-6 ------------------------------------- */


#section6 {
     width: 90%;
     display: block;
     margin: 0 auto;
}

.section6 {
     margin: 2em 0;
}

.section6 h5 {
     margin-top: 60px;
     margin-bottom: 28px;
     font-size: 1.3em;
     color: white;
}

.section6mainchild {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
}

.section6child1 {
     margin-right: 12em;
}

.section6child1 h2 {
     margin: 10px 0;
     color: white;
}

.section6child1 p {
     color: rgb(198, 198, 198);
     margin-bottom: 19px;
}

.section6child1 a {
     color: white;
}


/*-- --------------------------------------- section-6 ------------------------------------- */


/*-- --------------------------------------- section-7 ------------------------------------- */


#section7 {
     width: 90%;
     display: block;
     margin: 0 auto;
}

.section7 {
     margin: 2em 0;
}

.section7 h5 {
     margin-top: 60px;
     margin-bottom: 28px;
     font-size: 1.3em;
     color: white;
}

.section7mainchild {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
}

.section7child1 {
     margin-right: 12em;
}

.section7child1 h2 {
     margin: 10px 0;
     color: white;
}

.section7child1 p {
     color: rgb(198, 198, 198);
     margin-bottom: 19px;
}

.section7child1 a {
     color: white;
}


/*-- --------------------------------------- section-7 ------------------------------------- */


/*-- --------------------------------------- section-8 ------------------------------------- */


#section8 {
     width: 90%;
     display: block;
     margin: 0 auto;
}

.section8 {
     margin: 2em 0;
}

.section8 h5 {
     margin-top: 60px;
     margin-bottom: 28px;
     font-size: 1.3em;
     color: white;
}

.section8mainchild {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
}

.section8child1 {
     margin-right: 12em;
}

.section8child1 h2 {
     margin: 10px 0;
     color: white;
}

.section8child1 p {
     color: rgb(198, 198, 198);
     margin-bottom: 19px;
}

.section8child1 a {
     color: white;
}


/*-- --------------------------------------- section-8 ------------------------------------- */

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

#section10 {
     margin: 16rem auto 4em auto;
     display: block;
     width: 90%;
}

.section10 {
     padding: 0 4em;
     border-radius: 20px;
     background-color: #0f0f0f;
     display: flex;
}

.section10child1 {
     width: 50%;
     display: block;
}

.section10child2 {
     width: 50%;
}

.section10child1 img {
     width: 55%;
     margin-top: -3em;
     margin-bottom: 1em;
}

.section10child1 p {
     font-size: 1.2em;
}

.section10child1 h1 {
     font-size: 3em;
     font-family: 'Raleway', sans-serif;
     color: white;
}

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

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

.form-control {
     margin-top: -3.9em;
     margin-bottom: 1rem;
     margin-left: 42%;
     width: 42%;
     padding: 17px 1px 17px 17px;
     font-size: 1.1rem;
     border-radius: 30px;
     color: rgb(117, 113, 114);
     border: none;
     background-color: #1a1a1a;
}

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

.formbtn:hover {
     transition: all 0.5s;
     cursor: pointer;
     background-color: #989696;
}

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

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


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

.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 (max-width:1250px) {

     .btn2 {
          top: 85%;
          left: 28%;
     }

}

@media(max-width:1130px) {
     .section1 .btn {
          padding: 15px 20px;
          font-size: 0.9rem;
     }

     .btn1 {
          top: 78%;
          left: 6%;
     }

     .btn2 {
          top: 78%;
          left: 28%;
     }

     .section1 h1 {
          font-size: 3em;
     }

     .section1 h2 {
          font-size: 3em;
          top: 64%;
     }

     .section10child1 {
          width: 40%;
     }

     .section10child2 {
          width: 60%;
     }

     .section10child1 h1 {
          font-size: 2em;
          font-family: 'Raleway', sans-serif;
          color: white;
     }

     .section10 {
          padding: 0 1em 0 2em;
     }

     .section7mainchild {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
     }

     .section7child1 {
          margin: 20px 0;
     }
}

@media (max-width: 876px) and (min-width: 830px) {
     .form-control {
          margin-top: -5.3em;
     }
}


@media(max-width:830px) {
     .section1 .btn {
          padding: 12px 15px;
          font-size: 0.7rem;
     }

     .btn2 {
          top: 78%;
          left: 29%;
     }

     #section2 h1 {
          width: 100%;
     }

     .section10 {
          display: block;
          padding: 0 1em 1em 2em;
     }

     .formbtn {
          margin-left: 10px;
     }

     .section10child1 {
          width: 100%;
     }

     .section10child2 {
          width: 100%;
     }

     #name,
     #email,
     #number {
          width: 46%;
     }

     #textarea {
          width: 96%;
     }

     .form-control {
          margin-left: 48%;
          width: 47%;
     }

     .formbtn {
          width: 92%;
     }

}

@media (max-width:602px) {

     .btn1 {
          top: 71%;
          left: 6%;
     }

     .btn2 {
          top: 71%;
          left: 35%;
     }

     .section1 h1 {
          font-size: 2em;
     }

     .section1 h2 {
          font-size: 2em;
          top: 61%;
     }

     #section2 h1 {
          font-size: 1.5rem;
     }

     .form-control {
          margin-top: -5em;
     }

     #section3,
     #section4,
     #section5,
     #section6,
     #section7,
     #section8 {
          text-align: center;
     }

     .section4mainchild,
     .section5mainchild,
     .section6mainchild,
     .section7mainchild,
     .section8mainchild {
          display: block;
     }

     .section4child1,
     .section5child1,
     .section6child1,
     .section7child1,
     .section8child1 {
          width: 100%;
          text-align: center;
     }

}

@media (max-width:460px) {
     .section1 .btn {
          padding: 12px 10px;
     }

     .btn2 {
          left: 42%;
     }

     .section10child1 h1 {
          font-size: 1.6em;
     }

     .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) {
     .section1 h1 {
          font-size: 1.5em;
     }

     .section1 h2 {
          font-size: 1.5em;
     }

     .btn2 {
          left: 6%;
          top: 80%;
     }

     #name,
     #email,
     #number {
          width: 95%;
          font-weight: 400;
     }

     .form-control {
          margin-top: -1rem;
          width: 95%;
          margin-left: 0em;
     }

     .formbtn {
          margin-left: 2px;
     }
}