/*=========================================================
    PROJECTS PAGE
=========================================================*/


/*=========================================================
    HERO
=========================================================*/

.projects-hero{

    position:relative;

    min-height:470px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #082342 0%,
            #0b4da1 55%,
            #2f6df6 100%
        );

}


.projects-hero-overlay{

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(47,109,246,.25),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(255,193,7,.12),
            transparent 35%
        );

}


.projects-hero > .container{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 20px;

}


.projects-hero-content{

    max-width:850px;

    margin:auto;

    padding:110px 20px 60px;

    text-align:center;

    color:#fff;

}


.projects-tag,
.projects-section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 20px;

    border-radius:50px;

    font-size:12px;

    line-height:1;

    font-weight:800;

    letter-spacing:1px;

}


.projects-tag{

    background:rgba(255,255,255,.14);

    color:#ffc107;

}


.projects-section-tag{

    background:#eef4ff;

    color:#2f6df6;

}


.projects-hero h1{

    margin:25px auto 20px;

    color:#fff;

    font-size:56px;

    line-height:1.2;

    font-weight:800;

}


.projects-hero p{

    max-width:760px;

    margin:0 auto;

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

    font-size:18px;

    line-height:1.9;

}


.projects-breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:30px;

    font-size:14px;

    font-weight:600;

}


.projects-breadcrumb a{

    color:#ffc107;

    text-decoration:none;

    transition:.3s ease;

}


.projects-breadcrumb a:hover{

    color:#fff;

}


.projects-breadcrumb span{

    color:#fff;

}


/*=========================================================
    GENERAL
=========================================================*/

.projects-intro,
.projects-list,
.project-categories,
.projects-cta{

    position:relative;

}


.projects-intro .container,
.projects-list .container,
.project-categories .container,
.projects-cta .container{

    width:100%;

    max-width:1250px;

    margin:auto;

    padding:0 20px;

}


/*=========================================================
    SECTION HEADING
=========================================================*/

.section-heading{

    max-width:760px;

    margin:0 auto 55px;

    text-align:center;

}


.section-heading h2{

    margin:18px 0;

    color:#12355b;

    font-size:42px;

    line-height:1.25;

    font-weight:800;

}


.section-heading p{

    margin:0;

    color:#68768b;

    font-size:17px;

    line-height:1.8;

}


/*=========================================================
    INTRO
=========================================================*/

.projects-intro{

    padding:95px 0 85px;

    background:#fff;

}


.projects-intro-content{

    max-width:850px;

    margin:auto;

    text-align:center;

}


.projects-intro-content h2{

    margin:18px 0 20px;

    color:#12355b;

    font-size:42px;

    line-height:1.25;

    font-weight:800;

}


.projects-intro-content p{

    max-width:800px;

    margin:0 auto 18px;

    color:#68768b;

    font-size:17px;

    line-height:1.9;

}


/*=========================================================
    PROJECT LIST
=========================================================*/

.projects-list{

    padding:100px 0;

    background:#f7faff;

}


.projects-grid{

    display:grid;

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

    gap:30px;

}


/*=========================================================
    PROJECT CARD
=========================================================*/

.project-card{

    position:relative;

    min-width:0;

    overflow:hidden;

    background:#fff;

    border:1px solid #e5ebf3;

    border-radius:25px;

    box-shadow:0 15px 40px rgba(17,62,120,.07);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.project-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(17,62,120,.13);

}


/*=========================================================
    PROJECT IMAGE
=========================================================*/

.project-card .project-image{

    position:relative;

    width:100%;

    height:245px;

    overflow:hidden;

    background:#eaf1f8;

}


.project-card .project-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:transform .5s ease;

}


.project-card:hover .project-image img{

    transform:scale(1.05);

}


/*=========================================================
    PROJECT CATEGORY BADGE
=========================================================*/

.project-card .project-image .project-category{

    position:absolute !important;

    left:20px !important;

    bottom:20px !important;

    top:auto !important;

    right:auto !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:auto !important;

    height:auto !important;

    min-width:0 !important;

    max-width:max-content !important;

    min-height:0 !important;

    max-height:none !important;

    padding:8px 14px !important;

    margin:0 !important;

    border:0 !important;

    border-radius:50px !important;

    background:#ffc107 !important;

    color:#12355b !important;

    font-family:inherit !important;

    font-size:10px !important;

    line-height:1 !important;

    font-weight:800 !important;

    letter-spacing:.7px !important;

    white-space:nowrap !important;

    text-align:center !important;

    box-sizing:border-box !important;

    z-index:10 !important;

}


/*=========================================================
    PROJECT CONTENT
=========================================================*/

.project-content{

    padding:30px;

}


.project-content h3{

    min-height:60px;

    margin:0 0 13px;

    color:#12355b;

    font-size:22px;

    line-height:1.35;

    font-weight:800;

}


.project-content p{

    min-height:76px;

    margin:0 0 22px;

    color:#68768b;

    font-size:14px;

    line-height:1.8;

}


.project-link{

    display:inline-flex;

    align-items:center;

    gap:9px;

    color:#2f6df6;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    transition:.3s ease;

}


.project-link i{

    transition:transform .3s ease;

}


