/* Import Fonts */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');



/* General Reset */

* {
    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'PT Sans', sans-serif;

}



body {

    overflow-x: hidden;

    position: relative;

}



/* Sticky Header */

header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    padding: 20px 50px;

    z-index: 10;

    transition: background-color 0.3s, padding 0.3s;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: transparent;

}



header.scrolled {

    padding: 5px 20px;

    background-color: var(--header-color);

    

}





/* Sticky Header on post page*/

.header-post {

    position: sticky;

    top: 0;

    left: 0;

    width: 100%;

    padding: 10px 50px;

    z-index: 10;

    transition: background-color 0.3s, padding 0.3s;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: var(--header-post-color);

}







/* Logo Styles */

.logo img {

    max-width: 190px;

    height: auto;

    transition: max-width 0.3s, padding 0.3s;

}



header.scrolled .logo img {

    max-width: 130px;

    padding: 5px;

}



/* Navigation */

header nav ul {

    list-style: none;

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}



header nav ul li a {

    color: white;

    text-decoration: none;

    font-family: 'Titillium Web', sans-serif;

    font-weight: 600;

    font-size: 17px;

    transition: color 0.3s;

    white-space: nowrap;

}



header nav ul li a:hover {

    color: #353535;

}



/* Background Slider */

.background-slider {

    position: relative;

    width: 100%;

    height: 100vh;

    overflow: hidden;

}



.slide {

    position: absolute;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center top;

    opacity: 0;

    transition: opacity 1s ease;

}



.slide.active {

    opacity: 1;

}



/* Section Separator */

.section-separator {

    background-color: black;

    color: white;

    text-align: center;

    padding: 20px;

    position: relative;

    z-index: 1;

    margin-top: 0;

    font-family: 'Titillium Web', sans-serif;

    font-size: 36px;

}



/* Arrow Down */

.arrow-down {

    width: 0;

    height: 0;

    border-left: 20px solid transparent;

    border-right: 20px solid transparent;

    border-top: 20px solid white;

    margin: 10px auto 0;

}





/* Hide mobile slider on desktop */

.mobile-slider-placeholder {

    display: none;

}



/* Mobile Styles */

@media (max-width: 768px) {

    header {

        padding: 10px 20px;

        flex-direction: column;

    }

    .logo img {

        max-width: 130px;

    }

    header nav ul {

        flex-wrap: wrap;

        gap: 10px;

        justify-content: center;

    }

    header nav ul li a {

        font-size: 14px;

    }

    .background-slider {

        display: none;

    }

    .mobile-slider-placeholder {

        display: block;

        width: 100%;

        height: auto;

    }

}



/* Laptop Section */

.laptops-container {

    padding: 40px 70px;

    background-color: #fdfdfd;

}



.laptops-grid {

    display: grid;

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

    gap: 70px;

    position: relative;

    text-align: center;

}



/* Laptop Card */

.laptop-card {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

    position: relative;

    overflow: hidden;

    transform: none;

    box-shadow: none;

    padding: 15px 10px;

    text-decoration: none;

    will-change: transform;

    background-color: #fff;

    z-index: 1;

    transition: transform 0.25s ease, box-shadow 0.25s ease;

    height: 100%; /* ensures equal height for cards */

}





.laptop-card:hover {

    transform: scale(1.03);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);

    z-index: 5;

}



/* Laptop Image */

.laptop-img {

    width: 100%;

    max-width: 300px;

    height: auto;

    display: none;

    transition: opacity 0.3s ease-in-out;

    border-radius: 5%;

    object-fit: cover;

    margin-bottom: 10px;

}



.laptop-image-container {

    position: relative;

    width: 100%;

    overflow: hidden;

}



.laptop-img.active {

    display: block;

}



/* Navigation Arrows */

.nav-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(0, 0, 0, 0.5);

    color: #fff;

    font-size: 24px;

    padding: 10px;

    cursor: pointer;

    display: none;

    z-index: 10;

}



.left-arrow {

    left: 10px;

}



.right-arrow {

    right: 10px;

}



/* Show arrows on hover */

.laptop-image-container:hover .nav-arrow {

    display: block;

}



/* Laptop Name */

.laptop-name {

    font-size: 1.0em;

    margin: 10px 0 15px;

    color: #111111;

    font-family: 'Titillium Web', sans-serif;

    overflow: hidden;

    transition: max-height 0.4s ease;

}





.laptop-price {

    font-size: 1.2em;

    font-weight: bold;

    color: #ffffff;

    margin-top: auto;

    margin-bottom: 10px;

    font-family: 'Titillium Web', sans-serif;

}



.buy-btn {

    

    display: block;

    padding: 8px 14px;

    background: var(--button-color);

    color: #fff;

    border-radius: 4px;

    font-size: 14px;

    font-weight: bold;

    text-align: center;

    cursor: pointer;

}



/* Responsive Grid */

@media (max-width: 1024px) {

    .laptops-grid {

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

    }

}



@media (max-width: 768px) {

    .laptops-grid {

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

    }



    .laptops-container {

    padding: 40px 5px;

}



.laptops-grid {

    gap: 8px;

}

}



@media (max-width: 480px) {

    .laptops-grid {

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

    }



.laptops-container {

    padding: 40px 5px;

}



.laptops-grid {

    gap: 8px;

}







    body,

    .laptops-container {

        background-color: #f9f9f9;

    }

}



/* Contact Section */

.contact-container {

    display: flex;

    flex-wrap: wrap;

    gap: 50px;

    background-color: #f8f8f8;

    padding: 20px;

}



