/*
Theme Name: Mon Site Maroc
Theme URI: https://monsitemaroc.online
Author: Said
Version: 1.0
*/


/* PREMIUM PORTFOLIO */

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
    gap:35px;
}

.portfolio-item{
    background:#111c35;
    border-radius:25px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    transition:.4s;
    position:relative;
}

.portfolio-item:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 50px rgba(37,99,235,.25);
}

.portfolio-preview{
    height:260px;
    background:#fff;
    overflow:hidden;
}

.browser-bar{
    height:35px;
    background:#f3f4f6;
    padding:10px;
}

.browser-bar span{
    width:8px;
    height:8px;
    background:#60a5fa;
    display:inline-block;
    border-radius:50%;
    margin-left:5px;
}

.portfolio-content{
    padding:30px;
    position:relative;
}

.portfolio-content h3{
    font-size:34px;
    margin-bottom:10px;
}

.portfolio-content p{
    color:#cbd5e1;
}

.portfolio-icon{
    position:absolute;
    left:25px;
    top:20px;
    width:70px;
    height:70px;
    background:#1d4ed8;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
}

.mini-btn{
    display:inline-block;
    background:#2563eb;
    color:#fff;
    padding:8px 15px;
    border-radius:8px;
    font-size:12px;
    margin-top:15px;
}
.mini-visual{
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.mini-visual img{
    width:65%;
    height:100px;
    max-height:100px;
}





/* COMPANY */

.preview-body{
    display:flex;
    height:225px;
}

.preview-text{
    flex:1;
    padding:35px;
    color:#111827;
}

.preview-text h4{
    font-size:28px;
    margin-bottom:15px;
}

.building{
    width:45%;
    background:
    linear-gradient(
        135deg,
        #dbeafe,
        #1e40af
    );
}

/* SHOP */

.shop-top{
    display:flex;
    padding:20px;
}

.shop-text{
    flex:1;
    color:#111827;
}

.product{
    width:160px;
    height:110px;
    background:#e5e7eb;
    border-radius:15px;
}

.shop-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    padding:20px;
}

.shop-grid div{
    height:55px;
    background:#f1f5f9;
    border-radius:10px;
}

/* LANDING */

.landing-preview{
    background:linear-gradient(
        135deg,
        #1d4ed8,
        #4338ca
    );
    position:relative;
}

.rocket{
    position:absolute;
    left:40px;
    top:40px;
    font-size:90px;
    color:#fff;
}

.landing-text{
    padding:60px;
    color:#fff;
}

.landing-text h4{
    font-size:36px;
}

/* MEDICAL */

.medical-preview{
    background:#eef6ff;
}

.medical-body{
    display:flex;
    align-items:center;
    padding:30px;
}

.medical-text{
    flex:1;
    color:#1e3a8a;
}

.medical-text h4{
    font-size:34px;
}

.doctor{
    font-size:120px;
    color:#2563eb;
}

/* REAL ESTATE */

.estate-body{
    display:flex;
    padding:25px;
}

.estate-text{
    flex:1;
    color:#111827;
}

.house{
    width:220px;
    height:130px;
    background:
    linear-gradient(
        135deg,
        #bfdbfe,
        #60a5fa
    );
    border-radius:15px;
}

/* BUSINESS */

.business-preview{
    background:
    linear-gradient(
        135deg,
        #111827,
        #1e293b
    );
}

.business-overlay{
    display:flex;
    align-items:center;
    height:100%;
    padding:40px;
}

.business-text{
    flex:1;
    color:#fff;
}

.business-text h4{
    font-size:34px;
}

.business-avatar{
    font-size:100px;
    color:#fff;
}

/* MOBILE */

@media(max-width:900px){

    .portfolio-grid{
        grid-template-columns:1fr;
    }

    .portfolio-content h3{
        font-size:26px;
    }

    .portfolio-icon{
        width:60px;
        height:60px;
        font-size:24px;
    }
}