:root {
  --green: #35736E;
  --yellow: #FFD748;
  --gray: #CACACA;
  --white: #EFF2F1;
  ;
}

.draw-paper {
  overflow-x: hidden;
}

* {
  font-family: roboto;
  margin: 0px;
  padding: 0px;
  box-sizing: 0px;
}

h1 {
  font-family: poppins;
}

p {
  font-family: roboto;
}

a {
  text-decoration: none;
  font-family: roboto;
  color: var(--white);
}

/* header */

/* nav */
header {
  display: flex;
  flex-direction: column;
  width: 100vw;
  background-color: var(--green);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  flex-wrap: wrap;
}

.a-tag {
  text-decoration: none;
  font-family: roboto;
  color: var(--white);
  font-weight: 400;
  font-size: 15px;
}

.a-tag:hover {
  text-decoration: underline var(--yellow);
}

.logo {
  color: var(--yellow);
  font-weight: 700;
  font-size: 32px;
  cursor: pointer;
}

.logo-div {
  display: flex;
  align-items: center;
}

.a-div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.pic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

/* nav */

/* hero */

.hero-container {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 100px;
  padding: 15px;
}

.hero-h1-container {}

.hero-img-container {}

.hero-img {
  width: 500px;
}

.hero-h1 {
  color: var(--white);
  font-weight: 700;
  font-size: 40px;
}
.btn-hero{background-color: var(--yellow);border: none;border-radius: 20px;padding: 6px;
padding-left: 12px;padding-right: 12px;margin-bottom: 5px;color: black;font-family: roboto;}
.btn-hero2{background-color: rgba(0, 0, 0, 0);border: none;border-radius: 20px;padding: 6px;
padding-left: 18px;padding-right: 18px;border:solid black 1px;color:black;
font-family: roboto;}
.btn-hero2:hover{background-color: black;color: white;}
/*hero */



/* article1 */

.article1-container{display: flex;padding: 100px;}
.article1-left{}
.article1-right{display: flex;align-items: center;justify-content: center;column-gap: 50px;flex-grow: 1;}
.article1-h1{font-size: 45px;}

