/*==================================================
    NEW LAUNCH PROJECTS
==================================================*/

.new-launch-section{

    position:relative;

    padding:80px 0;

    background:#f8f9fc;

    overflow:hidden;

}

/*==============================
    SECTION TITLE
==============================*/

.new-launch-section .section-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:45px;

}

.new-launch-section .section-title h2{

    font-size:36px;

    font-weight:700;

    color:#222;

    margin-bottom:8px;

}

.new-launch-section .section-title p{

    font-size:16px;

    color:#777;

}

/*==============================
    GRID
==============================*/

.launch-grid{

    display:grid;

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

    gap:30px;

}

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

.launch-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.launch-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}

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

.launch-image{

    position:relative;

    height:250px;

    overflow:hidden;

}

.launch-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.launch-card:hover img{

    transform:scale(1.08);

}

/*==============================
    TAG
==============================*/

.launch-tag{

    position:absolute;

    left:18px;

    top:18px;

    background:#5B3DF5;

    color:#fff;

    padding:8px 16px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

.launch-tag.hot{

    background:#ff4d4d;

}

.launch-tag.premium{

    background:#ff9800;

}

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

.launch-content{

    padding:25px;

}

.launch-content h3{

    font-size:24px;

    font-weight:600;

    margin-bottom:8px;

    color:#222;

}

.launch-content .developer{

    display:block;

    font-size:14px;

    color:#666;

    margin-bottom:15px;

}

.launch-content p{

    color:#777;

    font-size:15px;

    margin-bottom:15px;

}

/*==============================
    LOCATION
==============================*/

.location{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#666;

    margin-bottom:22px;

}

.location i{

    color:#5B3DF5;

}

/*==============================
    FOOTER
==============================*/

.launch-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.price{

    font-size:14px;

    color:#777;

}

.price strong{

    display:block;

    font-size:24px;

    color:#111;

    margin-top:4px;

}

/*==============================
    BUTTON
==============================*/

.details-btn{

    background:#5B3DF5;

    color:#fff;

    padding:12px 22px;

    border-radius:10px;

    font-size:14px;

    font-weight:500;

    transition:.3s;

}

.details-btn:hover{

    background:#4726ef;

}

/*==============================
    RESPONSIVE
==============================*/

@media(max-width:1200px){

.launch-grid{

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

}

}

@media(max-width:992px){

.launch-grid{

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

}

.new-launch-section{

padding:70px 0;

}

}

@media(max-width:768px){

.launch-grid{

grid-template-columns:1fr;

}

.launch-image{

height:280px;

}

.new-launch-section .section-title{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.new-launch-section .section-title h2{

font-size:30px;

}

}

@media(max-width:576px){

.new-launch-section{

padding:50px 0;

}

.launch-content{

padding:18px;

}

.launch-content h3{

font-size:22px;

}

.price strong{

font-size:20px;

}

.details-btn{

width:100%;

text-align:center;

}

.launch-footer{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

}