/*==========================================================
WHAT WE BELIEVE
Executive Blue Premium

PART 1

1. Section Foundation
2. Background Effects
3. Container
4. Section Header
5. Belief Layout
6. Center Philosophy
7. Philosophy Ring
==========================================================*/


/*==========================================================
1. SECTION FOUNDATION
==========================================================*/

.beliefs{

    position:relative;

    overflow:hidden;

    padding:100px 0;

    background:#FAFBFD;

}



/*==========================================================
2. BACKGROUND EFFECTS
==========================================================*/

.beliefs::before{

    content:"";

    position:absolute;

    top:-260px;

    right:-220px;

    width:720px;

    height:720px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(14,73,124,.05),
        rgba(14,73,124,0)
    );

    pointer-events:none;

}



.beliefs::after{

    content:"";

    position:absolute;

    bottom:-250px;

    left:-220px;

    width:620px;

    height:620px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(214,40,40,.04),
        rgba(214,40,40,0)
    );

    pointer-events:none;

}



/*==========================================================
3. CONTAINER
==========================================================*/

.beliefs .container{

    position:relative;

    z-index:2;

}



/*==========================================================
4. SECTION HEADER
==========================================================*/

.beliefs .section-header{

    max-width:980px;

    margin:0 auto 42px;

    text-align:center;

}



.beliefs .section-tag{

    display:inline-block;

    position:relative;

    margin-bottom:18px;

    padding-bottom:14px;

    font-family:var(--font-heading);

    font-size:1rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--primary-red);

}



.beliefs .section-tag::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:70px;

    height:3px;

    border-radius:20px;

    background:var(--primary-red);

}



.beliefs .section-title{

    margin:0;

    font-family:var(--font-heading);

    font-size:clamp(3rem,4vw,4.4rem);

    line-height:1.15;

    letter-spacing:-1px;

    color:var(--primary-blue);

    text-wrap:balance;

}



.beliefs .section-description{

    max-width:none;

    width:100%;

    margin:18px auto 0;

}



.beliefs .section-description p{

    max-width:1180px;

    margin:0 auto 10px;

    font-size:1.12rem;

    line-height:1.9;

    color:#5f6b7a;

    text-align:center;

    text-wrap:pretty;

}



.beliefs .section-description p:last-child{

    margin-bottom:0;

}



/*==========================================================
5. BELIEF LAYOUT
==========================================================*/

.belief-layout{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    grid-template-areas:

        "belief1 center belief2"
        "belief4 center belief3"
        ".       belief5 .";

    column-gap:22px;

    row-gap:18px;

    align-items:start;

    margin-top:10px;

    margin-bottom:44px;

}



/*==========================================================
6. GRID AREAS
==========================================================*/

.belief-1{

    grid-area:belief1;

}



.belief-2{

    grid-area:belief2;

}



.belief-3{

    grid-area:belief3;

}



.belief-4{

    grid-area:belief4;

}



.belief-5{

    grid-area:belief5;

    margin-top:-156px;

}



/*==========================================================
7. CENTER PHILOSOPHY
==========================================================*/

.belief-center{

    grid-area:center;

    display:flex;

    justify-content:center;

    align-items:center;

    align-self:center;

    padding-top:0;

    position:relative;

}



/*==========================================================
8. PHILOSOPHY RING
==========================================================*/

.belief-ring{

    position:relative;

    width:400px;

    height:400px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
conic-gradient(

    #2F73D9   0deg 72deg,      /* Application */

    #57C84D   72deg 144deg,    /* Technology */

    #FDB515   144deg 216deg,   /* Context */

    #8B5CF6   216deg 288deg,   /* Experience */

    #D62828   288deg 360deg    /* Journey */

);

    padding:16px;

    box-shadow:

        0 30px 70px rgba(14,73,124,.14);

}



/* Inner White Ring */

.belief-ring::before{

    content:"";

    position:absolute;

    inset:14px;

    border-radius:50%;

    background:#ffffff;

}



/*==========================================================
9. CENTER CORE
==========================================================*/

.belief-core{

    position:relative;

    z-index:2;

    width:270px;

    height:270px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:34px;

    background:

    linear-gradient(
        145deg,
        #0E497C,
        #165D97
    );

    color:#ffffff;

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,.08),

        0 18px 45px rgba(14,73,124,.22);

}



.belief-core img{

    width:56px;

    height:56px;

    margin-bottom:18px;

    object-fit:contain;

}



.belief-core h3{

    margin:0;

    font-family:var(--font-heading);

    font-size:1.75rem;

    line-height:1.28;

    font-weight:700;

    color:#ffffff;

}