.project-link:hover{

    color:#0b4da1;

}


.project-link:hover i{

    transform:translateX(5px);

}


/*=========================================================
    PROJECT CATEGORIES
=========================================================*/

.project-categories{

    padding:100px 0;

    background:#fff;

}


.project-category-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:25px;

}


.project-focus-card{

    padding:38px 25px;

    text-align:center;

    background:#fff;

    border:1px solid #e5ebf3;

    border-radius:25px;

    box-shadow:0 12px 35px rgba(17,62,120,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.project-focus-card:hover{

    transform:translateY(-7px);

    box-shadow:0 22px 50px rgba(17,62,120,.11);

}


.project-focus-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    border-radius:50%;

    background:#eef4ff;

    color:#2f6df6;

    font-size:26px;

}


.project-focus-card h3{

    margin:0 0 12px;

    color:#12355b;

    font-size:20px;

    line-height:1.35;

    font-weight:800;

}


.project-focus-card p{

    margin:0;

    color:#68768b;

    font-size:14px;

    line-height:1.8;

}


/*=========================================================
    CTA
=========================================================*/

.projects-cta{

    padding:90px 0 100px;

    background:#f7faff;

}


.projects-cta-wrapper{

    padding:80px 50px;

    border-radius:35px;

    text-align:center;

    background:
        linear-gradient(
            135deg,
            #0b4da1,
            #2f6df6
        );

    box-shadow:0 25px 65px rgba(17,62,120,.15);

}


.projects-cta-wrapper h2{

    margin:22px auto 18px;

    color:#fff;

    font-size:46px;

    line-height:1.25;

    font-weight:800;

}


.projects-cta-wrapper p{

    max-width:700px;

    margin:0 auto 35px;

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

    font-size:17px;

    line-height:1.9;

}


.projects-cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}


.projects-primary-btn,
.projects-outline-btn{

    min-width:190px;

    min-height:56px;

    padding:0 30px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:50px;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;

    box-sizing:border-box;

}


.projects-primary-btn{

    background:#ffc107;

    color:#12355b;

}


.projects-primary-btn:hover{

    transform:translateY(-4px);

}


.projects-outline-btn{

    background:transparent;

    color:#fff;

    border:2px solid rgba(255,255,255,.5);

}


.projects-outline-btn:hover{

    background:#fff;

    color:#12355b;

}


/*=========================================================
    TABLET
=========================================================*/

@media(max-width:991px){

    .projects-hero h1{

        font-size:46px;

    }


    .projects-grid{

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

    }


    .project-category-grid{

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

    }

}


/*=========================================================
    MOBILE
=========================================================*/

@media(max-width:768px){

    .projects-hero{

        min-height:420px;

    }


    .projects-hero-content{

        padding:75px 15px 45px;

    }


    .projects-hero h1{

        font-size:34px;

    }


    .projects-hero p{

        font-size:16px;

    }


    .projects-intro,
    .projects-list,
    .project-categories{

        padding:70px 0;

    }


    .projects-intro .container,
    .projects-list .container,
    .project-categories .container,
    .projects-cta .container{

        padding:0 15px;

    }


    .projects-intro-content h2,
    .section-heading h2{

        font-size:32px;

    }


    .projects-grid{

        grid-template-columns:1fr;

        gap:25px;

    }


    .project-category-grid{

        grid-template-columns:1fr;

    }


    .project-card .project-image{

        height:220px;

    }


    .project-content{

        padding:25px;

    }


    .project-content h3{

        min-height:0;

        font-size:21px;

    }


    .project-content p{

        min-height:0;

    }


    .projects-cta{

        padding:60px 0 70px;

    }


    .projects-cta-wrapper{

        padding:60px 25px;

        border-radius:25px;

    }


    .projects-cta-wrapper h2{

        font-size:32px;

    }


    .projects-cta-buttons{

        flex-direction:column;

    }


    .projects-primary-btn,
    .projects-outline-btn{

        width:100%;

    }

}


/*=========================================================
    SMALL MOBILE
=========================================================*/

@media(max-width:480px){

    .projects-hero-content{

        padding:65px 10px 40px;

    }


    .projects-hero h1{

        font-size:30px;

    }


    .projects-hero p{

        font-size:15px;

        line-height:1.7;

    }


    .projects-breadcrumb{

        gap:8px;

        font-size:13px;

    }


    .projects-intro,
    .projects-list,
    .project-categories{

        padding:60px 0;

    }


    .section-heading{

        margin-bottom:40px;

    }


    .section-heading h2,
    .projects-intro-content h2{

        font-size:29px;

    }


    .projects-section-tag,
    .projects-tag{

        padding:8px 16px;

        font-size:11px;

    }


    .project-card{

        border-radius:20px;

    }


    .project-card .project-image{

        height:210px;

    }


    .project-content{

        padding:23px 20px;

    }


    .project-content h3{

        font-size:20px;

    }


    .project-focus-card{

        padding:32px 22px;

    }


    .projects-cta-wrapper{

        padding:50px 20px;

    }


    .projects-cta-wrapper h2{

        font-size:29px;

    }

}
.project-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 260px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 48px;
}