.hero{
    background-size: cover;
    width: 100%;
    height: 100%;
    background-position: center;

    .hero-row{
        .hero-col{
            border-right: 1px solid $whitet;
            padding: 150px 30px 180px;
            cursor: pointer;
            transition: flex 0.6s ease-out;

            // Column Hover Effect
            &:hover{
                background-color: $dgreent;

                .product{
                    h3{
                        transform: translateY(0px);
                        opacity: 0.7;
                    }
                    p{
                        transform: translateY(0px);
                        opacity: 1;
                    }
                }

                .plus-button{
                    a{
                        color: $dgreen;
                        i{
                            &::after{
                                opacity: 1;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                margin-top: 0;
                                margin-left: 0;
                            }
                        }
                    }
                }
            }

            &:first-child{
                border-left: none;
            }

            &:last-child{
                border-right: none;
            }

            .product{
                height: 280px;
                overflow: hidden;
                
                
                h3{
                    color: $white;
                    font-size: $ft_size + 3px;
                    font-weight: $bold;
                    text-transform: uppercase;
                    margin-bottom: 30px;
                    transform: translateY(100px);
                    transition: all 0.5s ease-in-out;
                }
                p{
                    color: $white;
                    font-size: $ft_size - 2px;
                    font-weight: $bold;
                    transform: translateY(100px);
                    opacity: 0;
                    transition: all 0.5s ease-in-out;
                }
            }

            .plus-button{
                a{
                    color: $white;
                    text-decoration: none;
                    i{
                        font-size: $ft_size + 4px;
                        border: 2px solid $white;
                        border-radius: 50%;
                        padding: 10px;
                        position: relative;
                        z-index: 2;
                        &::before{
                            position: relative;
                            z-index: 3;
                        }
                        &::after{
                            content: "";
                            background-color: $white;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            width: 50%;
                            height: 50%;
                            border-radius: 50%;
                            opacity: 0;
                            transition: 0.4s ease-in-out;
                            margin-top: -25%;
                            margin-left: -25%;
                        }
                    }
                }
            }

            // &.felx-property-full{
            //     flex: 100 1
            // }

            // Hero Columns Expanded CSS

            &.hero-col-expanded{
                flex: 100 1;
                transition: flex 1s ease-in-out, background-color 1s ease-in-out;
                .product{
                    opacity: 1;

                    h3{
                        transform: translateY(0px);
                        opacity: 0.7;
                        transition: 1s ease;
                        font-size: $ft_size + 7px;
                    }
                    p{
                        transform: translateY(0px);
                        opacity: 1;
                        font-size: $ft_size + 2px;
                    }
                }

                .plus-button{

                    &:hover{
                        opacity: 1;
                        a{
                            color: $dgreen;
                            i{
                                &::after{
                                    opacity: 1;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    margin-top: 0;
                                    margin-left: 0;
                                }
                            }
                        }
                    }

                    a{
                        color: $white;
                        text-decoration: none;
                        i{
                            font-size: $ft_size + 4px;
                            border: 2px solid $white;
                            border-radius: 50%;
                            padding: 10px;
                            position: relative;
                            z-index: 2;
                            &::before{
                                position: relative;
                                z-index: 3;
                                content: "\eee4";
                            }
                            &::after{
                                content: "";
                                background-color: $white;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                width: 50%;
                                height: 50%;
                                border-radius: 50%;
                                opacity: 0;
                                transition: 0.4s ease-in-out;
                                margin-top: -25%;
                                margin-left: -25%;
                            }
                        }
                    }
                }

                &:hover{
                    background-color: transparent;
                }

            }

            // For hide other contents of columns

            &.hero-col-collapsed{
                padding: 20px;
                // transition: flex 0.4s ease-out;
                .product{
                    position: relative;
                    width: 20px;
                    h3{
                        transform-origin: left;
                        transform: rotate(90deg);
                        transition: 1s ease;
                        position: absolute;
                        font-size: $ft_size +2px;
                        height: 48px;
                        width: 200px;
                        margin-bottom: 0;
                        padding-top: 5px;
                    }
                    p{
                        display: none;
                    }
                }
                &:hover{
                    .product{
                        h3{
                            transform: rotate(90deg);
                        }
                    }
                }

                .plus-button{
                    display: none;
                }
            }
        }
    }
}