.contact-form-wrapper {

    flex: 1;

    min-width: 300px;

    max-width: 50%;

    padding: 20px;

    color: #333;

    background-color: #f9f9f9;

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}



.contact-form-wrapper h2,

.contact-form-wrapper p,

.contact-form-wrapper label {

    color: #333;

    font-family: 'Titillium Web', sans-serif;

}



.contact-form-wrapper label {

    font-weight: bold;

    margin-top: 20px;

    display: block;

}



.contact-form-wrapper input,

.contact-form-wrapper textarea {

    width: 100%;

    padding: 10px;

    border: 1px solid #8bc34a;

    color: #333;

    border-radius: 5px;

    box-sizing: border-box;

    font-family: 'Titillium Web', sans-serif;

}



.contact-form-wrapper textarea {

    resize: vertical;

    min-height: 100px;

}



.contact-form-wrapper button {

    background-color: #8bc34a;

    color: white;

    padding: 10px 20px;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    font-size: 16px;

    transition: background-color 0.3s;

    font-family: 'Titillium Web', sans-serif;

}



.contact-form-wrapper button:hover {

    background-color: #7cb342;

}



.map-wrapper {

    flex: 1;

    min-width: 300px;

    max-width: 50%;

    height: auto;

    border-radius: 8px;

    overflow: hidden;

}



@media (max-width: 768px) {

    .contact-container {

        flex-direction: column;

    }

    .contact-form-wrapper,

    .map-wrapper {

        max-width: 100%;

    }

}



/* Popup Modal */

.popup-modal {

    display: none;

    position: fixed;

    z-index: 1000;

    bottom: 80px;

    left: 50%;

    transform: translateX(-50%);

    justify-content: center;

    align-items: center;

    padding: 20px;

}



.popup-content {

    color: #ffffff;

    padding: 20px;
    background-color: var(--message-color);

    border-radius: 5px;

    text-align: center;

    max-width: 400px;

    margin: auto;

}



.popup-content p {

    color: #ffffff;

}



.close-btn {

    position: absolute;

    top: 0px;

    right: 17px;

    font-size: 40px;

    color: #ffffff;

    cursor: pointer;

}



.close-btn:hover {

    color: white;

}



/* Footer */

.footer {

    background-color: #333;

    color: #ccc;

    padding: 15px 20px;

    position: relative;

    bottom: 0;

    width: 100%;

    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);

}



.footer-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1200px;

    margin: 0 auto;

}



.footer p {

    margin: 0;

    font-size: 14px;

}



/* Social Icons UP */

.social-icons-up {

    display: flex;

    margin-top: 10px;

    gap: 10px;

}



.social-icon-up {

    width: 64px;

    height: 64px;

    object-fit: contain;

    transition: transform 0.2s;

}



.social-icon-up:hover {

    transform: scale(1.4);

}


/* Social Icons Down */

.social-icons-down {

    display: flex;

    margin-top: 50px;

    gap: 10px;
    justify-content: center;

}



.social-icon-down {

    width: 48px;

    height: 48px;

    object-fit: contain;

    transition: transform 0.2s;

}



.social-icon-down:hover {

    transform: scale(1.4);

}



@media (max-width: 768px) {

    .footer-content {

        flex-direction: column;

        text-align: center;

    }

    .social-icons-up {

        margin-top: 10px;

    }
    
    .social-icons-down {

        margin-top: 40px;

    }

}



/* Back to Top Button */

.back-to-top-btn {

    position: fixed;

    bottom: 20px;

    right: 20px;

    width: 50px;

    height: 50px;

    background-color: #333;

    color: white;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;

    z-index: 1000;

    font-size: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.back-to-top-btn:hover {

    background-color: #555;

    transform: scale(1.1);

}



.back-to-top-btn.show {

    opacity: 1;

    visibility: visible;

}



/* Pagination */

.pagination {

    text-align: center;

    margin: 20px 0;

}



.pagination a {

    display: inline-block;

    padding: 8px 12px;

    margin: 0 5px;

    background: #f4f4f4;

    border: 1px solid #ccc;

    text-decoration: none;

    color: #333;

    border-radius: 4px;

}



.pagination a.active {

    background: #000;

    color: #fff;

    font-weight: bold;

}



.pagination a:hover {

    background: #333;

    color: #fff;

}



/* Ribbon */

.ribbonfirst {

    position: absolute;

    top: 15px;

    left: -45px;

    width: 150px;

    text-align: center;

    background: rgb(181, 15, 15);

    color: white;

    font-weight: bold;

    transform: rotate(-45deg);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);

    font-size: 18px;

    padding: 6px 0;

    z-index: 1;

}





.features-table {

    display: grid;

    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */

    width: 100%;

    border: 1px solid  #fff;

    border-collapse: collapse;

    background-color: var(--button-color);

}



.feature-item {

    border: 1px solid  #fff;

    color:  #fff;

    text-align: center;

    padding: 20px;

    box-sizing: border-box;

}



.feature-item h2 {

    font-size: 24px;

    margin-bottom: 10px;

}



.feature-item p {

    font-size: 16px;

    margin: 0;

}



/* Responsive: 2x2 grid on small screens */

@media (max-width: 768px) {

    .features-table {

        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */

    }

}

.out-of-stock { 
    display:inline-block; 
    padding:6px 10px; 
    border-radius:6px; 
    background:#ffecec; 
    color:#b40000; 
    font-weight:700; 
    font-size:16px; 
    }