/*---==================
    02. Elements  
    
        # 04 IConic BOx CSS
=================----*/

.iconic-box{
    &.style-one{
        max-width: 200px;
        & .icon{
            width: 70px;
            height: 70px;
            @extend %flex-center;
            border-radius: 50%;
            background-color: rgba(0, 131, 62, 0.10);
        }
        & .content{
            padding-top: 20px;
            & h5{
                font-family: $body-font;
                line-height: 30px;
            }
        }
    }
    &.style-two{
        max-width: 300px;
        & .icon{
            margin-bottom: 20px;
        }
        & .content{
            & h5{
                @extend %white-color;
                font: 400 18px $body-font;
            }
        }
    }
    &.style-three{
        max-width: 200px;
        & .icon{
            width: 60px;
            height: 60px;
            @extend %flex-center;
            border-radius: 50%;
            @extend %secondary-bg;
            margin-bottom: 10px;
        }
        & .content{
            & h5{
                font: 500 18px $body-font;
            }
        }
    }
    &.style-four{
        display: flex;
        align-items: center;
        @extend %gray-light-bg;
        padding: 35px 30px;
        border-radius: 10px;
        @include transition(.3s);
        @media #{$lp}{
            padding: 35px 20px;
        }
        &:hover{
            @extend %primary-bg;
            & .icon{
                background-color: rgba(255, 255, 255, .10);
                @extend %white-color;
            }
            & .content{
                & h4.title{
                    @extend %white-color;
                }
                & span{
                    color: rgba(255, 255, 255, .70);
                }
            }
        }
        & .icon{
            flex: 0 0 auto;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            @extend %flex-center;
            font-size: 30px;
            @extend %white-bg;
            margin-right: 15px;
        }
    }
    &.style-five{
        display: flex;
        align-items: center;
        @extend %gray-light-bg;
        padding: 22px 30px 20px;
        border-radius: 10px;
        max-width: 290px;
        @media #{$lp}{
            padding: 30px 20px;
        }
        @media #{$xss}{
            max-width: 100%;
        }
        & .icon{
            flex: 0 0 auto;
            width: 60px;
            margin-right: 20px;
        }
        & .content{
            & h3.title{
                font-size: 32px;

            }
            & p{
                font-size: 18px;
                font-weight: 500;
            }
        }
    }
    &.style-six{
        text-align: center;
        @extend %gray-light-bg;
        @include transition(.3s);
        padding: 40px 30px 35px;
        border-radius: 10px;
        @media #{$lg}{
            padding: 40px 50px 35px;
        }
        &:hover{
            @extend %primary-bg;
            & .icon{
                @extend %white-color
            }
            & .content{
                & h4.title{
                    @extend %white-color  
                }
                & p{
                    color: rgba(255, 255, 255, .80);
                }
            }
        }
        & .icon{
            font-size: 80px;
            @extend %primary-color;
            margin-bottom: 15px;
        }
        & .content{
            & h4.title{
                margin-bottom: 10px;
            }
            & p{
                font-size: 18px;
                font-weight: 500;
            }
        }
    }
}

.iconic-info-box{
    &.style-one{
        padding: 40px 50px;
        border-radius: 16px;
        background-color: #FFF;
        box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.08);
        & .icon{
            width: 80px;
            height: 80px;
            @include border-radius(50%);
            background-color: #FCF3F3;
            @extend %flex-center;
            @extend %primary-color;
            font-size: 28px;
            margin-bottom: 20px;
            display: inline-flex;
        }
        & .content{
            & h4{
                margin-bottom: 10px;
            }
            & p{
                font-weight: 500;
                &:hover{
                    & a{
                        @extend %primary-color;
                    }
                }
            }
        }
    }
    &.style-two{
        text-align: center;
        & .icon{
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: $primary-color;
            display: inline-flex;
            @extend %flex-center;
            font-size: 32px;
            @extend %white-color;
            margin-bottom: 23px;
        }
        & .content{
            & h4.title{
                font-family: $body-font;
                margin-bottom: 5px;
                color: $heading-color;
            }
            & h4{
                font-family: $body-font;
                @extend %primary-color;
                margin-bottom: 10px;
            }
        }
    }
    &.style-three{
        display: inline-flex;
        align-items: center;
        @media #{$xs}{
            justify-content: center;
        }
        & .icon{
            flex: 0 0 auto;
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background-color: $primary-color;
            color: $white-color;
            @extend %flex-center;
            font-size: 30px;
            margin-right: 20px;
        }
        & .content{
            & p{
                @media #{$lp}{
                    font-size: 14px;
                }
            }
        }
    }
}

.special-off-item{
    position: relative;
    overflow: hidden;
    @extend %white-bg;
    padding: 40px 30px;
    @include border-radius(20px);
    transition: all .3s;
    &:hover{
        @extend %secondary-bg;
        & .item-title{
            & h4{
                @extend %white-color;
            }
        }
        & .content {
            & p{
                @extend %white-color;
            }
        }
    }
    & .sp-shape{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 100%;
        & img{
            width: 100%;
        }
    }
    & .item-title{
        margin-bottom: 20px;
    }
    & .image{
        margin-bottom: 20px;
        & img{
            min-height: 285px;
            max-height: 285px;
            margin: 0 auto;
        }
    }
    & .content{
        & p{
            font: 500 16px $body-font;
            @extend %heading-color;
        }
    }
}