/* Variables */
:root {
    --color-primary: #1691B2;
    --color-primary-dk: #106B84;
    --color-secondary: #FBE05C;
    --color-light: #fff;
    --color-dark: #231F20;
    --border-radius: 30px;
    --font-stack: 'Source Sans Pro', Helvetica, Arial, sans-serif;
}


/* ===================== */
/* display and utilities */
header,
section {
    .inner {
        max-width: 97rem;
        margin: 0 auto;
        padding: 1rem;
    }

    .primary-bg {
        background-color: var(--color-primary);
        color: var(--color-light);
    }

    .secondary-bg {
        background-color: var(--color-secondary);
    }

    h1 {
        width: 15ch;
        color: var(--color-light);
        font-size: 7.2rem;
        font-weight: 700;
        line-height: 1.1;
        margin: 3% 0 2%;
    }

    h2 {
        color: var(--color-primary);
        font-size: 4.8rem;
        font-weight: 700;
    }

    p,
    ul,
    li {
        font-family: var(--font-stack);
        font-size: 2rem;
        line-height: 1.3;
    }

    a.button:link,
    a.button:visited {
        text-align: center;
        text-transform: uppercase;
        background: var(--color-primary);
        border: solid 1px var(--color-primary);
        padding: 1.5rem 25%;
        cursor: pointer;
        color: #fff;
        margin: .5rem 0;
        text-decoration: none;
        max-width: 100%;
        display: inline-block;
        font-family: var(--font-stack);
        line-height: normal;
        font-size: 2rem;
        font-weight: 600;
        border-radius: var(--border-radius);
        box-shadow: 5px 6px 15px 0px rgba(0, 0, 0, 0.3);
    }

    a.button:hover,
    a.button:focus {
        background: var(--color-primary-dk);
        box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.4);
    }
}
/* max-width: 500px */
@media screen and (max-width: 31.25em) {
header,
section {
    h2 { font-size: 3.8rem; }
    p,
    ul,
    li { font-size: 1.8rem; }
}
}
/* ===================== */


/* =========== */
/* Header Area */
header.hero-bg {
    height: 70rem;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 25%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%), url('../img/cclanding/woman-credit-card-walking.jpg');
    background-size: cover;
    background-position: center;

    img {
        width: 33rem;
        margin-left: -4rem;
        margin-top: 7rem;
    }

    p {
        width: 19ch;
        color: var(--color-light);
        font-size: 4.2rem;
        font-weight: 300;
        line-height: 1.1;
    }
}
/* max-width: 910px */
@media screen and (max-width: 56.875em) {
header.hero-bg {
    height: unset;
    background-image: none;

    .inner {padding:0;}
    
    .header-logo {
        height: 55rem;
        background-image: url('../img/cclanding/woman-credit-card-walking.jpg');
        background-size: cover;
        background-position: right;
        padding:1rem;
    
        img {
            width: 35%;
            margin-left: 0;
            margin-top: 5%;
        }
    }
    .header-text {
        background-color: var(--color-primary);
        padding:1rem 5% 3rem;
        p { width: 100%; }
    }
}
}
/* max-width: 600px */
@media screen and (max-width: 37.5em) {
header.hero-bg {
    .header-logo {
        height: 45rem;
    
        img { width: 18rem; }
    }
    .header-text {
        h1 { width:100%;font-size: 5.6rem; }
        p { font-size: 3.2rem; }
    }
    
}
}
/* max-width: 500px */
@media screen and (max-width: 31.25em) {
header.hero-bg {
    .header-logo {
        height: 35rem;
    }
    .header-text {
        h1 { font-size: 4.8rem; }
        p { font-size: 2.6rem; }
    }
    
}
}
/* max-width: 400px */
@media screen and (max-width: 25em) {
header.hero-bg {
    .header-logo {
        img {
            margin-left: -2rem;
            margin-top: -2rem;
        }
    }    
}
}
/* =========== */


