@import "../../../src/style/front-end/overides/colors";
@import "../../../src/style/front-end/overides/variables";
@import '../../../node_modules/bulma/sass/utilities/mixins.sass';

.purdue-home-cta-stack{
    &.has-black-background{
        .purdue-home-cta-stack__header{
            color:$boiler-gold;
        }
        .purdue-home-cta-stack__content{
            color:$white;
        }
    }
    .section{
        .container{
            display:flex;
            flex-direction:column;
            align-items: center;
            max-width:1200px;
        }
    }
    &__intro{
        margin-bottom:4rem;
        @include mobile{
            margin-bottom:2.5rem;
        }
      }
    &__header.purdue-home-intro-text__header.header-font-united{
        text-align: center;
        margin-bottom:0;
      }
    &__content{
        margin-top:1rem;
        p{
            text-align:center;
        }
    }
    &__cards{
        width:100%;
        .purdue-home-cta-card{
            display:flex;
            background:$white;
            .image{
                width:30%;
                overflow: hidden;
                margin:0;
                &:after{
                    background: none;
                }
                img{
                    width:100%;
                    height:100%;
                    transition: 0.3s ease;
                }
                @include mobile{
                    display:none;
                }
            }
        }
        .columns{
            display:block !important;
            .flex-container--align-center{
                position:relative;
                display:flex;
                flex-direction:column;
                justify-content: center;
                align-items: flex-start;
                padding:2rem 7rem 2rem 3rem;
                top:0;
                @include mobile{
                    padding:2rem 7rem 2rem 1.25rem;
                }
            }
        }

    }
    &__card-title{
        color: $black;
        font-family: $acumin-pro;
        font-size: 2.5rem;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.1;
        margin-bottom:0.5rem !important;
        color:$black !important;
        @include mobile{
            font-size: 1.6rem;
            margin-bottom:0.8rem !important;
        }
    }
    &__card-subtext{
        color: $black;
        font-family: $acumin-pro;
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.5;
        color: $black !important;
    }
    .purdue-home-cta-card {
        position: relative;
        &:after{
            background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='104.253572px' height='104.253572px' viewBox='0 0 104.253572 104.253572' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Earrow_circle_icon%3C/title%3E%3Cg id='Desktop' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='arrow_circle_icon' transform='translate(52.1268, 52.1268) rotate(40) translate(-52.1268, -52.1268)translate(15.1268, 15.1268)' stroke='%238e6f3e' stroke-width='4'%3E%3Cg id='Group-3' transform='translate(0, 0)'%3E%3Ccircle id='Oval-Copy' transform='translate(37, 37) rotate(135) translate(-37, -37)' cx='36.9999977' cy='36.9999977' r='25.1629493'%3E%3C/circle%3E%3Cg id='Arrow-Copy-3' transform='translate(27.7199, 21.7701)' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9.52771771' y1='2.99227577' x2='9.56560625' y2='27.0777404' id='Path-6' transform='translate(9.5467, 15.035) rotate(50) translate(-9.5467, -15.035)'%3E%3C/line%3E%3Cpolyline id='Path-5' transform='translate(14.2315, 11.1834) rotate(50) translate(-14.2315, -11.1834)' points='4.73086087 17.2295253 14.1515077 5.10747085 23.7320575 17.2593992'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            height: 90px;
            width: 90px;
            background-repeat: no-repeat;
            background-size: cover;
            content: "";
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            position: absolute;
            transition: 0.3s ease;
        }
        &:hover {
            .image img{
                scale:1.1;
            }
            &:after{
                transform: translateY(-50%) translateX(3px);
            }
        }
    }
}