/* CSS INDEX.HTML */

* {
    position: relative;
}

section.page {
    z-index: 1;
    background: rgb(0,28,124);
    background: linear-gradient(315deg, rgba(0,28,124,1) 13%, rgba(0,114,193,1) 93%);
}

li a:hover {
    color: #1595c8;
    transition: all 0.25s ease;
  }
  
  ul li ul li a:hover {
    padding-left: 10px;
    border-left: 2px solid #1595c8;
    transition: all 0.25s;
  }
  
  .darkmode--activated .nav__links a:hover {
    color: #1595c8;
    transition: all 0.3s;
  }
  
  .darkmode--activated .nav__links a:focus {
    color: #1595c8;
    transition: all 0.3s;
  }
  
  a.nav-a-accueil:after {
    content: '';
    display: inline-block;
    width: 40px;
    height: 6px;
    background-color: #1595c8;
    -webkit-transform: skew(-30deg) translateX(-50%);
    -moz-transform: skew(-30deg) translateX(-50%);
    -o-transform: skew(-30deg) translateX(-50%);
    tranform: skew(-30deg) translateX(-50%);
    position: absolute;
    bottom: -1rem;
    left: 50%;
    opacity: 1;
  }

.nav__links li a span i {
    color: black;
    transition: all 0.3s;
}

.nav__links li a:hover span i {
    color: #1595c8;
    transition: all 0.3s;
}

.darkmode--activated .nav__links li a span i {
    color: white;
    transition: all 0.3s;
}

.darkmode--activated .nav__links li a:hover span i {
    color: #1595c8;
    transition: all 0.3s;
}

/* ------------------------------------------------------------------------------------ */

.grid {
    z-index: 3;
}

svg {
    z-index: 3;
}

.custom-shape-divider-bottom-1636207561 {
    position: absolute;
    bottom: 100;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1636207561 svg {
    position: relative;
    display: block;
    width: calc(135% + 1.3px);
    height: 180px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1636207561 .shape-fill {
    fill: #0066CC;
}

.custom-shape-divider-top-1636207616 {
    position: absolute;
    top: 200;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top: 180px;
}

.custom-shape-divider-top-1636207616 svg {
    position: relative;
    display: block;
    width: calc(135% + 1.3px);
    height: 180px;
}

.custom-shape-divider-top-1636207616 .shape-fill {
    fill: #0066CC;
}

/* ------------------------------------------------------------------------------------ */

.container {
    margin-top: -200px;
    z-index: 2;
}

.container-sdbackground {
    margin-top: -7%;
    z-index: 3;
}

#curved-corner-bottomright {
    width: 100%;
    bottom: -85px;
}

#curved-svg {
    clip-path: polygon(0px 325px,1689px 491px,1688px -466px,1px 82px);
    -webkit-clip-path: polygon(0px 325px,1689px 491px,1688px -466px,1px 82px);
    height: 100%;
    width: 100%;
    background-color: #77cce9;
    margin-top: -2000px;
    z-index: 3;
}

/* ------------------------------------------------------------------------------------ */

.container {
    position: relative;
    width: 100%;
    margin: 0px;
    color: #444;
    font-size: 14px;
    font-weight: 300;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 100px;
  }

  .section .container {
    padding: 30px 0 50px 0;
  }

  p.accueil-msg {
    color: black;
  }

  i {
    color: black;
  }

  .col {
    float: left;
    padding: 0;
    margin: 0;
    position: relative;
  }
  
  .col.four {
    width: 20%;
    margin: 0 1%;
    margin-left: 50px;
    margin-right: 50px;
  }
  
  .col.extrapad {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  .col .service,
  .col .feature {
    color: black;
    font-size: 21px;
    font-weight: 500;
    text-align: center;
  }
  
  .col .service:after {
    content: "";
    width: 50px;
    position: relative;
    border-bottom: 1px solid #eee;
    display: block;
    text-align: center;
    margin: auto;
    margin-top: 15px;
  }
  
  .col .feature {
    font-size: 19px;
  }
  
  .col h1.side,
  .col p.side,
  .col span.side:first-of-type {
    margin-left: 50px;
    text-align: left;
  }
  
  .icon {
    border-radius: 50%;
    height: 85px;
    width: 85px;
    line-height: 85px;
    text-align: center;
    margin: 0 auto;
    transition: all 0.25s;
    background-color: whitesmoke;
    margin-bottom: 20px;
    margin-top: 15px;
  }

  .icon:hover {
    transition: all 0.25s;
  }

  .icon-avancement:hover {
      background-color: #fecc0c;
  }

  .icon-dropbox:hover {
      background-color: #1595c8;
  }

  .icon-sketchup:hover {
      background-color: #e20331;
  }

  .icon-calc:hover {
      background-color: #e20331;
  }

  .icon-agenda:hover {
      background-color: #fecc0c;
  }

  .icon:hover > .fa {
    color: white;
    transition: all 0.25s;
  }

  .darkmode--activated p.accueil-msg {
      color: white;
      transition: all 0.25s;
  }

  .darkmode--activated .service {
    color: white;
    transition: all 0.25s;
}


/* ------------------------------------------------------------------------------------ */