/* ==========================================
   MOBILE CENTER WEBSITE
   MAIN STYLE SHEET
   PART 1
========================================== */


/* ==========================================
   GLOBAL SETTINGS
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family:'Poppins',sans-serif;

    color:#1f2937;

    background:#f3f4f6;

    overflow-x:hidden;

}


img{

    max-width:100%;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


button,
input,
textarea,
select{

    font-family:inherit;

}


/* ==========================================
   CUSTOM VARIABLES
========================================== */

:root{

    --primary:#2563eb;

    --primary-dark:#1d4ed8;

    --secondary:#16a34a;

    --danger:#dc2626;

    --dark:#111827;

    --gray:#6b7280;

    --light:#f9fafb;

    --white:#ffffff;

    --shadow:
    0 10px 30px rgba(0,0,0,0.08);

    --radius:18px;

}


/* ==========================================
   CONTAINERS
========================================== */

.container{

    width:90%;

    max-width:1280px;

    margin:auto;

}


.section{

    padding:100px 0;

}


/* ==========================================
   HEADER
========================================== */


header{

    transition:0.3s ease;

}


header.scrolled{

    background:white;

    box-shadow:
    0 5px 25px rgba(0,0,0,0.12);

}


/* LOGO */

#siteLogo{

    transition:0.3s;

}


#siteLogo:hover{

    transform:scale(1.05);

}



#companyName{

    letter-spacing:-0.5px;

}



/* NAVIGATION */


nav a{

    position:relative;

    transition:0.3s;

}


nav a:hover{

    color:var(--primary);

}


nav a::after{

    content:"";

    position:absolute;

    width:0;

    height:3px;

    background:var(--primary);

    left:0;

    bottom:-8px;

    border-radius:10px;

    transition:0.3s;

}


nav a:hover::after{

    width:100%;

}



/* ADMIN BUTTON */


nav a[href="admin/login.html"]{

    background:var(--primary);

    color:white;

}


nav a[href="admin/login.html"]:hover{

    background:var(--primary-dark);

}



/* MOBILE MENU */


#mobileMenu{

    animation:
    slideDown .3s ease;

}


@keyframes slideDown{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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


#home{

    min-height:100vh;

    display:flex;

    align-items:center;

}


#home h2{

    letter-spacing:-1px;

}


#home p{

    max-width:600px;

}


#heroImage{

    transition:0.5s;

}


#heroImage:hover{

    transform:
    translateY(-10px);

}



/* HERO BUTTONS */


#home a{

    transition:0.3s;

}


#home a:hover{

    transform:
    translateY(-4px);

}



/* ==========================================
   SECTION TITLES
========================================== */


section h2{

    letter-spacing:-1px;

}


section p{

    line-height:1.8;

}


/* ==========================================
   FEATURE CARDS
========================================== */


.bg-gray-50{

    transition:0.3s ease;

}


.bg-gray-50:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 20px 40px rgba(0,0,0,0.1);

}



/* ICON ANIMATION */


.fa-mobile-alt,
.fa-tools,
.fa-sync,
.fa-shield-alt{

    transition:0.3s;

}


.bg-gray-50:hover i{

    transform:
    rotate(8deg)
    scale(1.1);

}



/* ==========================================
   SALES SECTION
========================================== */


#sellPhoneImage,
#repairImage,
#usedPhoneImage{

    height:450px;

    object-fit:cover;

    border-radius:30px;

    transition:0.5s;

}


#sellPhoneImage:hover,
#repairImage:hover,
#usedPhoneImage:hover{

    transform:
    scale(1.03);

}



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


button,
.btn{

    cursor:pointer;

    transition:0.3s ease;

}


button:hover,
.btn:hover{

    transform:
    translateY(-3px);

}



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


#phoneContainer{

    align-items:stretch;

}


.phone-card{

    background:white;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:0.3s;

}


.phone-card:hover{

    transform:
    translateY(-10px);

}



/* PHONE IMAGE */


.phone-card img{

    height:250px;

    width:100%;

    object-fit:cover;

}



/* PHONE INFORMATION */


.phone-card h3{

    font-size:22px;

    font-weight:700;

}


.phone-card .price{

    color:var(--primary);

    font-size:24px;

    font-weight:700;

}



/* ==========================================
   MOBILE CENTER WEBSITE
   MAIN STYLE SHEET
   PART 2
========================================== */


/* ==========================================
   PHONE CARD BUTTONS
========================================== */


.phone-card button{

    width:100%;

    padding:14px;

    border-radius:12px;

    border:none;

    background:var(--primary);

    color:white;

    font-weight:600;

}


.phone-card button:hover{

    background:var(--primary-dark);

}



/* BUY BUTTON */

.buy-button{

    background:var(--secondary)!important;

}


.buy-button:hover{

    background:#15803d!important;

}



/* ==========================================
   SEARCH AND FILTER AREA
========================================== */


#searchPhone{

    transition:0.3s;

}


