@import "src/assets/scss/variables";

:root {
    --button-border:#1A73E8;

  }
  :root[data-theme="dark"] {
    --button-border:#CCCCCC;
  }
.slide {
   justify-content: center;

    &--img-container {
      text-align: center;
      margin-top: 9rem;
      display: flex;
      justify-content: flex-end;
      padding:0 40px 60px 0;
        @media only screen and (max-width: 1350px) {
            justify-content: center;
        }
    }

    &--content-container {
        margin-top: 9rem;
padding: 0 0 60px 40px;
        &--hyper-title {
            margin-bottom: 0.6rem;
            font-size: 2rem;
            font-weight: 300;
            color: $title-color;

            @media only screen and (max-width: 1024px) {
                font-size: 1.6rem;
            }
        }

        &--title {
            line-height: 1;
            margin-bottom: 2.5rem;
            font-size: 2.5rem;
            font-weight: 700;
            color: $title-color;

            @media only screen and (max-width: 1024px) {
                font-size: 2rem;
            }
        }

        &--btn-container {
            a {
                padding: 1.3rem 1.5rem;
                text-decoration: none;
                border: 1px solid var(--button-border);
                font-size: 1.4rem;
                font-weight: 900;
                color: $title-color;
                cursor: pointer;
                transition: all 0.5s;

                &:hover {
                    background-color: $secondary-color;
                    color: $white;
                }

                @media only screen and (max-width: 1024px) {
                    font-size: 1.2rem;
                }
            }
        }

        @media only screen and (max-width: 1024px) {
            margin-top: 4rem;
        }
    }

    @media only screen and (max-width: 974px) {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
  img{
    filter:$svg-default;
  }
}