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

.contact2 {
    &-content {
        padding-right: 0px;
        @include breakpoint (xl) {
            padding-right: 30px;
        } 
        &__title {
            padding-bottom: 10px;
            color: $title-color;
            font-family: $body-font;
            font-size: 48px;
            font-style: normal;
            font-weight: 700;
            line-height: 54px; /* 112.5% */
            text-transform: capitalize;
            @include breakpoint (max-md){
                font-size: 32px;
                line-height: 30px; 
            }
            @include breakpoint (max-xs){
                font-size: 30px;
                line-height: 30px; 
            }
        }
        &__desc {
            margin-bottom: 25px;
            color: $gray2;
            font-family: $body-font;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 26px; /* 162.5% */
        }
        &-contact {
            &-item {
                margin-right: 25px;
                margin-bottom: 30px;
                display: inline-flex;
                align-items: center;
                gap: 20px;
                padding: 12px 20px;
                border-radius: 20px;
                background: $white;
                box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.05);
                width: 283px;
                height: 110px;
                flex-shrink: 0;
                @include breakpoint (max-xxl){
                    margin-right: 5px;
                    margin-bottom: 30px;
                    gap: 8px;
                    padding: 12px 6px;
                    width: 253px;
                    height: 110px;
                }
                @include breakpoint (max-xl){
                    margin-right: 25px;
                    margin-bottom: 30px;
                    gap: 20px;
                    padding: 12px 20px;
                    width: 283px;
                    height: 110px;
                }
                &__icon {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 70px;
                    height: 70px;
                    flex-shrink: 0;
                    background: $theme-color;
                    border-radius: 12px;
                    background: $smoke2;
                    i {
                        color: $white;
                        color: $title-color;
                        text-align: center;
                        font-size: 40px;
                        font-style: normal;
                        font-weight: 300;
                        line-height: normal;
                    }
                }
                &-info {
                    &__title {
                        color: $title-color;
                        font-family: $body-font;
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 30px; /* 150% */
                        padding-bottom: 6px;
                    }
                    &__desc {
                        color: $gray2;
                        font-family: $body-font;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 26px; /* 162.5% */
                    }
                    &__desc2 {
                        color: $gray2;
                        font-family: $body-font;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 26px; /* 162.5% */
                    }

                }
                &:hover {
                    .contact2 {
                        &-content {
                            &-contact {
                                &-item {
                                    &__icon {
                                        background-color: $theme-color;
                                        i {
                                            color: $white;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        &__title2 {
            color: $title-color;
            font-family: $body-font;
            font-size: 24px;
            font-style: normal;
            font-weight: 600;
            line-height: 34px; 
            padding-bottom: 15px;
        }
        &__desc2 {
            color: $gray2;
            font-family: $body-font;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 26px; 
            padding-bottom: 22px;
        }
        .global-social5 {
            justify-content: start;
            padding-bottom: 32px;
        }

        
        &-form {
            padding-top: 78px;
            @include breakpoint (max-md) {
                padding-top: 40px;
            }
            &__title {
                padding-bottom: 13px;
            }
            &__desc {
                padding-bottom: 30px;
            }
        }
    }
    &-card {
        border-radius: 10px;
        background: $white;
        box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.08);
        padding: 28px 40px;
        &__title {
            padding-bottom: 50px;
            h6 {
                color: $title-color4;
                font-family: $body-font;
                font-size: 36px;
                font-style: normal;
                font-weight: 600;
                line-height: 46px; /* 127.778% */
            }
        }
    }
}