// HOMEPAGE THREE CSS
.template-three{
    background: #F6F6F6;
}
// DOMAIN CHECKER CSS
.rts-domain-checker-two{
    .rts-hero__content{
        background: #0755F0;
        border-radius: 20px;
        text-align: center;
        position: relative;
        padding: 100px 0;
        &::before{
            @include ph;
            background-image: url(../images/domain/domain__finder__bg__four.svg);
            @include background;
        }
        &::after{
            @include ph;
            background: linear-gradient(93deg, #0774FF 0.49%, #2181FC 0.5%, #2770FF 98.97%);
            z-index: -1;
            border-radius: inherit;
        }
        h1{
            font-size: 55px;
            line-height: 1.15;
            margin-bottom: 25px;
            &::before{
                display: none;
            }
        }
        .description{
            display: block;
            margin-bottom: 40px;
        }
        form{
            width: 830px;
            margin: auto;
            position: relative;
            input{
                background: var(--color-white);
                height: 56px;
                border-radius: 6px;
                &::placeholder{
                    color: #787878;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 46px;
                }
            }
            .select-button-area{
                display: flex;
                align-items: center;
                width: max-content;
                position: absolute;
                top: 0;
                right: 0;
                .nice-select{
                    background: #F4F4F4;
                    height: 56px;
                    line-height: 53px;
                    border-radius: 0;
                    border: none;
                    &:focus{
                        border: none;
                    }
                }
                button{
                    background: #FFC107;
                    height: 56px;
                    line-height: 56px;
                    padding: 0 40px;
                    border-radius: 0 6px 6px 0;
                }
            }
        }
        .banner-content-tag{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            .tag-list{
                display: flex;
                padding: 0;
                margin: 0;
                gap: 10px;
                li{
                    list-style: none;
                    border-radius: 3px;
                    background: rgba(255, 255, 255, 0.10);
                    padding: 8px 9px;
                    display: flex;
                    align-items: center;
                    gap: 7px;
                    span{
                        color: var(--color-white);
                    }
                }
            }
        }
    }
}

// FEATURE FOUR CSS
.rts-hosting-feature-four{
    .rts-section-description{
        display: flex;
        flex-direction: column;
        gap: 20px;
        a{
            color: var(--color-primary);
        }
    }
    .feature__single{
        background: #F4F9FF;
        padding: 35px 25px 35px 35px;
        border-radius: 10px;
        transition: all .3s ease;
        &--icon{
            height: 80px;
            width: 80px;
            border-radius: 50%;
            background: #EAF1FF;
            display: grid;
            justify-content: center;
            align-items: center;
            margin-bottom: 30px;
            transition: all .3s ease;
        }
        &--title{
            display: inline-block;
            font-size: 20px;
            font-weight: var(--bold);
            color: var(--color-secondary);
            margin-bottom: 20px;
        }
        &--description{
            font-weight: var(--regular);
            font-family: var(--font-secondary);
            margin-bottom: 30px;
        }
        &--btn{
            & .round__btn{
                background: #EAF1FF;
            }
        }
        &:hover{
            .feature__single{
                &--icon{
                    background: var(--color-primary);
                    svg path{
                        fill: var(--color-white);
                    }
                }
                &--btn{
                    & .round__btn{
                        background: var(--color-primary);
                        color: var(--color-white);
                    }
                }
              
            }
        }
    }
}