.belief-core h3 span{

    display:block;

    margin-top:6px;

    font-size:1.05rem;

    line-height:1.45;

    font-weight:400;

    color:rgba(255,255,255,.92);

}

/*==========================================================
PART 2

8. Belief Cards
9. Icon System
10. Typography
11. Divider
12. Hover Effects
13. Philosophy Panel
==========================================================*/


/*==========================================================
8. BELIEF CARD
==========================================================*/

.belief-card{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:20px;

    background:#ffffff;

    border-radius:26px;

    border:1px solid rgba(14,73,124,.08);

    box-shadow:

        0 10px 30px rgba(14,73,124,.06);

    transition:

        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}



/*==========================================================
9. ICON SYSTEM
==========================================================*/

.belief-icon{

    position:relative;

    flex-shrink:0;

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

}



/*-------------------------
Colour Variables
--------------------------*/

.belief-blue{

    --belief-colour:#2F73D9;

}

.belief-green{

    --belief-colour:#57C84D;

}

.belief-yellow{

    --belief-colour:#FDB515;

}

.belief-purple{

    --belief-colour:#8B5CF6;

}

.belief-red{

    --belief-colour:#D62828;

}



/*-------------------------
Outer Arc
--------------------------*/

.belief-icon::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    border:6px solid var(--belief-colour);

    border-right-color:transparent;

    border-bottom-color:transparent;

    transform:rotate(-35deg);

}



/*-------------------------
White Circle
--------------------------*/

.belief-icon::after{

    content:"";

    position:absolute;

    inset:10px;

    border-radius:50%;

    background:#ffffff;

    box-shadow:

        0 4px 12px rgba(0,0,0,.08);

}



.belief-icon img{

    position:relative;

    z-index:2;

    width:38px;

    height:38px;

    object-fit:contain;

}



/*==========================================================
10. CONTENT
==========================================================*/

.belief-content{

    flex:1;

}



.belief-number{

    display:inline-block;

    margin-bottom:6px;

    font-family:var(--font-heading);

    font-size:.95rem;

    font-weight:700;

    letter-spacing:2px;

    color:var(--belief-colour);

}



.belief-content h3{

    margin:0;

    font-family:var(--font-heading);

    font-size:1.35rem;

    line-height:1.35;

    color:var(--primary-blue);

}



.belief-content p{

    margin:0 0 10px;

    line-height:1.65;

    color:#5F6B7A;

    font-size:1rem;

}



.belief-content p:last-child{

    margin-bottom:0;

}



/*==========================================================
11. DIVIDER
==========================================================*/

.belief-divider{

    width:50px;

    height:4px;

    margin:12px 0 14px;

    border-radius:30px;

    background:var(--belief-colour);

}



/*==========================================================
12. HOVER
==========================================================*/

.belief-card:hover{

    transform:translateY(-10px);

    border-color:rgba(14,73,124,.15);

    box-shadow:

        0 22px 45px rgba(14,73,124,.12);

}



.belief-card:hover .belief-icon{

    transform:rotate(-6deg);

    transition:transform .35s ease;

}



.belief-card:hover .belief-divider{

    width:80px;

    transition:all .35s ease;

}



/*==========================================================
13. PHILOSOPHY PANEL
==========================================================*/

.philosophy-panel{

    display:flex;

    align-items:center;

    gap:22px;

    padding:30px 34px;

    background:

        linear-gradient(
            135deg,
            #0E497C,
            #195F97
        );

    border-radius:32px;

    overflow:hidden;

    position:relative;

    box-shadow:

        0 22px 50px rgba(14,73,124,.20);

}



/* Decorative Glow */

.philosophy-panel::before{

    content:"";

    position:absolute;

    top:-160px;

    right:-160px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(255,255,255,.12),

            transparent

        );

}



.philosophy-icon{

    flex-shrink:0;

    width:120px;

    height:120px;

    border-radius:50%;

    background:

        rgba(255,255,255,.10);

    display:flex;

    justify-content:center;

    align-items:center;

    border:

        1px solid rgba(255,255,255,.15);

}



.philosophy-icon img{

    width:90px;

}



.philosophy-content{

    position:relative;

    z-index:2;

}



.philosophy-content h3{

    margin:0 0 12px;

    font-family:var(--font-heading);

    font-size:2rem;

    color:#ffffff;

}



.philosophy-content p{

    margin:0 0 12px;

    font-size:1.05rem;

    line-height:1.7;

    color:rgba(255,255,255,.92);

}



.philosophy-highlight{

    margin-top:14px;

    padding-top:14px;

    border-top:1px solid rgba(255,255,255,.20);

    font-family:var(--font-heading);

    font-size:1.35rem !important;

    line-height:1.6 !important;

    color:#ffffff !important;

}

