#section-title, #section-end{

    height: 90vh;

}



#section-end {

    height: 93vh;

    padding-top: 7vh;

    scroll-margin: 7vh;

}



.service h2 {

    display: flex;

    align-items: center;

    gap: 2vw;

}



.service h2 img{

    width: 50px;

    height: auto;

    display: block;

}





#section-title h1, #section-end h1 {

    font-size: 3rem;

    padding: 10vh 4vw;

    padding-right: 25vw;

}



#section-end h2 {

    margin: 0 3vw;

}



#section-end p {

    margin: 0 auto;

    max-width: 80%;

    font-size: x-large;

}



#section-title p{

    padding: 0 4vw;

    max-width: 50%;

    font-size: x-large;

}

@media (max-width: 768px) {

    #section-title h1 {

        font-size: 1.8rem;

    }

    #section-title p {

        text-align: left;

        max-width: 80%;

        font-size: large;

    }

}







h2 {

    font-size:xx-large;

}







@media (max-width: 768px) {

    h2 {

        font-size:large;

    }

}







:root{

    --grid-service-segment-color: rgba(40, 129, 225, 0.8);

}





.service{

    height:100vh;

    scroll-margin: 7vh;

}



.grid-service{

    position: relative;

    z-index: 0;

    border-radius: 2vw;

    margin: 0vw 4vw;

    display: grid;

    grid-template-columns: 1fr 1fr;

    overflow: hidden;

    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);

    background-color: rgba(4, 2, 40, 0.089);

    transition: all 1s ease;

}



.left{grid-template-areas: "info text";}

.right{grid-template-areas: "text info";}



.grid-service .goal-and-deliverable { grid-area: info; }

.grid-service .text-container-service { grid-area: text; }





@media (max-width: 768px) {

  .grid-service {

    display: grid;                 

    grid-template-columns: 1fr;

    grid-template-areas:

      "info"

      "text";

  }



  .grid-service > div {

    border-right: none;

    border-left: none;

    border-radius: 0;

  }



    .grid-service .goal-and-deliverable {

        border: none;

        border-bottom: none;

        border-radius: 2vw 2vw 0 0;

    }





    .grid-service> div:nth-child(1){

        border: none;

        border-radius : 0 0 2vw 2vw;

        border-right: 3px solid var(--grid-service-segment-color);

        border-left: 3px solid var(--grid-service-segment-color);

        border-top: 3px solid var(--grid-service-segment-color);

    }

    .grid-service> div:nth-child(2){

        border: none;

        border-radius : 2vw 2vw 0 0;

        border-right: 3px solid var(--grid-service-segment-color);

        border-left: 3px solid var(--grid-service-segment-color);

    }



    .grid-service .text-container-service {

        border: none;

        border-top: none;

        border-radius: 0 0 2vw 2vw;

    }



    .grid-service h3 { font-size: 4vw; }

    .grid-service p,

    .grid-service li,

    .big-ass-text { font-size: 3.5vw; }

    .icon-service { height: 6vw; }

}











































.grid-service::after{

    content: "";

    position: absolute;

    inset: 0;

    background-image: url("../res/blue_print.png");

    background-position: center;

    opacity: 0.2;

    z-index: -1;

    pointer-events: none;

    

}



.service:hover .grid-service {

    transform: scale(1.05);

}





@media (min-width: 769px) {

.grid-service> div:nth-child(1) {

    border-radius : 2vw 0 0 2vw;

    border-right: 3px solid var(--grid-service-segment-color);

    border-left: 3px solid var(--grid-service-segment-color);

}



.grid-service> div:nth-child(2){

    border-radius : 0 2vw 2vw 0;

    border-right: 3px solid var(--grid-service-segment-color);

}

}

.goal-and-deliverable {

    display: grid;

    grid-template-rows: 2fr auto 1fr;

}



.subtitle-service{

    display:flex;

    justify-content: center;

    align-items: center;

    gap: 1vw;

    margin: auto;

    text-align: center; 

}



.deliverable, .goal, .text-container-service{

    

    padding: 1vw 3vw;

    transition: all 1s ease; 

}



.text-container-service:hover{

    background-color: rgba(9, 108, 170, 0.123);

}



.goal:hover {

    background-color: rgba(9, 108, 170, 0.123);

}



.deliverable:hover {

    background-color: rgba(9, 109, 170, 0.221);

}



.icon-service{

    height: 3vw;

}



.grid-service h3 {

    margin: auto 2vw;

    font-size: larger;

}

.grid-service p {

    font-size: medium;

}



.grid-service li {

    font-size:medium;

}



@media (max-width: 768px) {

    .grid-service h3 {

    font-size: large;

    }

    .grid-service p {

        font-size: 1rem;

    }



    .grid-service li {

        font-size: smaller;

    }

}

















.grid-service hr {

    margin: 0;

    padding: 0;

    width: 100%;

    border-top: 3px solid var(--grid-service-segment-color);

}



.big-ass-text{

    padding: 3vw 2vw;

    text-align: center;

    font-size: 1.3vw;

}



.end-bloc h2 {

    padding : 1vw;

    text-align: center;

}



.end-bloc {

    text-align: center;

    margin: 1vw auto;

    width : 90%;

    padding: 2vw;

    border-radius: 2vw;

    border: 2px solid var(--grid-service-segment-color);

    background-color:rgba(165, 197, 235, 0.27);

}