// ------------  [header]  ------------
.wrapper {
    overflow: hidden;

    &__logo {
        max-width: 160rem;
        width: 100%;
        padding: 6rem 2rem;
        padding-bottom: 2rem;
        margin: 0 auto;

        a {

            img {
                width: 21rem;
                height: 100%;
                object-fit: contain;
            }
        }
    }

    .header {
        padding: 0 2rem;


        &__content {
            display: grid;
            grid-template-columns: minmax(300px, 500px) minmax(450px, 1fr);
            gap: 5rem;

            &--left {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
                justify-content: center;
                align-items: center;

                .heading {
                    padding: 0 2rem;

                    p {
                        font-weight: 400;
                        font-size: 2rem;
                        text-align: left;
                        color: $primary;

                    }

                    &__main {
                        font-weight: 500;
                        font-size: 9rem;
                        text-align: left;
                        color: $black;

                    }

                    &__sub {
                        font-weight: 400;
                        font-size: 2.5rem;
                        text-align: left;
                        color: $black !important;

                    }

                }

                &-card {
                    max-width: 47rem;
                    width: 100%;
                    height: 30rem;
                    background-color: $primary;
                    color: $white;
                    border-radius: 22px;
                    box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.16);
                    padding: 3rem 2rem;
                    margin-top: 5rem;

                    .img {
                        width: 100%;
                        display: flex;
                        justify-content: flex-end;

                        img {
                            width: 8rem;
                            height: 100%;
                            object-fit: contain;

                        }
                    }

                    .card-text {
                        color: $white;
                        font-weight: 500;
                        font-size: 2.5rem;
                        line-height: 4rem;
                        text-align: left;
                        margin: 2.5rem 5.4rem;

                    }

                    .btn-primary {
                        margin-left: 5.4rem;
                        margin-right: 5.4rem;
                        button{
                            width: 15rem;
                            height: 6rem;
                            background-color: $black;
                            color: $white;
                            border-radius: 9px;
                            font-weight: 700;
                            font-size: 1.9rem;
                        }
                    }
                }
            }

            &--right {
                max-width: 100rem;
                width: 100%;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }

        }
    }
}