/*=========================================================
  Chrishart Cybersec Autoshop
  Responsive Stylesheet
=========================================================*/


/*=========================================================
  Large Desktop (1400px)
=========================================================*/

@media (max-width:1400px){

.container{

    width:min(96%,1280px);

}

.hero-content h1{

    font-size:3.2rem;

}

.gallery-main img{

    height:520px;

}

}


/*=========================================================
  Laptop (1200px)
=========================================================*/

@media (max-width:1200px){

.hero{

    min-height:620px;

}

.hero-content h1{

    font-size:2.9rem;

}

.vehicle-top{

    grid-template-columns:1fr;

}

.vehicle-summary{

    position:static;

}

.info-grid{

    grid-template-columns:1fr;

}

.about-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:1fr;

}

.footer-grid{

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

}

.search-grid{

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

}

.form-grid{

    grid-template-columns:1fr;

}

.stats-grid{

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

}

}


/*=========================================================
  Tablet Landscape (992px)
=========================================================*/

@media (max-width:992px){


.header-actions{

    display:none;

}

.hamburger{

    display:flex;

}

.hero{

    min-height:560px;

}

.hero-content{

    text-align:center;

    margin:auto;

}

.hero-content h1{

    font-size:2.6rem;

}

.hero-buttons{

    justify-content:center;

}

.search-grid{

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

}

.vehicle-grid{

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

}

.company-values{

    grid-template-columns:1fr;

}

.admin-sidebar{

    width:230px;

}

.admin-content{

    margin-left:230px;

    padding:25px;

}

.gallery-main img{

    height:450px;

}

}
/*=========================================================
  Tablet Portrait (768px)
=========================================================*/

@media (max-width:768px){

section{
    padding:50px 0;
}

.container{
    width:94%;
}

.hero{
    min-height:500px;
}

.hero-content h1{
    font-size:2.2rem;
}

.hero-content p{
    font-size:1rem;
}

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

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

.vehicle-specs{
    grid-template-columns:1fr;
}

.vehicle-highlights{
    grid-template-columns:1fr;
}

.feature-list{
    grid-template-columns:1fr;
}

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

.pagination-wrapper{
    flex-direction:column;
    text-align:center;
}

.contact-buttons{
    width:100%;
}

.gallery-main img{
    height:380px;
}

.gallery-thumbnails{
    gap:8px;
}

.gallery-thumb{
    width:85px;
    height:65px;
}

.admin-wrapper{
    display:block;
}

.admin-sidebar{
    position:fixed;
    left:-100%;
    width:280px;
    transition:.3s;
    z-index:2000;
}

.admin-sidebar.active{
    left:0;
}

.admin-content{
    margin-left:0;
    padding:20px;
}

.admin-table{
    min-width:900px;
}

.table-responsive{
    overflow-x:auto;
}

.form-actions{
    flex-direction:column;
}

.form-actions .btn{
    width:100%;
}

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

}


/*=========================================================
  Mobile (576px)
=========================================================*/

@media (max-width:576px){

html{
    font-size:15px;
}

.hero{
    min-height:460px;
}

.hero-content h1{
    font-size:1.9rem;
}

.hero-buttons{
    flex-direction:column;
}

.hero-buttons .btn{
    width:100%;
}

.page-title h1{
    font-size:2rem;
}

.vehicle-summary{
    padding:22px;
}

.vehicle-summary h1{
    font-size:1.7rem;
}

.vehicle-price{
    font-size:2rem;
}

.info-card{
    padding:22px;
}

.spec-table td{
    display:block;
    width:100%;
    padding:10px 0;
}

.spec-table tr{
    display:block;
    padding:12px 0;
}

.filter-form{
    padding:15px;
}

.filter-form input,
.filter-form select{
    width:100%;
    min-width:100%;
}

.gallery-main img{
    height:300px;
}

.gallery-nav{
    width:42px;
    height:42px;
}

.contact-item{
    flex-direction:column;
}

.footer-social{
    justify-content:center;
}

.mobile-menu{
    width:100%;
    max-width:100%;
}

}


/*=========================================================
  Small Phones (400px)
=========================================================*/

@media (max-width:400px){

.hero-content h1{
    font-size:1.6rem;
}

.hero-content p{
    font-size:.95rem;
}

.logo img{
    height:44px;
}

.logo-text h2{
    font-size:1.1rem;
}

.btn{
    padding:12px 18px;
    font-size:.9rem;
}

.gallery-main img{
    height:240px;
}

.gallery-thumb{
    width:70px;
    height:55px;
}

.vehicle-body{
    padding:18px;
}

.vehicle-price{
    font-size:1.7rem;
}

.stat-card strong{
    font-size:1.6rem;
}

.back-to-top{
    width:42px;
    height:42px;
    right:15px;
    bottom:15px;
}

}


/*=========================================================
  Print
=========================================================*/

@media print{

.site-header,
.site-footer,
.hero,
.contact-buttons,
.back-to-top,
.hamburger,
.mobile-menu,
.mobile-overlay{
    display:none !important;
}

body{
    background:#fff;
    color:#000;
}

.vehicle-summary,
.info-card{
    box-shadow:none;
    border:1px solid #ddd;
}

a{
    text-decoration:none;
    color:#000;
}

}