@media(prefers-color-scheme: light){

    :root{

        --sector-img-p : #444;

        --sector-img-title : #333;

    }

}





@media(prefers-color-scheme: dark){

    :root{

        --sector-img-p : #cbcbcb;

        --sector-img-title : #ececec;



    }

}







#focus-by-sector{

    height: 90vh;

    scroll-snap-align: center;

    scroll-margin-top: 4vw;

    text-align: center;

    background-size: 100%;

    width: 100vw;

    background-image: url(../res/light/background-title.png), linear-gradient(to bottom right, var(--gradient-from) 20%, var(--gradient-to), var(--gradient-from) 80%);

}



main{

    overflow:-moz-hidden-unscrollable;

    height:100vh;

    overflow: scroll;

}

.sector {

  padding: 60px 5%;

}



.sector-section-left,

.sector-section-right {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

}



.sector-img,

.sector-text {

  flex: 1;

}



.sector-img img {

  max-width: 100%;

  height: auto;

  border-radius: 10px;

  margin-bottom: 15px;

}



.sector-section-left {

  flex-direction: row;

}



.sector-section-right {

  flex-direction: row-reverse;

}



.sector-text h3 {

  font-size: 1.8rem;

  margin-bottom: 15px;

}



.sector-text h5 {

  font-size: 1.2rem;

  margin-top: 20px;

  margin-bottom: 10px;

}



.sector-text p,

.sector-img p {

  line-height: 1.6;

  color: var(--sector-img-p);

}



.sector-text hr {

  margin: 20px 0;

  border: 0;

  border-top: 1px solid #ddd;

}



@media (max-width: 900px) {

  .sector-section-left,

  .sector-section-right {

    flex-direction: column;

  }



  .sector-img,

  .sector-text {

    flex: 1 1 100%;

  }

}





h1{

    padding-top: 15vw;

}

h3 {

    font-size: 2vw;

}

h5{

    font-size: 1.2vw;

}



.img-principle{

    height:3vw;

}



.max-w{

  width: 100%;

  border: 1px solid rgb(23, 75, 160);

  margin: 0;

  margin: 0px auto;

}