FM / sass

/home/techb158/l2hypotheques.com/wp-content/themes/pylon/assets/sass/

/home/techb158/l2hypotheques.com/wp-content/themes/pylon/assets/sass

Name	Size	Mode	Actions
utility/	-	0755	rm
variables/	-	0755	rm
main.scss	5786	0644	edit dl rm
_about.scss	9014	0644	edit dl rm
_animations.scss	1831	0644	edit dl rm
_blog-details.scss	3298	0644	edit dl rm
_blog-sidebar.scss	1989	0644	edit dl rm
_call-to-action.scss	1441	0644	edit dl rm
_client-carousel.scss	468	0644	edit dl rm
_common.scss	6117	0644	edit dl rm
_contact.scss	2527	0644	edit dl rm
_credit-card.scss	2046	0644	edit dl rm
_faq.scss	2978	0644	edit dl rm
_features.scss	7038	0644	edit dl rm
_footer.scss	4469	0644	edit dl rm
_forms.scss	1114	0644	edit dl rm
_fun-fact.scss	1859	0644	edit dl rm
_google-map.scss	187	0644	edit dl rm
_how-works.scss	779	0644	edit dl rm
_mobile-nav.scss	4207	0644	edit dl rm
_navigation.scss	7786	0644	edit dl rm
_page-header.scss	1169	0644	edit dl rm
_search-popup.scss	1424	0644	edit dl rm
_services.scss	10854	0644	edit dl rm
_slider.scss	4486	0644	edit dl rm
_team.scss	6282	0644	edit dl rm
_testimonials.scss	2274	0644	edit dl rm
_trusted-company.scss	2450	0644	edit dl rm
_video.scss	2708	0644	edit dl rm
_why-choose.scss	3503	0644	edit dl rm

Edit: /home/techb158/l2hypotheques.com/wp-content/themes/pylon/assets/sass/_trusted-company.scss (2450B)

.block-title {
    max-width: 520px;
    @media (max-width: 991px) {
      max-width: 450px;
      text-align: center !important;
      margin-left: auto;
      margin-right: auto;
    }
    p {
      color: $thm-text-dark;
    }
    h2 {
      font-weight: 400;
      color: #fff;
      letter-spacing: -0.01em;
    }
  }
  &__image {
    display: flex;
    align-items: center;
    @media (max-width: 1199px) {
      flex-wrap: wrap;
    }
    @media (max-width: 991px) {
      flex-wrap: nowrap;
    }
    @media (max-width: 480px) {
        flex-wrap: wrap;
      }
    > img {
      flex-shrink: 0;
      border-radius: $border-radius;
    }
    p {
      margin: 0;
      margin-left: 30px;
      color: $thm-text-dark;
      @media (max-width: 1199px) {
        margin-left: 0;
        margin-top: 30px;
      }
      @media (max-width: 991px) {
        margin-left: 30px;
        margin-top: 0;
      }
      @media (max-width: 480px) {
        margin-left: 0;
        margin-top: 30px;
      }
    }
  }

&__box + &__box {
    margin-top: 30px;
  }

&__box {
    background-color: #fff;
    border-radius: $border-radius;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    transition: all 500ms ease;

&-wrap {
      margin-left: 70px;
      @media (max-width: 1199px) {
        margin-left: 0;
        margin-top: 50px;
      }
    }
    > span {
      border-radius: 50%;
      width: 60px;
      height: 60px;
      background-color: $thm-base;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      flex-shrink: 0;
      transition: all 500ms ease;
    }
    p {
      margin-bottom: 0;
      color: $thm-black;
      font-size: 20px;
      line-height: 26px;
      margin-left: 30px;
      max-width: 260px;
      transition: all 500ms ease;
    }

&:hover {
      background-color: $thm-base;
      > span {
        background-color: #fff;
        color: $thm-black;
      }
      p {
        color: #fff;
      }
    }
  }
}

.trusted-company { background-color: #0c2139; position: relative; padding: 120px 0; &__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.02; background-size: cover; } .block-title { max-width: 520px; @media (max-width: 991px) { max-width: 450px; text-align: center !important; margin-left: auto; margin-right: auto; } p { color: $thm-text-dark; } h2 { font-weight: 400; color: #fff; letter-spacing: -0.01em; } } &__image { display: flex; align-items: center; @media (max-width: 1199px) { flex-wrap: wrap; } @media (max-width: 991px) { flex-wrap: nowrap; } @media (max-width: 480px) { flex-wrap: wrap; } > img { flex-shrink: 0; border-radius: $border-radius; } p { margin: 0; margin-left: 30px; color: $thm-text-dark; @media (max-width: 1199px) { margin-left: 0; margin-top: 30px; } @media (max-width: 991px) { margin-left: 30px; margin-top: 0; } @media (max-width: 480px) { margin-left: 0; margin-top: 30px; } } } &__box + &__box { margin-top: 30px; } &__box { background-color: #fff; border-radius: $border-radius; padding: 25px 30px; display: flex; align-items: center; transition: all 500ms ease; &-wrap { margin-left: 70px; @media (max-width: 1199px) { margin-left: 0; margin-top: 50px; } } > span { border-radius: 50%; width: 60px; height: 60px; background-color: $thm-base; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; font-size: 16px; font-weight: 500; flex-shrink: 0; transition: all 500ms ease; } p { margin-bottom: 0; color: $thm-black; font-size: 20px; line-height: 26px; margin-left: 30px; max-width: 260px; transition: all 500ms ease; } &:hover { background-color: $thm-base; > span { background-color: #fff; color: $thm-black; } p { color: #fff; } } } }