.card-img1{width: 250px;}
.card-p{text-align: center;font-weight: 700;}
.article1-p{width: 200px;font-family: roboto;color: #6A6A6A;;}
/* article1 */


/* article2 */
.article2-container{padding-left: 100px;padding-right: 100px;}
.article2-container-flex{display: flex;align-items: top;justify-content:center;column-gap: 200px;}
.article2-img{width: 500px;height:600px;}
.article2-p{width: 400px;color: #6A6A6A;}
.article2-grid-1-p1{font-weight: 700;font-size: 16px;padding: 5px;}
.article2-grid-1-p2{font-weight: 400;font-size: 16px;color:#6A6A6A ;width: 200px;}
.article2-grid{display: grid; grid-template-columns: 1fr 1fr;column-gap: 20px;}

/* article3 */
.article3-container{padding: 100px;display: flex;align-items: top;justify-content: center;column-gap: 20px;}
.article3-left{display: flex;align-items: top;column-gap: 10px; }
.article3-left-1-img{width: 400px;height:460px;}
.article3-left-2{display: flex;flex-direction: column;}
.article3-left-2-img1{width: 170px;height: 160px;}
.article3-left-2-img2{width: 250px;height: 300px;}
.article3-right-h1{font-size: 30px;}
.article3-right-p{color: #6A6A6A;} 
.article3-right-p2{color: #6A6A6A;} 
.article3-square-ch{display: flex;align-items: top ;column-gap: 10px;}
.article3-square{display: grid;grid-template-columns: 1fr 1fr;}
/* article3 */


/* article4 */
.article4-container{padding-left: 100px;padding-right: 100px;display: flex;justify-content: center;align-content: center ;column-gap: 20px;flex-wrap: wrap;
row-gap: 30px;}

.article4-card{display: flex;column-gap: 10px;}
.article4-card-left-img{width: 120px;}
.article4-card-left-p1{font-weight: 700;font-size: 14px;}
.article4-card-left-p2{color: #6A6A6A;width: 150px;font-size: 14px;}
.article4-card-left-p3{color: #6A6A6A;font-weight: 700;font-size: 14px;cursor: pointer;}




/* article4 */

/* article5 */
.article-5{padding-top: 100px  ;padding-bottom: 100px;}
/* article5 */

/* article-6 */

.article-6{padding-bottom: 100px;display: flex;align-items: center;justify-content: center;align-content: center;
flex-direction: column;row-gap: 10px;}
.article-6-img{width: 80px;height: 80px;}
.article-6-p{margin-top: -25px;}
/* article-6 */

/* article-7 */
.article-7{display:flex;align-items: top;padding-left: 100px;padding-right: 100px;padding-bottom: 50px;}


/* article-7 */


/* article-8 */
.article-8{padding-left: 100px;padding-right: 100px;padding-bottom: 100px;display: flex;justify-content: center;column-gap: 50px;
row-gap:50px;align-content:center;flex-wrap: wrap;}
.article-8-img{width: 300px;height: 200px;}
.article-8-p{margin-top: -15px;}
/* article-8 */


/* article-9 */
.article-9{padding-left: 100px;padding-right: 100px;display: flex;justify-content: space-between;}
.article-9-right-img{width:400px;}
.article-9-left-flex{display: flex;align-items:top;column-gap: 5px;}
/* article-9 */


.article-10{padding-left: 100px;padding-right: 100px;padding-bottom: 20px;}
.article-10-flex{display: flex;column-gap: 50px;}
.article-10-p1{color: #6A6A6A;font-size: 12px;width: 300px; }
.article-10-p2{color: #6A6A6A;font-size: 12px; }

.article-11{display: flex;padding-left: 100px;padding-right: 100px;column-gap: 40px;align-items: center;padding-bottom: 100px;}

.article-12{padding-left: 200px;padding-right: 200px;display: flex;;column-gap: 10px;justify-content: center;align-content: center;}

.last{display: flex;align-content: center;justify-content: center;align-items: center;padding-left: 10px;padding-right: 10px;
font-size: 12px;}


/* RESPONSIVE */
@media screen and (width<1300px) {
  .hero-container{column-gap: 0px;}
  .article1-container{column-gap: 12px;padding-left:10px;padding-right: 10px;}
.article1-left{}
.article1-right{display: flex;align-items: center;justify-content: center;column-gap: 10px;flex-grow: 1;}
.article1-h1{font-size:14px;}

.card-img1{width: 90px;}
.card-p{text-align: center;font-weight: 700;font-size: 12px;}
.article1-p{width: 120px;font-family: roboto;font-size: 12px;}

.article2-container-left-h1{font-size: 20px;}
.article2-p{width: 250px;}
.article2-grid-1-p1{font-size: 13px;width:150px}
.article2-grid-1-p2{font-weight: 400;font-size: 16px;color:#6A6A6A ;width: 130px;}
.article2-img{width: 400px;height: 500px;}

/* article3 */
.article3-container{padding: 100px;display: flex;align-items: top;justify-content: center;column-gap: 20px;}
.article3-left{display: flex;align-items: top;column-gap: 10px; }
.article3-left-1-img{width: 300px;height:350px;}
.article3-left-2{display: flex;flex-direction: column;}
.article3-left-2-img1{width: 130px;height: 120px;}
.article3-left-2-img2{width: 150px;height: 230px;}
.article3-right-h1{font-size: 20px;}
.article3-right-p{color: #6A6A6A;font-size: 15px;} 
.article3-right-p2{color: #6A6A6A;font-size: 14px;} 
.article3-square-ch{display: flex;align-items: top ;}
.article3-square{display: grid;grid-template-columns: 1fr 1fr;}
/* article3 */

} 

@media screen and (height<500px) {
  .article1-container{padding: 10px;padding-left:15px ;}
  .article2-container{padding-top: 35px;}
  .article-9{column-gap: 15px;}

}


@media screen and (width<950px) {
  .hero-img {width: 350px; }

  .hero-h1 {font-size: 25px;}
.article2-container-flex{column-gap: 100px;}
.article2-container-left-h1{font-size: 12px;}
.article2-p{width: 250px;font-size: 12px;}
.article2-grid-1-p1{font-size: 10px;width:150px}
.article2-grid-1-p2{font-weight: 400;font-size: 10px;color:#6A6A6A ;width: 130px;}
.article2-img{width: 200px;height: 350px;}

/* article3 */
.article3-container{padding: 100px;display: flex;align-items: top;justify-content: center;column-gap: 20px;}
.article3-left{display: flex;align-items: top;column-gap: 10px; }
.article3-left-1-img{width: 90px;height:190px;}
.article3-left-2{display: flex;flex-direction: column;}
.article3-left-2-img1{width: 60px;height: 70px;}
.article3-left-2-img2{width: 60px;height: 120px;}
.article3-right-h1{font-size: 10px;}
.article3-right-p{color: #6A6A6A;font-size: 9px;} 
.article3-right-p2{color: #6A6A6A;font-size: 9px;width: 90px;} 
.article3-square-ch{display: flex;align-items: top ;}
.article3-square{display: grid;grid-template-columns: 1fr 1fr;}
/* article3 */
.article-9-right-img{width:300px;}

.article-10{padding-left: 50px;padding-right: 50px;}
.article-10-flex{display: flex;column-gap: 30px;}
.article-10-p1{color: #6A6A6A;font-size: 12px;width: 200px; }
.article-10-p2{color: #6A6A6A;font-size: 12px; }


}

@media screen and (width<650px) {
  .hero-img {  width: 220px;}

  .hero-h1 {color: var(--white);font-weight: 700;font-size: 12px;}
  .a-tag {  font-size: 11px;}
.hero-container{column-gap: 0px;}
  .article1-container{column-gap: 8px;padding-top:30px;padding-left:10px;padding-right: 10px;}
.article1-left{}
.article1-right{display: flex;align-items: center;justify-content: center;column-gap: 10px;flex-grow: 1;}
.article1-h1{font-size:14px;font-weight: 700;}

.card-img1{width: 65px;}
.card-p{text-align: center;font-weight: 700;font-size: 12px;width: 60px;}
.article1-p{width: 120px;font-family: roboto;font-size: 12px;}
.btn-hero{background-color: var(--yellow);border: none;border-radius: 20px;padding: 6px;
padding-left: 12px;padding-right: 12px;font-size: 11px;font-family: roboto;font-weight: 500;}
.btn-hero2{background-color: rgba(0, 0, 0, 0);border: none;border-radius: 20px;padding: 6px;
padding-left: 12px;padding-right: 12px;border:solid black 1.5px;font-size: 11px;font-family: roboto;font-weight: 500;}

.hero-h1{font-size:10px;}

.article2-container-flex{column-gap: 0px;}
.article2-container-left-h1{font-size: 10px;}
.article2-p{width: 150px;font-size: 10px;}
.article2-grid-1-p1{font-size: 8px;width:100px}
.article2-grid-1-p2{font-weight: 400;font-size: 8px;color:#6A6A6A ;width: 60px;}
.article2-img{width: 130px;height: 400px;}

.article-7{display:flex;align-items: top;padding-left: 10px;padding-right: 10px;padding-bottom: 50px;}
.article-8{padding-left: 0px;padding-right: 0px;}

.article-9-right-img{width:220px;}
.article-9{padding-left: 20px;padding-right: 20px;display: flex;justify-content: space-between;column-gap: 15px;}

.article-10{padding-left: 10px;padding-right: 10px;}
.article-10-flex{display: flex;column-gap: 15px;}
.article-10-p1{color: #6A6A6A;font-size: 10px;width: 120px; }
.article-10-p2{color: #6A6A6A;font-size: 10px; }

.article-12-p{}
.article-12{padding-left: 10px;padding-right: 10px;;column-gap: 10px;}
}

/* RESPONSIVE */