@use '../root' as *;
@use '../utilities' as *;

.appointment1 {
    background: $bg-color;
    &-content {
        position: relative;
        &-thumb {
            &::before {
                content: "";
                position: absolute;
                z-index: 1;
                inset: 0;
                border-radius: 20px 0px 0px 20px;
                background: linear-gradient(180deg, rgba(9, 50, 36, 0.00) 0%, #093224 91.66%);
            }
            img {
                border-radius: 20px 0px 0px 20px;
                width: 100%;
            }
        }
        &-info {
            position: absolute;
            z-index: 7;
            bottom: 10%;
            left: 10%;
            @include breakpoint (max-md){
                left: 2%;
            }
            &__subtitle {
                display: flex;
                gap: 5px;
                color: rgba(255, 255, 255, 0.80);
                font-family: $body-font;
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                line-height: 56px; /* 311.111% */
                text-transform: uppercase;
                img {
                    padding-right: 5px;
                }
            }
            &__title {
                border-bottom: 1px solid rgba(255, 255, 255, 0.20);
                padding-bottom: 40px;
                margin-bottom: 40px;
                color: $white;
                font-family: $body-font;
                font-size: 50px;
                font-style: normal;
                font-weight: 700;
                line-height: 56px; /* 112% */

                @include breakpoint (max-md){
                    padding-bottom: 10px;
                    margin-bottom: 10px;
                    font-size: 42px;
                    line-height: 50px;
                }
                @include breakpoint (max-sm){
                    padding-bottom: 21px;
                    margin-bottom: 7px;
                    font-size: 34px;
                    line-height: 40px;
                }
            }
            &__text {
                color: $white;
                font-family: $body-font;
                font-size: 24px;
                font-style: normal;
                font-weight: 500;
                line-height: 34px; 
                padding-bottom: 20px;
            }
            .fancy-wrap {
                display: flex;
                column-gap: 60px;
                @include breakpoint (max-md){
                    flex-direction: column;
                }
                @include breakpoint (max-xsmall){
                  display: none;
                }
                .fancy-box1 {
                    display: flex;
                    gap: 14px;
                    &__item {
                        h6 {
                            color: rgba(255, 255, 255, 0.70);
                            font-family: $body-font;
                            font-size: 18px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 30px; /* 166.667% */
                        }
                        p {
                            color: rgba(255, 255, 255, 0.70);
                            font-family: $body-font;
                            font-size: 18px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 30px; /* 166.667% */
                        }
                    }
                }
            }
        }
    }
    &-form {
        padding: 56px 74px;
        @include breakpoint (max-xxxl){
            padding: 10px 16px;
        }
        @include breakpoint (max-xxl){
            padding: 56px 74px;
        }
        @include breakpoint (max-lg){
            padding: 40px ;
        }
        @include breakpoint (max-sm){
            padding: 20px ;
        }
        &__title {
            padding-bottom: 15px;
            h3 {
                color: $title-color;
                font-family: $body-font;
                font-size: 50px;
                font-style: normal;
                font-weight: 700;
                line-height: 56px; /* 112% */
                @include breakpoint (max-md){
                    font-size: 40px;
                    line-height: 45px; 
                }

            }
        }
        &__desc {
            padding-bottom: 30px;
            h6 {
                color: rgba(31, 31, 31, 0.70);
                font-family: $body-font;
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px; 
            }
            p {
                color: rgba(31, 31, 31, 0.70);
                font-family: Roboto;
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px; 
            }
        }
    }

  
}

.appointment2 {
        &-form {
        border-radius: 10px;
        background: $bg-color;
        padding: 50px 50px;
        @include breakpoint (max-xxxl){
            padding: 10px 16px;
        }
        @include breakpoint (max-xxl){
            padding: 56px 74px;
        }
        @include breakpoint (max-lg){
            padding: 40px ;
        }
        @include breakpoint (max-sm){
            padding: 20px ;
        }
        &__title {
            padding-bottom: 15px;
            h3 {
                color: $title-color;
                font-family: $body-font;
                font-size: 50px;
                font-style: normal;
                font-weight: 700;
                line-height: 56px; /* 112% */
                @include breakpoint (max-xl) {
                    font-size: 45px;
                    line-height: 50px;
                }
                @include breakpoint (max-md) {
                    font-size: 35px;
                    line-height: 35px;
                }
                @include breakpoint (max-sm) {
                    font-size: 30px;
                    line-height: 40px;
                }

            }
        }
        &__desc {
            padding-bottom: 30px;
            p {
                color: rgba(31, 31, 31, 0.70);
                font-family: $body-font;
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px; /* 160% */
            }
        }
    }
    &-content {  
        @include breakpoint (xxl){
            padding-left: 40px;
        }
    }


  
}
  