/* ===================================
   OPTEX CASE STUDY
   Mr.aiwithmahdi
   Premium Security Style
=================================== */


.optex-page{

    background:
    radial-gradient(circle at 20% 10%,rgba(0,102,255,.25),transparent 35%),
    radial-gradient(circle at 80% 70%,rgba(220,38,38,.18),transparent 35%),
    #020617;
    
    color:white;
    
    }
    
    
    
    /* ================= NAVBAR ================= */
    
    
    .optex-nav{
    
    border:1px solid rgba(255,255,255,.12);
    
    }
    
    
    
    .optex-nav .logo span{
    
    color:#ef4444;
    
    }
    
    
    
    
    
    /* ================= HERO ================= */
    
    
    
    .optex-hero{
    
    
    min-height:90vh;
    
    padding:100px 8%;
    
    
    display:flex;
    
    align-items:center;
    
    justify-content:space-between;
    
    
    gap:70px;
    
    
    position:relative;
    
    
    overflow:hidden;
    
    
    }
    
    
    
    
    .optex-glow{
    
    
    position:absolute;
    
    
    width:600px;
    
    
    height:600px;
    
    
    right:-200px;
    
    
    top:100px;
    
    
    background:#2563eb;
    
    
    filter:blur(180px);
    
    
    opacity:.25;
    
    
    }
    
    
    
    
    
    .optex-hero-content{
    
    
    max-width:650px;
    
    
    z-index:2;
    
    
    }
    
    
    
    
    .project-tag{
    
    
    padding:10px 25px;
    
    
    border-radius:50px;
    
    
    border:1px solid rgba(96,165,250,.4);
    
    
    color:#60a5fa;
    
    
    display:inline-block;
    
    
    font-size:13px;
    
    
    letter-spacing:2px;
    
    
    }
    
    
    
    
    .optex-hero h1{
    
    
    font-size:80px;
    
    
    line-height:1.1;
    
    
    font-weight:900;
    
    
    margin:30px 0;
    
    
    background:linear-gradient(90deg,#fff,#60a5fa);
    
    
    -webkit-background-clip:text;
    
    
    color:transparent;
    
    
    }
    
    
    
    
    .optex-hero h2{
    
    
    font-size:32px;
    
    
    color:#ef4444;
    
    
    }
    
    
    
    .optex-hero p{
    
    
    margin-top:25px;
    
    
    font-size:18px;
    
    
    line-height:2.3;
    
    
    color:#cbd5e1;
    
    
    }
    
    
    
    
    .designer-credit{
    
    
    margin-top:35px;
    
    
    color:#94a3b8;
    
    
    font-size:18px;
    
    
    }
    
    
    
    .designer-credit strong{
    
    
    color:white;
    
    
    font-size:25px;
    
    
    }
    
    
    
    
    
    
    
    .hero-project-image{
    
    
    width:480px;
    
    
    height:650px;
    
    
    border-radius:35px;
    
    
    overflow:hidden;
    
    
    border:1px solid rgba(255,255,255,.15);
    
    
    box-shadow:0 0 80px rgba(37,99,235,.35);
    
    
    }
    
    
    
    .hero-project-image img{
    
    
    width:100%;
    
    
    height:100%;
    
    
    object-fit:contain;
    
    
    background:#020617;
    
    
    padding:15px;
    
    
    }
    
    
    
    
    
    
    
    
    
    /* ================= OVERVIEW ================= */
    
    
    
    .overview-grid{
    
    
    display:grid;
    
    
    grid-template-columns:repeat(4,1fr);
    
    
    gap:20px;
    
    
    }
    
    
    
    .overview-card{
    
    
    padding:30px;
    
    
    border-radius:30px;
    
    
    background:rgba(255,255,255,.06);
    
    
    border:1px solid rgba(255,255,255,.12);
    
    
    transition:.4s;
    
    
    }
    
    
    
    .overview-card:hover{
    
    
    transform:translateY(-10px);
    
    
    border-color:#60a5fa;
    
    
    }
    
    
    
    .overview-card span{
    
    
    color:#60a5fa;
    
    
    font-size:13px;
    
    
    }
    
    
    
    .overview-card h3{
    
    
    margin-top:15px;
    
    
    line-height:1.8;
    
    
    }
    
    
    
    
    
    
    
    /* ================= CHALLENGE ================= */
    
    
    
    .challenge-box{
    
    
    max-width:900px;
    
    
    margin:auto;
    
    
    padding:60px;
    
    
    text-align:center;
    
    
    border-radius:40px;
    
    
    background:rgba(255,255,255,.06);
    
    
    border:1px solid rgba(255,255,255,.12);
    
    
    }
    
    
    
    .challenge-box span{
    
    
    color:#ef4444;
    
    
    letter-spacing:3px;
    
    
    }
    
    
    
    .challenge-box h2{
    
    
    font-size:45px;
    
    
    margin:25px 0;
    
    
    }
    
    
    
    .challenge-box p{
    
    
    color:#cbd5e1;
    
    
    line-height:2.3;
    
    
    font-size:18px;
    
    
    }
    /* ===================================
   CREATIVE DIRECTION
=================================== */


.direction-grid{

    display:grid;
    
    grid-template-columns:repeat(3,1fr);
    
    gap:25px;
    
    }
    
    
    
    .direction-card{
    
    
    padding:35px;
    
    
    border-radius:30px;
    
    
    background:rgba(255,255,255,.06);
    
    
    border:1px solid rgba(255,255,255,.12);
    
    
    transition:.4s;
    
    
    }
    
    
    
    .direction-card:hover{
    
    
    transform:translateY(-12px);
    
    
    border-color:#ef4444;
    
    
    box-shadow:0 20px 50px rgba(239,68,68,.2);
    
    
    }
    
    
    
    
    .direction-number{
    
    
    font-size:45px;
    
    
    font-weight:900;
    
    
    color:#ef4444;
    
    
    }
    
    
    
    .direction-card h3{
    
    
    margin:20px 0;
    
    
    font-size:25px;
    
    
    }
    
    
    
    .direction-card p{
    
    
    color:#94a3b8;
    
    
    line-height:2;
    
    
    }
    
    
    
    
    
    
    
    
    
    /* ===================================
       OPTEX GALLERY
       STORY POSTER STYLE
    =================================== */
    
    
    .optex-gallery{
    
    
    padding-top:80px;
    
    
    }
    
    
    
    
    .gallery-grid{
    
    
    display:grid;
    
    
    grid-template-columns:repeat(3,1fr);
    
    
    gap:22px;
    
    
    align-items:start;
    
    
    }
    
    
    
    
    .gallery-item{
    
    
    width:100%;
    
    
    aspect-ratio:9 / 16;
    
    
    border-radius:25px;
    
    
    overflow:hidden;
    
    
    background:#020617;
    
    
    border:1px solid rgba(255,255,255,.15);
    
    
    position:relative;
    
    
    padding:8px;
    
    
    }
    
    
    
    
    
    .gallery-item.large{
    
    
    grid-row:auto;
    
    
    height:auto;
    
    
    }
    
    
    
    
    .gallery-item img{
    
    
    width:100%;
    
    
    height:100%;
    
    
    object-fit:contain;
    
    
    background:#020617;
    
    
    border-radius:20px;
    
    
    transition:.5s;
    
    
    }
    
    
    
    
    
    .gallery-item:hover{
    
    
    border-color:#60a5fa;
    
    
    box-shadow:0 20px 50px rgba(37,99,235,.25);
    
    
    }
    
    
    
    
    .gallery-item:hover img{
    
    
    transform:scale(1.04);
    
    
    }
    
    
    
    
    
    
    
    
    
    /* ===================================
       FINAL RESULT
    =================================== */
    
    
    .result-box{
    
    
    max-width:1000px;
    
    
    margin:auto;
    
    
    padding:70px;
    
    
    text-align:center;
    
    
    border-radius:45px;
    
    
    background:
    
    linear-gradient(
    
    135deg,
    
    rgba(0,102,255,.18),
    
    rgba(239,68,68,.08)
    
    );
    
    
    border:1px solid rgba(255,255,255,.15);
    
    
    }
    
    
    
    
    
    .result-box span{
    
    
    color:#60a5fa;
    
    
    letter-spacing:4px;
    
    
    }
    
    
    
    .result-box h2{
    
    
    font-size:45px;
    
    
    margin:25px 0;
    
    
    }
    
    
    
    .result-box p{
    
    
    font-size:18px;
    
    
    line-height:2.4;
    
    
    color:#cbd5e1;
    
    
    }
    
    
    
    
    
    
    .result-points{
    
    
    display:flex;
    
    
    justify-content:center;
    
    
    gap:25px;
    
    
    margin-top:40px;
    
    
    }
    
    
    
    
    .result-points div{
    
    
    padding:25px;
    
    
    min-width:170px;
    
    
    border-radius:25px;
    
    
    background:rgba(255,255,255,.07);
    
    
    }
    
    
    
    .result-points strong{
    
    
    display:block;
    
    
    font-size:35px;
    
    
    color:#ef4444;
    
    
    }
    
    
    
    
    
    .result-points span{
    
    
    color:white;
    
    
    }
    
    
    
    
    
    
    
    
    
    /* ===================================
       CTA
    =================================== */
    
    
    
    .project-cta{
    
    
    text-align:center;
    
    
    }
    
    
    
    
    .cta-box{
    
    
    padding:70px;
    
    
    border-radius:45px;
    
    
    background:rgba(255,255,255,.06);
    
    
    border:1px solid rgba(255,255,255,.12);
    
    
    }
    
    
    
    .cta-box h2{
    
    
    font-size:45px;
    
    
    }
    
    
    
    .cta-box p{
    
    
    margin:25px 0;
    
    
    color:#94a3b8;
    
    
    }
    
    
    
    
    
    
    
    
    
    /* ===================================
       FOOTER
    =================================== */
    
    
    .optex-footer{
    
    
    padding:60px;
    
    
    text-align:center;
    
    
    border-top:1px solid rgba(255,255,255,.1);
    
    
    }
    
    
    
    .optex-footer .footer-logo{
    
    
    font-size:35px;
    
    
    font-weight:900;
    
    
    color:#60a5fa;
    
    
    }
    
    
    
    
    .optex-footer p{
    
    
    color:#94a3b8;
    
    
    line-height:2;
    
    
    }
    
    
    
    
    
    
    
    
    
    /* ===================================
       RESPONSIVE
    =================================== */
    
    
    @media(max-width:1000px){
    
    
    
    .optex-hero{
    
    
    flex-direction:column;
    
    
    text-align:center;
    
    
    }
    
    
    
    
    .optex-hero h1{
    
    
    font-size:50px;
    
    
    }
    
    
    
    
    .hero-project-image{
    
    
    width:100%;
    
    
    height:500px;
    
    
    }
    
    
    
    
    .overview-grid{
    
    
    grid-template-columns:1fr;
    
    
    }
    
    
    
    
    .direction-grid{
    
    
    grid-template-columns:1fr;
    
    
    }
    
    
    
    
    .gallery-grid{
    
    
    grid-template-columns:repeat(2,1fr);
    
    
    }
    
    
    
    
    .result-points{
    
    
    flex-direction:column;
    
    
    }
    
    
    
    
    .cta-box h2{
    
    
    font-size:32px;
    
    
    }
    
    
    
    }
    
    
    
    @media(max-width:600px){
    
    
    
    .gallery-grid{
    
    
    grid-template-columns:1fr;
    
    
    }
    
    
    
    .optex-hero h1{
    
    
    font-size:42px;
    
    
    }
    
    
    
    }
    /* FINAL GALLERY FIX */

.optex-gallery .gallery-item{

    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    height:auto;
    
    min-height:420px;
    
    }
    
    
    
    .optex-gallery .gallery-item img{
    
    display:block !important;
    
    visibility:visible !important;
    
    opacity:1 !important;
    
    width:100%;
    
    height:auto;
    
    max-height:100%;
    
    object-fit:contain;
    
    }