/* ======== */
/* CTA Area */
section.cta_area {
    border-bottom: 10px solid var(--color-secondary);
    position: sticky;
    top: 0;
    background: var(--color-light);
    z-index: 1;

    .inner {
        display: grid;
        grid-template-columns: 25rem 1fr;
        gap: 2rem;
        align-items: center;
        padding: 3rem 0;

        img { width: 25rem; }
        p {text-align: right; margin-bottom: 0;}
    }

    &.sticking {
        .inner {
            padding: 2rem 3rem;

            img {width:20rem}
            a.button:link,
            a.button:visited { padding: 1rem 6rem; }
        }
    }
}
/* max-width: 1100px */
@media screen and (max-width: 68.75em) {
section.cta_area {
    .inner { padding: 3rem; }
}
}
/* max-width: 900 */
@media screen and (max-width: 56.25em) {
   section.cta_area {
    &.sticking {
        .inner {
            a.button:link,
            a.button:visited { padding: 1rem 4rem; }
        }
    }
} 
}
/* max-width: 600px */
@media screen and (max-width: 37.5em) {
    section.cta_area {
        .inner { 
            img {width: 20rem;}
        }
    }
}
/* max-width: 500px */
@media screen and (max-width: 31.25em) {
    section.cta_area {
    .inner {
        padding: 1rem 3rem;

        a.button:link,
        a.button:visited { padding: 1rem 2rem; }
    }
    &.sticking {
        .inner {
            padding: .5rem 2rem;
            grid-template-columns: 15rem 1fr;
            img {width:15rem}
            a.button:link,
            a.button:visited { padding: .5rem 4rem; }
        }
    }
}
}
/* max-width: 400px */
@media screen and (max-width: 25em) {
    section.cta_area {
    .inner {
        padding: 1rem 3rem;

        a.button:link,
        a.button:visited {
            font-size: 1.6rem;
            padding: 1rem 2rem;
        }
    }
    &.sticking {
        .inner {
            grid-template-columns: 10rem 1fr;
            img {width:10rem}
            a.button:link,
            a.button:visited { padding: .5rem 2rem; }
        }
    }
}
}
/* ======== */


/* ========== */
/* Offer Area */
section.offer_area {
    padding-bottom: 5rem;

    p {
        font-size: 2.8rem;
        padding: 3.5rem 9%;
    }

    .offer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
        justify-items:center;
        padding: 3rem;
        border: 3px solid var(--color-secondary);
        border-radius: var(--border-radius);

        .offer-text {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            text-align: center;
            font-size: 1.8rem;
            font-family: var(--font-stack);
            text-transform: uppercase;
            width: calc(100% - 2rem);

            span {
                display: block;

                &.offer-highlight {
                    font-size: 5rem;
                    font-weight: 700;
                    color: var(--color-primary);
                    text-transform: initial;
                }
            }
        }
    }
}
/* max-width: 800px */
@media screen and (max-width: 50em) {
section.offer_area {
    .offer { grid-template-columns: 1fr; }
}
}
/* max-width: 500px */
@media screen and (max-width: 31.25em) {
section.offer_area {
    padding-top: 5rem;
    p { display: none; }

    .offer {
        .offer-text {
            width: calc(100% - 10%);
        }
        a.button:link,
        a.button:visited {
            font-size: 1.6rem;
            padding: 1rem 5%;
            width: calc(90% - 10%);
        }
    }
}
}
/* ========== */


/* ========== */
/* Perks Area */
.perks-area {
    padding: 5rem 0;

    h2 {
        color: var(--color-light);
    }
}

