@use "../../utils" as *;

/*----------------------------------------*/
/*  8.8 contact-us
/*----------------------------------------*/
.map {
    width: 100%;
    height: 676px;
    
    @media #{$md} {
        height: 400px;
    }
    @media #{$xs, $sm} {
        height: 300px;
    }
    
    iframe {
        width: 100%;
        height: 100%;
    }
}
.loading-form {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    z-index: 9999 !important;
    background: #000 !important;
    opacity: .5 !important;
    display: none;
}
.success-message { color: green; }
.error-message { color: red !important; }
.contact-us{
    &__widget{
        max-width: 587px;
        width: 100%;

        img{
            width: 100%;
            height: 100%;
        }
    }
}

.contact-us__area{
    
    .contact-us__title-wrapper{
        .contact-us__form-wrapper{
            background: #F1F5EB;
            border-radius: 20px;
            padding: 40px;
            @media #{$xs} {
                padding: 20px;
            }
            .contact-us__form{
                .contact-us__input{
                    position: relative;
                    span{
                        color: var(--rr-heading-primary);
                        font-weight: var(--rr-fw-regular);
                        line-height: var(--rr-lh-h5);
                        font-size: 16px;
                        font-style: normal;
                        display: block;
                    }
                    input{
                        position: relative;
                        line-height: var(--rr-lh-h5);
                        font-weight: var(--rr-fw-regular);
                        margin-top: 5px;
                        margin-left: 0;
                        background: var(--rr-common-white);
                        margin-bottom: 30px;
                        padding: 16px 45px 15px 20px;
                        border-radius: 150px;
                        font-style: normal;
                        border: 1px solid #E3DBD8;
                        outline: none;
                        width: 100%;
                        @media #{$lg, $md, $sm, $xs} {
                            padding: 16px 45px 15px 20px;
                        }
                        @include rs-placeholder{
                            color: var(--rr-heading-primary);
                            opacity: 0.6;
                            font-size: 16px;
                        }
                    }
                    .icon{
                        position: absolute;
                        top: 50%;
                        right: 20px;
                        transform: translateY(-50%);
                        color: var(--rr-heading-primary);
                    }
                }
                .contact-us__textarea{
                    position: relative;
                    span{
                        color: var(--rr-heading-primary);
                        font-weight: var(--rr-fw-regular);
                        line-height: var(--rr-lh-h5);
                        font-size: 16px;
                        font-style: normal;
                    }
                    textarea{
                        background: var(--rr-common-white);
                        margin-top: 5px;
                        height: 130px !important;
                        margin-left: 0;
                        border: 1px solid rgba(0, 29, 8, 0.1);
                        padding: 13px 45px 13px 20px;
                        border-radius: 30px;
                        @include rs-placeholder{
                            color: var(--rr-heading-primary);
                            opacity: 0.6;
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
}
.contact-us__textarea .icon {
    position: absolute;
    top: 60px;
    right: 20px;
    transform: translateY(-50%);
    color: var(--rr-heading-primary);
}
.contact-btn {
    background: var(--rr-theme-primary);
    color: var(--rr-common-white);
    line-height: var(--rr-lh-h5);
    font-weight: var(--rr-fw-sbold);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    border-radius: 150px;
    font-style: normal;
    font-size: 14px;
    transition: .3s;

    &:hover{
        background: var(--rr-heading-primary);
    }
}
/*second product__area*/
.product-filter-area-review{
    justify-content: center;
    gap: 10px;
    .button{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px 40px;
        color: var(--rr-heading-primary);
        font-family: var(--rr-ff-heading);
        font-weight: var(--rr-fw-bold);
        font-size: 22px;
        font-style: normal;
        border-radius: 20px;
        border: 1px solid #83CD20;
        transition: .3s;
    }
}
.product-filter-area{
	.rr-fea-product__tab{
        & nav {
            .all-button{
                justify-content: center;
                flex-wrap: wrap;
                row-gap: 20px;
            }
            & button {
                color: var(--rr-common-white);
                font-family: var(--rr-ff-heading);
                font-weight: var(--rr-fw-regular);
                transition: .3s;
                padding: 0;
                border-radius: 20px;
                margin-right: 30px;
                @media #{$xl,$lg} {
                    font-size: 14px;
                }

                @media #{$md} {
                    font-size: 13px;
                    margin: 0 10px;
                }

                @media #{$xs} {
                    font-size: 13px;
                }
         
                &.active {
                    background-color: var(--rr-theme-primary);
                    font-weight: var(--rr-fw-bold);
                    & span {
                        color: #fff !important;
                    }
                }
            }
        }
		.nav-inner{

			.demo-nav{
				background: var(--rr-theme-primary);
				&.active{
					background: var(--rr-theme-primary);
				}
			}
		}
	}
	.second-pane{
		.rr-fea-product__wrapper{
			.signup-form-wrapper{
				.title-wrapper{
					.title{
						color: var(--rr-heading-primary);
						font-family: var(--rr-ff-heading);
						font-weight: var(--rr-fw-sbold);
						font-size: var(--rr-fs-h3);
						line-height: 46px;
						margin-bottom: 10px;
						font-style: normal;
					}
					.dc{
						margin-bottom: 14px;
					}
					.main-dc{
						margin-bottom: 24px;
					}
				}
				.item-thumb{
					.signup-item{
						h6{
							color: var(--rr-heading-primary);
							font-family: var(--rr-ff-body);
							font-weight: var(--rr-fw-sbold);
							line-height: var(--rr-lh-h6);
							font-size: 18px;
							font-style: normal;
						}
						input{
							height: 50px;
						}
						textarea{
							height: 180px !important;
							border-radius: 4px;
							margin-left: 0;
							border: 1px solid #e5e8e6;
							padding: 10px 20px;
						}

						

						.text{
							.social{
								i{
									color: var(--rr-theme-primary);
								}
							}
						}
					}
				}
			}
		}
	}
}
.latest-contact-us-2 {

    &-media{
        
        &-content{
            &-title{
                margin-left: 50px;

                @media #{$mxm, $mxs} {
                    margin-left: 20px;
                  }

                h4{
                    color: var(--rr-common-white);
                    font-family: var(--rr-ff-heading);
                    font-weight: var(--rr-fw-sbold);
                    font-size: var(--rr-fs-h4);
                    line-height: var(--rr-lh-h5);
                    font-style: normal;
                    margin-bottom: 4px;
                }
                p{
                    color: rgba(159, 112, 112, 0.7);
                    font-family: var(--rr-ff-body);
                    font-weight: var(--rr-fw-regular);
                    line-height: var(--rr-lh-h6);
                    font-style: normal;
                    font-size: 16px;
                    padding: 3px;
                }
            }
            &-contact{
                display: flex;
                gap: 30px;
                margin-top: 20px;
                align-items: center;
                @media #{$sm, $xs} {
                    gap: 20px;
                }

                &-text{
                    span{
                        font-family: var(--rr-ff-heading);
                        color: var(--rr-text-body);
                        font-weight: var(--rr-fw-regular);
                        line-height: var(--rr-lh-h5);
                        font-size: 16px;
                        font-style: normal;
                    }
                    h6{
                        font-family: var(--rr-ff-heading);
                        color: var(--rr-heading-primary);
                        font-weight: var(--rr-fw-sbold);
                        line-height: var(--rr-lh-h5);
                        font-size: 18px;
                        font-style: normal;
                        @media #{$lg, $md, $sm, $xs} {
                            br{
                                display: none;
                            }
                          }

                        &:hover{
                            color: var(--rr-theme-primary);
                        }
                    }
                    h5{
                        font-family: var(--rr-ff-heading);
                        color: var(--rr-heading-primary);
                        font-weight: var(--rr-fw-sbold);
                        line-height: var(--rr-lh-h5);
                        font-size: 18px;
                        font-style: normal;
                        display: flex;
                        align-items: center;
                        gap: 14px;
                    }
                }
            }
            
            &-social{
                margin-left: 50px;
                margin-top: 127px;
                display: flex;
                gap: 20px;

                @media #{$mxs}{
                    margin-top: 80px;
                }
                &-icon{
                    

                    a{
                        color: var(--rr-common-white);
                        height: 36px;
                        width: 36px;
                        background: #193421;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;

                        &:hover{
                            background: var(--rr-common-white);
                            color: var(--rr-theme-primary);
                        }
                    }
                }
            }
        }

        h5{
            color: #fff;
        }
    }
    .tab-content{
        img{
            width: 100%;
            height: 100%;
            border-radius: 20px;
        }
    }
    
}
.rr-fea-product{
    box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 60px 60px 60px 55px;
    flex-wrap: wrap;
    row-gap: 30px;
    column-gap: 30px;
    @media #{$sm, $xs} {
        padding: 30px 30px 30px 30px;
    }
    @media #{$lg, $md} {
        padding: 40px 40px 40px 40px;
        justify-content: center !important;
    }
    .media-content{
        &.has--line {
            position: relative;
            &::before{
                background: #D9D9D9;
                content: '';
                height: 257px;
                width: 1px;
                position: absolute;
                top: 7px;
                right: -41%;
                @media #{$lg, $md, $sm, $xs}{
                    display: none;
                }
            }
        }
    }
    .tab-content{
        img{
            width: 100%;
            height: 100%;
            border-radius: 20px;
            @media #{$xs} {
                height: 180px;
            }
        }
    }
}

