.contact-section {
    margin: 0 15px;
    border-radius: 20px;
}

.contact-form-box {
    // margin-left: 50px;
    border-radius: 20px;
    background: $white;
    padding: 35px;

    h3 {
        margin-bottom: 30px;
    }

    .form-clt {
        input,textarea {
            line-height: 1;
            padding: 20px 20px;
            width: 100%;
            text-transform: capitalize;
            color: $text-color;
            border-radius: 6px;
            border: 1px solid #E6E6E6;
            background: #F5F5F5;
        }

        textarea {
            padding-bottom: 120px;
        }
    }
}

.counter-wrapper-2 {
    border-radius: 20px;
    background: $white;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: -5%;
    position: relative;
    z-index: 9;
}


.counter-wrapper-222 {
    border-radius: 20px;
    background: #E6E6E6;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: -5%;
    position: relative;
    z-index: 9;
}


.counter-section-2 {
    .container {
        max-width: 1390px;
    }
}

.counter-image-style-2 {
    max-width: 465px;
    border-radius: 20px;

    @include breakpoint (max-md){
        margin-top: 30px;
        max-width: initial;
        padding: 0 25px;
        padding-right: 0;
    }

    img {
        @include imgw;
        border-radius: 20px;
    }
}

.contact-information-list {
    @include flex;
    justify-content: center;
    gap: 100px;
    margin-top: 70px;

    @include breakpoint (max-xl){
        flex-wrap: wrap;
        gap: 30px;
        justify-content: start;
        margin-top: 40px;
    }

    li {
        @include flex;
        gap: 20px;
    }
}

.contact-form-box-2 {
    margin-right: 20px;
    padding: 0 35px;
    padding-right: 0;

    @include breakpoint (max-xl){
        margin-right: 0;
    }

    h3 {
        margin-bottom: 20px;
    }

    .form-clt {
        input,textarea {
            line-height: 1;
            padding: 10px 20px;
            width: 100%;
            text-transform: capitalize;
            color: $text-color;
            border-radius: 6px;
            border: 1px solid #E6E6E6;
            background: #F5F5F5;
        }

        textarea {
            padding-bottom: 100px;
        }

        &.color-2 {
            background: $white;
        }
    }
}

.contact-left-image-style-5 {
    position: relative;
    z-index: 9;
    border-radius: 20px;
    overflow: hidden;

    img {
        @include imgw;
        border-radius: 20px;
    }
}

.contact-form-box-5-area {
    margin-left: 50px;

    @include breakpoint (max-xxl){
        margin-left: 0;
    }
}

.contact-form-box-5 {
    //margin-right: 40px;
    //padding: 0 35px;

    .form-clt {
        input,textarea {
            line-height: 1;
            padding: 18px 20px;
            width: 100%;
            text-transform: capitalize;
            color: #898989;
            border-radius: 6px;
            border: 1px solid rgba(216, 221, 225, 0.77);
            background: $white;
        }

        textarea {
            padding-bottom: 130px;
        }
    }

    .theme-btn {
        background-color: $theme-color-4;
        border-radius: 5px;
        padding: 22px 40px;
        color: $white;

    }
}

.contact-top {
    h2 {
        font-size: 55px;
        font-weight: 400;
        margin-bottom: 50px;

        @include breakpoint (max-lg) {
            font-size: 45px;
        }

        @include breakpoint (max-sm) {
            font-size: 40px;
            margin-bottom: 30px;
        }
    }

    .icon-box-items {
        display: flex;
        align-items: center;
        gap: 20px;
        border-radius: 20px;
        border: 1px solid rgba(17, 17, 17, 0.10);
        padding: 40px 30px;
        @include transition;

         @include breakpoint (max-xl){
            display: block;
        }

        .icon {
            max-width: 62px;
            height: 62px;
            line-height: 70px;
            text-align: center;
            background-color: rgba(20, 75, 36, 0.1);
            border-radius: 50%;
            width: 100%;
            @include transition;

             @include breakpoint (max-xl){
                margin-bottom: 15px;
            }

            i {
                @include transition;
                font-size: 26px;
                color: $theme-color-2;
            }
        }

        .content {
           h5 {
            font-size: 22px;
            font-weight: 400;

            @include breakpoint (max-xxl){
                font-size: 18px;
            }
           }
        }

        &:hover {
            .icon {
                img {
                    filter: brightness(0) invert(1);
                }
            }
        }
    }
}


.contact-middle-items {
    margin-top: 120px;

    .contact-form-box {
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        background: $white;
        padding: 50px 40px;

        h3 {
            font-size: 42px;
            font-weight: 400;
            margin-bottom: 20px;
        }
        .form-clt {
            input,textarea {
                border-radius: 2px;
                border: 1px solid rgba(0, 53, 102, 0.12);
                background: $white;
                line-height: 1;
                padding: 20px 25px;
                width: 100%;
                text-transform: capitalize;
                color: $text-color;
            }

            textarea {
                padding-bottom: 110px;
            }
        }

        .theme-btn {
            @include transition;

            i {
                @include transition;
            }
        }
    }

    .google-map-items {
        iframe {
            width: 100%;
            height: 610px;
            border-radius: 10px;
        }
    }
}