.perks-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;

    .perks-list {
        list-style-type: none;
        padding: 0;
        margin-bottom: 0;

        .perks-item {
            margin-bottom: 2rem;

            .perks-item_exp-area {
                padding: 2rem 0 2rem 6rem;
                
                a:link,
                a:visited { color: #fff; }
                a:hover,
                a:focus { color: #000; }
            }

            .perks-item_exp-area.collapsed {
                display: none;
            }
        }
    }
}
/* max-width: 820px */
@media screen and (max-width: 51.25em) {
.perks-container {  grid-template-columns: 1fr; gap: 0;}
}

.icon-button-lockup {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 2rem;
    align-items: center;

    .perks-item_toggle {
        position: relative;
        font-family: var(--font-stack);
        font-size: 2.4rem;
        font-weight: 600;
        text-align: left;
        color: var(--color-light);
        background-color: transparent;
        padding: 1rem 0;
        border-bottom: 2px solid var(--color-light);
        background-position: right bottom 10px;
        background-repeat: no-repeat;
        background-size: 30px;

        &:hover {
            background-color: rgba(0, 0, 0, .3);
        }

        &[aria-expanded="false"] {
            background-image: url('../img/cclanding/svg/down-caret.svg');
        }

        &[aria-expanded="true"] {
            background-image: url('../img/cclanding/svg/up-caret.svg');
        }
    }
}
/* max-width: 450px */
@media screen and (max-width: 28.125em) {
.icon-button-lockup {
    grid-template-columns: 3rem 1fr;
    gap: 1rem;

    .perks-item_toggle { font-size: 2.2rem; }
}
}
/* ========== */


/* ============================ */
/* Credit Card Description Area */
.credit-card-area {
    padding: 5rem 0;
    border-bottom: 5px solid var(--color-primary);

    .card-area_list {
        list-style-type: none;
        padding: 0;
        margin-top: 5rem;
    }
}

.card-area_item {
    position: relative;
    display: flex;
    flex-direction: row;
    width:calc(80% - 8rem);
    border: 2px solid var(--color-secondary);
    padding: 4rem;
    border-radius: var(--border-radius);
    margin-bottom: 5rem;

    div {
        width:74%;
        h3 {
            font-size: 4.8rem;
            font-weight: 700;
            color: var(--color-primary);
            margin:0;
        }

        p.card-area_sub {
            text-transform: uppercase;
            font-weight: 300;
            font-size: 1.8rem;
            color: var(--color-dark);
            letter-spacing: .2rem;

            .circle-bullet {
                display: inline-block;
                width: 1rem;
                height: 1rem;
                margin-right: 1rem;
                background-color: var(--color-secondary);
                border-radius: 50%;
            }
        }

        p.card-area_desc {
            color: var(--color-dark);
            line-height: 1.3;
            margin: 2rem 0;
        }
        a.button:link,
        a.button:visited {
            padding: 1rem 6rem;
        }
    }
}
.card-area_item img {
    position: absolute;
    right: -20%;
    top: 5rem;
    width: 30rem;
    border-radius: 10px;
    box-shadow: 5px 6px 15px 0px rgba(0, 0, 0, 0.3);
    /* animation */
    transform: perspective(400px) rotate3d(0, -1, -.5, 8deg);
    animation-name: shimmie;
    animation-duration: 5s;
    animation-timing-function: linear; 
    animation-direction: alternate;
    animation-iteration-count: infinite;
    
    /* animation ends */
}
.card-area_item.flex-right {
    display: flex;
    flex-direction: row-reverse;
    margin-left: 19%;
}

.card-area_item.flex-right img {
    position: absolute;
    left: -20%;
    transform: perspective(400px) rotate3d(0, -1, -.5, -8deg);
    animation-name: shimmie-alt;
}
/* ............................ */
/* ........ Animation ......... */
@keyframes shimmie {
    to { 
        transform: perspective(400px) rotate3d(0, -1, -.5, -8deg);
    }
}
@keyframes shimmie-alt {
    to { 
        transform: perspective(400px) rotate3d(0, -1, -.5, 8deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .card-area_item img,
    .card-area_item.flex-right img {
        animation-name: none;
    }
}
/* ............................ */

/* max-width: 810px */
@media screen and (max-width: 50.625em) {
.card-area_item {
    div { width: 68%; }
}
}
/* max-width: 750px */
@media screen and (max-width: 46.875em) {
.card-area_item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width:calc(99% - 8rem);
    margin-top: 15rem;
    padding: 13rem 4rem 4rem 4rem;

    div { width:100%; }
}
.card-area_item img {
    position: absolute;
    right: unset;
    top: -10rem;
}
.card-area_item.flex-right {
    display: flex;
    flex-direction: column;
    margin-left: 0;
}

.card-area_item.flex-right img {
    position: absolute;
    left:unset;
    top: -10rem;
}
}
/* max-width: 450px */
@media screen and (max-width: 28.1255em) {
.card-area_item {
    padding: 9rem 4rem 4rem 4rem;

    div { 
        h3 {
            font-size: 4rem;
        }
    }
}
.card-area_item img { width: 25rem; }
}
/* max-width: 375px */
@media screen and (max-width: 23.438em) {
.card-area_item {
    margin-top: 12rem;
    padding: 7rem 3rem 3rem 3rem;
}
.card-area_item img,
.card-area_item.flex-right img { 
    width: 20rem;
    top: -7rem; 
}
}
/* ============================ */

/* ==================== */
/* Credit Card Features */
section.credit-card-feat {
    padding-top: 4rem;

    .card-feat {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        list-style-type: none;
        padding:0;
        margin: 4rem 0;

        .card-feat_item {
            position: relative;
            padding-left: 6rem;

            img {
                position: absolute;
                left: 0;
                width: 4rem;
            }
            h3 {
               margin: 0 0 .5rem; 
               color: var(--color-primary);
            }
        }
    }
    p.card-feat_ctas {
        text-align: center;
        margin-bottom: 5rem;

        a.button:link,
        a.button:visited {
            padding: 1rem 4rem;
            margin: 1rem 2rem;
        }
        a.button[href*="banking.cefcu"]:link,
        a.button[href*="banking.cefcu"]:visited {
            background: var(--color-light);
            border: solid 1px var(--color-primary);
            color: var(--color-primary) !important;   
        }
        a.button[href*="banking.cefcu"]:hover,
        a.button[href*="banking.cefcu"]:focus {
            background: var(--color-primary-dk);
            color:var(--color-light) !important;
        }

    }
}
/* max-width: 820px */
@media screen and (max-width: 51.25em) {
    section.credit-card-feat {
        .card-feat {  
            grid-template-columns: 1fr;             
            gap: 2rem;
        }
    }
}
/* ==================== */


/* ===================== */
/* Mobile Wallet Section */
section.mobile-wallet-feat {
    background-color: var(--color-secondary);
    margin-bottom: 5rem;

    .mobile-feat {
        position: relative;
        background-color: var(--color-light);
        border-radius: var(--border-radius);
        padding: 4rem;
        margin: 4rem;

        .mobile-feat_text {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            width: 40%;
        }
        img {
            position: absolute;
            right:0;
            bottom:0;
            width: 60%;
        }
    }
    
}
/* max-width: 965px */
@media screen and (max-width: 60.313em) {
section.mobile-wallet-feat {
    & .mobile-feat {
        img {
            position: absolute;
            right: -10%;
            bottom: 0;
            width: 70%;
        }
    }
}
}
/* max-width: 800px */
@media screen and (max-width: 50em) {
section.mobile-wallet-feat {
    height: 40rem;

    .mobile-feat {
        background-color: var(--color-primary);
        padding: 0;
        margin: 4rem auto;
        height: 30rem;
        width: 70%;

        .mobile-feat_text {
            background-color: var(--color-light);
            transform: translateX(-5%);
            gap: 0;
            width: calc(110% - 6rem);
            border-radius: var(--border-radius);
            z-index: 10;
            position: absolute;
            bottom: 0;
            padding:0 3rem;
            
            a.button:link,
            a.button:visited {
                display: none;
            }   
        }
        img {
            position: absolute;
            right:unset;
            left: 7.5%;
            width: 85%;  
        }
    }   
}
}
/* max-width: 775px */
@media screen and (max-width: 48.438em) {
section.mobile-wallet-feat {
    .mobile-feat { 
        img { bottom: 20px; } 
        .mobile-feat_text { padding: 0 3rem 1rem; }
    }   
}
}
/* max-width: 705px */
@media screen and (max-width: 44.063em) {
section.mobile-wallet-feat {
    .mobile-feat { img { bottom: 55px; } }   
}
}
/* max-width: 630px */
@media screen and (max-width: 39.375em) {
section.mobile-wallet-feat {
    .mobile-feat {
        width: 80%; 
        img { bottom: 90px; } 
    }   
}
}
/* max-width: 400px */
@media screen and (max-width: 25em) {
section.mobile-wallet-feat {
    .mobile-feat { img { bottom: 145px; } }   
}
}
/* max-width: 350px */
@media screen and (max-width: 21.875em) {
section.mobile-wallet-feat {
    .mobile-feat { img { width: 95%; left: 2.5%; bottom: 165px; } }   
}
}
/* ===================== */


/* ============================ */
/* Navigate Credit w Confidence */
section.nav-credit{
    border-bottom: 5px solid var(--color-secondary);

    .card-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin: 5rem 0;
        justify-items: center;

        a.card-info_item:link,
        a.card-info_item:visited {
            display: block;
            border: 2px solid var(--color-primary);
            border-radius: var(--border-radius);
            text-decoration: none;
            width: calc(100% - 3.2rem);

            .card-info_img {
                display: inline-block;
                width: 100%;
                height: 300px;
                border-radius: 28px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                transition: background-size 1s ease-in-out;

                &.high-interest {background-image: url('../img/cclanding/woman-on-phone-with-credit-card.jpg');}
                &.fraud {background-image: url('../img/cclanding/support-specialist-computer.jpg');}
            }
            
            .card-info_text {
                display:grid;
                grid-template-columns: 1fr 8rem;
                align-items: center;
                gap: 2rem;
                width: calc(100% - 6rem);
                padding: 2rem;

                /* p {padding:2rem 0 2rem 2rem;}
                img {padding:2rem 2rem 2rem 0;} */
            }
        }
        a.card-info_item:hover,
        a.card-info_item:focus {
            .card-info_img { background-size: 145%; }
        }  
    }
}

/* max-width: 800px */
@media screen and (max-width: 50em) {
section.nav-credit{
    .card-info {
        grid-template-columns: 1fr;
    }
}
}
/* ============================ */

section.disc-section {
    p.disc {
        text-align: center;
        padding: 5rem 1rem;

        a:link,
        a:visited {
            font-size: 2.6rem;
            color: var(--color-primary);
            text-transform: uppercase;
        }
        a:hover,
        a:focus {
            color: var(--color-dark);
        }
    }
}