/*contact3*/
.contact3{
    &__bg-color{
        background: var(--rr-theme-primary);
        border-radius: 20px;
    }
    &__bg-img{
        background-position: top left;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 32px;
        left: 21px;
        max-width: 565px;
    }
    &__wrap{
        flex-wrap: wrap;
        padding: 30px;
    }
    &__content{
        position: relative;
        z-index: 1;
        margin-left: 30px;
        padding: 30px;
        @media #{$xs} {
            padding: 0;
            margin-left: 0;
        }
        p{
            font-family: var(--rr-ff-body);
            color:  var(--rr-common-white);
            font-weight: var(--rr-fw-regular);
            line-height: var(--rr-lh-h5);
            font-size: 16px;
            margin-bottom: 0;
            font-style: normal;
            @media #{$sm, $xs} {
                br{
                    display: none;
                }
            }
        }
    }
    &__title{
        font-family: var(--rr-ff-heading);
        color: var(--rr-common-white);
        font-weight: var(--rr-fw-bold);
        font-size: var(--rr-fs-h2);
        line-height: var(--rr-lh-h2);
        margin-bottom: 20px;
        font-style: normal;

        @media #{$xs} {
            font-size: 30px;
            line-height: 40px;
		}
    }
    &__thumb{
        img{
            width: 100%;
            height: 100%;
        }
    }
    &__form{
        margin-top: 40px;
        gap: 10px;
        flex-wrap: wrap;
        &-control{
            background: transparent !important;
            border: 1px solid var(--rr-common-white) !important;
            margin-left: 0 !important;
            border-radius: 999px;
            padding: 15px 30px;
            width: 100%;
            max-width: 406px;
            height: 60px;

            @include rs-placeholder{
                color: var(--rr-common-white);
            }
        }
        &-btn{
            background: var(--rr-common-white);
            font-family: var(--rr-ff-heading);
            color: var(--rr-ff-heading);
            font-weight: var(--rr-fw-sbold);
            line-height: var(--rr-lh-h5);
            display: inline-flex;
            align-items: center;
            padding: 15px 29px;
            border-radius: 999px;
            font-style: normal;
            font-size: 14px;
            transition: .3s;

            &:hover{
                background: var(--rr-heading-primary);
                color: var(--rr-common-white);
            }
        }
    }
}
/*contact4*/
.contact4{
    &__bg-color{
        background: var(--rr-common-white);
        border-radius: 20px;
        box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.05);
    }
    &__bg-img{
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        max-width: 565px;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    &__wrap{
        flex-wrap: wrap;
    }
    &__thumb{
        margin-top: -40px;
        @media #{$xs} {
            margin-top: 20px;
        }
    }
    &__btn{
        background: var(--rr-theme-primary);
        color: var(--rr-common-white);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 15px 30px;
        border-radius: 999px;
        transition: .3s;

        &:hover{
            background: var(--rr-heading-primary);
            color: var(--rr-common-white);
        }

    }
    &__content{
        position: relative;
        z-index: 1;
        margin-left: 95px;
        @media #{$md, $sm, $xs} {
            margin-left: 35px;
            margin-top: 30px;
        }
        @media #{$lg} {
            margin-top: 30px;
        }
        p{
            font-family: var(--rr-ff-body);
            color:  var(--rr-text-body);
            font-weight: var(--rr-fw-regular);
            line-height: var(--rr-lh-h5);
            font-size: 16px;
            margin-bottom: 0;
            font-style: normal;
        }
    }
    &__title{
        font-family: var(--rr-ff-heading);
        color: var(--rr-heading-primary);
        font-weight: var(--rr-fw-bold);
        font-size: var(--rr-fs-h2);
        line-height: var(--rr-lh-h2);
        margin-bottom: 20px;
        font-style: normal;
        @media #{$xs} {
            font-size: 30px;
            line-height: 40px;
		}
    }
    &__thumb{
        img{
            width: 100%;
            height: 100%;
        }
    }
}