#searchPhone:focus{

    border-color:var(--primary);

    box-shadow:
    0 0 0 4px rgba(37,99,235,0.15);

}


select{

    cursor:pointer;

    transition:0.3s;

}


select:hover{

    border-color:var(--primary);

}



/* ==========================================
   PHONE DETAILS MODAL
========================================== */


#phoneModal{

    backdrop-filter:blur(5px);

}


#phoneModal.active{

    display:flex;

}


#modalContent{

    padding:40px;

}



#closeModal{

    color:#374151;

    transition:0.3s;

}


#closeModal:hover{

    color:var(--danger);

    transform:rotate(90deg);

}



/* MODAL IMAGE */

#modalContent img{

    border-radius:20px;

    max-height:450px;

    width:100%;

    object-fit:cover;

}



/* MODAL SPECIFICATIONS */


.spec-box{

    background:#f9fafb;

    padding:15px;

    border-radius:12px;

}



/* ==========================================
   ORDER SECTION
========================================== */


#orderForm{

    border-radius:30px;

}



#orderForm input,
#orderForm textarea,
#orderForm select{


    width:100%;

    border:1px solid #d1d5db;

    transition:0.3s;

}



#orderForm input:focus,
#orderForm textarea:focus,
#orderForm select:focus{


    border-color:var(--primary);

    outline:none;

    box-shadow:
    0 0 0 4px rgba(37,99,235,0.12);

}



#orderForm input[type="file"]{

    background:#f9fafb;

    cursor:pointer;

}



/* SUBMIT BUTTON */


#orderForm button{

    background:var(--primary);

    color:white;

    border:none;

}


#orderForm button:hover{

    background:var(--primary-dark);

}



/* ==========================================
   CONTACT SECTION
========================================== */


#contact i{

    transition:0.3s;

}


#contact .flex:hover i{

    transform:
    scale(1.2);

}



iframe{

    border:0;

}



/* SOCIAL ICONS */


#contact a{

    transition:0.3s;

}


#contact a:hover{

    transform:
    translateY(-5px);

}



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


footer{

    background:#111827;

}


footer a{

    color:#d1d5db;

    transition:0.3s;

}


footer a:hover{

    color:white;

    padding-left:5px;

}


#footerLogo{

    transition:0.3s;

}


#footerLogo:hover{

    transform:
    rotate(5deg)
    scale(1.1);

}



/* ==========================================
   LOADING ANIMATION
========================================== */


.loading{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}


.loading span{

    width:12px;

    height:12px;

    background:var(--primary);

    border-radius:50%;

    animation:
    bounce 1s infinite;

}


.loading span:nth-child(2){

    animation-delay:.2s;

}


.loading span:nth-child(3){

    animation-delay:.4s;

}



@keyframes bounce{


    0%,
    100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-12px);

    }


}



/* ==========================================
   SUCCESS AND ERROR BOXES
========================================== */


.success-message{

    background:#dcfce7;

    color:#166534;

    padding:20px;

    border-radius:15px;

    border-left:5px solid #16a34a;

}



.error-message{

    background:#fee2e2;

    color:#991b1b;

    padding:20px;

    border-radius:15px;

    border-left:5px solid #dc2626;

}



/* ==========================================
   BADGES
========================================== */


.badge{

    display:inline-block;

    padding:6px 15px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

}


.badge-new{

    background:#dcfce7;

    color:#166534;

}


.badge-used{

    background:#fef3c7;

    color:#92400e;

}



.badge-sale{

    background:#dbeafe;

    color:#1e40af;

}



/* ==========================================
   ADMIN LINK
========================================== */


.admin-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

}



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


@media(max-width:1024px){


    #home h2{

        font-size:42px;

    }


    #sellPhoneImage,
    #repairImage,
    #usedPhoneImage{

        height:350px;

    }


}



@media(max-width:768px){


    .section{

        padding:70px 0;

    }


    #home{

        text-align:center;

    }


    #home h2{

        font-size:34px;

    }


    #home p{

        font-size:16px;

    }


    #heroImage{

        margin-top:40px;

    }


    #sellPhoneImage,
    #repairImage,
    #usedPhoneImage{

        height:300px;

    }



    #modalContent{

        padding:20px;

    }


}



@media(max-width:480px){


    #companyName{

        font-size:18px;

    }


    #siteLogo{

        width:45px;

        height:45px;

    }


    #home h2{

        font-size:30px;

    }


    .phone-card img{

        height:220px;

    }


}



/* ==========================================
   SCROLL BAR
========================================== */


::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#f1f1f1;

}


::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}



/* ==========================================
   ANIMATION UTILITIES
========================================== */


.fade-in{

    animation:
    fadeIn 1s ease;

}


@keyframes fadeIn{


    from{

        opacity:0;

        transform:
        translateY(20px);

    }


    to{

        opacity:1;

        transform:
        translateY(0);

    }


}



/* END OF STYLE SHEET */