/*==========================================================
PART 3

15. Large Desktop
16. Laptop
17. Tablet
18. Mobile
19. Small Mobile
20. Accessibility
21. Reduced Motion
==========================================================*/


/*==========================================================
15. LARGE DESKTOP
==========================================================*/

@media (min-width:1600px){

    .belief-ring{

        width:460px;
        height:460px;

    }

    .belief-core{

        width:340px;
        height:340px;

    }

}



/*==========================================================
16. LAPTOP
==========================================================*/

@media (max-width:1400px){

    .belief-layout{

        column-gap:28px;
        row-gap:28px;

    }

    .belief-ring{

        width:380px;
        height:380px;

    }

    .belief-core{

        width:285px;
        height:285px;

        padding:36px;

    }

    .belief-core h3{

        font-size:1.75rem;

    }

}



/*==========================================================
17. TABLET
==========================================================*/

@media (max-width:1200px){

    .belief-5{

        margin-top:-96px;

    }

    .belief-layout{

        grid-template-columns:repeat(2,1fr);

        grid-template-areas:

            "center center"
            "belief1 belief2"
            "belief3 belief4"
            "belief5 belief5";

        row-gap:18px;

    }

    .belief-center{

        margin-bottom:8px;

    }

    .belief-ring{

        width:340px;
        height:340px;

    }

    .belief-core{

        width:255px;
        height:255px;

    }

    .belief-core img{

        width:54px;
        height:54px;

        margin-bottom:20px;

    }

    .belief-core h3{

        font-size:1.5rem;

    }

    .belief-core h3 span{

        font-size:1.05rem;

    }

    .philosophy-panel{

        flex-direction:column;

        text-align:center;

        gap:22px;

        padding:38px 34px;

    }

}



/*==========================================================
18. MOBILE
==========================================================*/

@media (max-width:768px){

    .beliefs{

        padding:78px 0;

    }

    .beliefs .section-header{

        margin-bottom:44px;

    }

    .belief-layout{

        grid-template-columns:1fr;

        grid-template-areas:

            "center"
            "belief1"
            "belief2"
            "belief3"
            "belief4"
            "belief5";

        row-gap:18px;

    }

    .belief-5{

        margin-top:0;

    }

    .belief-ring{

        width:290px;
        height:290px;

    }

    .belief-core{

        width:215px;
        height:215px;

        padding:28px;

    }

    .belief-core img{

        width:46px;
        height:46px;

        margin-bottom:18px;

    }

    .belief-core h3{

        font-size:1.28rem;

    }

    .belief-core h3 span{

        font-size:.95rem;

    }

    .belief-card{

        flex-direction:column;

        align-items:center;

        text-align:center;

        padding:32px 28px;

        gap:20px;

    }

    .belief-divider{

        margin-left:auto;
        margin-right:auto;

    }

    .belief-content h3{

        font-size:1.45rem;

    }

    .philosophy-panel{

        padding:32px 26px;

        border-radius:24px;

    }

    .philosophy-content h3{

        font-size:2rem;

    }

}



/*==========================================================
19. SMALL MOBILE
==========================================================*/

@media (max-width:480px){

    .beliefs{

        padding:64px 0;

    }

    .beliefs .section-title{

        font-size:2.25rem;

    }

    .beliefs .section-description p{

        font-size:1rem;

        line-height:1.8;

    }

    .belief-ring{

        width:250px;
        height:250px;

        padding:12px;

    }

    .belief-ring::before{

        inset:10px;

    }

    .belief-core{

        width:185px;
        height:185px;

        padding:22px;

    }

    .belief-core img{

        width:40px;
        height:40px;

    }

    .belief-core h3{

        font-size:1.1rem;

    }

    .belief-core h3 span{

        margin-top:8px;

        font-size:.82rem;

    }

    .belief-card{

        padding:28px 22px;

        border-radius:22px;

    }

    .belief-icon{

        width:74px;
        height:74px;

    }

    .belief-icon::after{

        inset:10px;

    }

    .belief-icon img{

        width:30px;
        height:30px;

    }

    .philosophy-panel{

        padding:34px 22px;

    }

    .philosophy-icon{

        width:90px;
        height:90px;

    }

    .philosophy-icon img{

        width:42px;

    }

    .philosophy-content h3{

        font-size:1.6rem;

    }

    .philosophy-highlight{

        font-size:1.1rem !important;

    }

}



/*==========================================================
20. ACCESSIBILITY
==========================================================*/

.belief-card:focus-within{

    outline:3px solid rgba(14,73,124,.18);

    outline-offset:4px;

}



.belief-card img{

    user-select:none;

}



/*==========================================================
21. REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}