.contact-wrapper {
    position: relative;
    z-index: 9;

    .contact-content {
        background-color: $bg-color;
        border-radius: 10px;
        padding: 60px;

        @include breakpoint (max-lg){
            padding: 40px;
        }

        @include breakpoint (max-md){
            padding: 40px;
            text-align: center;
        }

        @include breakpoint (max-sm){
            padding: 30px;
        }

        h3 {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .contact-form-items {
            margin-top: 30px;

            .form-clt {
                position: relative;
    
                input,textarea {
                    width: 100%;
                    outline: none;
                    border-radius: 4px;
                    border: 1px solid rgba(35, 28, 37, 0.10);
                    background: $white;
                    color: $text-color;
                    padding: 16px 20px;
                    font-weight: 500;
                    text-transform: capitalize;

        
                    @include breakpoint (max-md){
                        padding: 14px 20px;
                    }
        
                    @include breakpoint (max-sm){
                        padding: 12px 18px;
                    }
        
                    &::placeholder {
                        color: $text-color;
                    }
                }
        
                textarea {
                    padding-bottom: 140px;
                    resize: none;
                }
            }
        }
    }

    .contact-info-content {
       margin-left: 50px;

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

      @include breakpoint (max-md){
            text-align: center;
        }

        .contact-info {
            margin-top: 50px;
            margin-top: 30px;
        
            .contact-items {
                @include flex;
                gap: 20px;

                @include breakpoint (max-md){
                    flex-wrap: wrap;
                    justify-content: center;
                    text-align: center;
                }


               &:not(:last-child) {
                margin-bottom: 30px;
               }
                
               @include breakpoint(max-sm) {
                  flex-wrap: wrap;
               }
    
                .icon {
                    width: 68px;
                    height: 68px;
                    line-height: 68px;
                    text-align: center;
                    border-radius: 4px;
                    background-color: $bg-color;

    
                    i {
                        font-size: 16px;
                    }
                }
    
                .content {
                    @include breakpoint (max-md){
                        flex-basis: 100%;
                     }
                     
                    span {
                        font-size: 15px;
                        color: $theme-color-2;
                        font-weight: 500;
                    }
                }
            }
        }
    }
}

.contact-section {
    position: relative;

    .shape-1 {
        position: absolute;
        left: 5%;
        top: 15%;
    }

    .shape-2 {
        position: absolute;
        right: 6%;
        bottom: 20%;
    }
}

.map-section {

    .google-map {

        iframe {
            width: 100%;
            height: 810px;

            @include breakpoint (max-lg){
                height: 600;
            }

            @include breakpoint (max-md){
                height: 500px;
            }

            @include breakpoint (max-sm){
               height: 400px;
            }
        }
    }
}