html,body{
    height: 100%;
    overflow-x: hidden;
}
body{
    background-image: linear-gradient(76.3deg, rgba(44,62,78,1) 12.6%, rgba(69,103,131,1) 82.8%);
    font-family: 'Inter', sans-serif;
    color:#F2F2F2;
    font-weight: 900;
    
}
@font-face {
  font-family: "Corpta";
  src: url("transfonter.org-20251226-165531/CorptaDEMO-Regular.woff2") format("woff2"),
       url("transfonter.org-20251226-165531/CorptaDEMO-Regular.woff") format("woff");
}
h1,h2,h3,h4,button,a{
    color:#FFCE00;
    font-family: "Corpta", sans-serif;
}
h1{
    text-align:center;
    margin: 20px auto;
    max-width: 100%;
    height: fit-content;
}
h3{
    text-align: center;
}
img{
    max-width: 98%;
    margin:10px auto;
    background-image: linear-gradient(76.3deg, rgb(28, 34, 39) 12.6%, rgb(61, 84, 102) 82.8%);
    padding: 10px 0px;
    border-radius: 20px 20px;
    border: solid #FFCE00 2px;
}
.porsche-container {
    display: flex;
    justify-content:end;
    width: 100%;
}

.porsche {
    background: rgb(28, 34, 39);
    width: 90%;
    max-width: 300px;
    border: solid rgb(61, 84, 102) 10px;
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
}

.porsche-logo {
    display: block;
    max-height: 100px;
    margin: 0 auto;
}

nav{
    background:rgb(28, 34, 39) ;
    text-align:center;
    padding:25px 25px;
    width: min-content;
    margin: 10px auto;
    border: solid 6px rgb(61, 84, 102);
    border-radius: 20px 20px;
    
}
a{
    display: inline-block;
    margin: 10px auto;
    background:rgb(61, 84, 102);
    padding: 20px 25px;
    text-decoration: none;
    width: max-content;
    border-style: groove;
    border-color:#FFCE00;
    border-radius: 10px 10px;
}
hr {
  border: none; 
  height: 3px;   
  background-color: #FFCE00; 
  max-width: 50%;
  margin: 30px auto; 
}
section{
    max-width: 97%;
    max-height: 100%;
    background:rgb(28, 34, 39);
    border: solid 6px rgb(61, 84, 102);
    margin: 20px 0px;
    border-radius: 20px 20px;
    padding: 10px 22px;
}
.Porsche-911-GT3-RS-img-3{
    background: none;
    border: none;
    max-height: fit-content;
    max-width: fit-content;
}
.Specifications-p{
    color:#FFCE00;
    font-family: "Corpta", sans-serif;
    font-size:x-large;
}
.Specifications-card{
    background:rgb(28, 34, 39) ;
    text-align:center;
    padding:20px 25px;
    width: 90%;
    max-width: 600px;
    margin: 30px auto;
    border: solid 6px rgb(61, 84, 102);
    border-radius: 20px 20px;

}
.Specifications-card li{
    margin: 12px 12px;
    background:rgb(61, 84, 102);
    padding: 20px 25px;
    border-style: groove;
    border-color:#FFCE00;
    border-radius: 10px 10px;
}
.المحرك,.التسارع,.Suspension,.الفرامل,.porsche-gts3,.قير{
    width: 300px;
    padding: 0px;
    height: fit-content;
}
.Specifications-span{
    display: block;
    color: #F2F2F2;
    margin-top: 10px;
}
.vedio{
    position: relative;
    right: 25%;
    width: 50%;
    margin: 10px auto;
    padding: 0px;
    max-height: 300px;
    background-image: linear-gradient(76.3deg, rgb(28, 34, 39) 12.6%, rgb(61, 84, 102) 82.8%);
    border-radius: 20px 20px;
    border: solid #FFCE00 2px;

}
.Design-card{
    background:rgb(28, 34, 39) ;
    text-align:center;
    padding:20px 25px;;
    width: 90%;
    max-width: 600px;
    margin: 30px auto;
    border: solid 6px rgb(61, 84, 102);
    border-radius: 20px 20px;
}
.Design-p{
    color:#FFCE00;
    font-family: "Corpta", sans-serif;
    font-size:x-large;
}
.Design-card li{
    margin: 12px 10px;
    background:rgb(61, 84, 102);
    padding: 20px 25px;
    border-style: groove;
    border-color:#FFCE00;
    border-radius: 10px 10px;
}
.porsche-Design,.العجلات,.المقصورة-الداخلية,.التكنلوجيا{
    width: 300px;
    padding: 0px;
    height: fit-content;
}
.Gallery-p{
    color:#FFCE00;
    font-family: "Corpta", sans-serif;
    font-size:x-large;
    text-align: center;
    margin-top:2px;
}
.Gallery-img{
    position: relative;
    right: 25%;
    max-width: 50%;
    height: fit-content;
    margin:10px auto;
    background-image: linear-gradient(76.3deg, rgb(28, 34, 39) 12.6%, rgb(61, 84, 102) 82.8%);
    padding: 0px 0px;
    border-radius: 20px 20px;
    border: solid #FFCE00 2px;
}
.Gallery-hr{
    background: rgb(75, 104, 127);
}
.Gallery-span{
    color: #F2F2F2;
}
footer a{
    all: unset;
    margin: 10px 10px;
    color: #FFCE00;
    background: rgb(61, 84, 102);
    border-radius: 20px 20px;
}
footer{
    background:rgb(28, 34, 39) ;
    text-align:center;
    padding:20px 25px;
    width: 90%;
    max-width: 600px;
    height: fit-content;
    margin: 30px auto;
    border: solid 10px rgb(61, 84, 102);
    border-radius: 20px 20px;
}
/* ===== Responsiveness ===== */
@media (max-width: 768px) {
    /* Navbar */
    nav {
        flex-direction: column;
        align-items: center;
    }
    nav a {
        width: 90%;
        text-align: center;
        margin: 5px 0;
    }

    /* Sections & Cards */
    .Specifications-card, .Design-card, .Gallery-card {
        width: 90%;
        padding: 15px;
        margin: 15px auto;
    }

    /* Footer */
    footer {
        width: 90%;
        padding: 15px;
        margin: 20px auto;
    }
    footer a {
        width: 90%;
        text-align: center;
        margin: 5px 0;
    }

    /* Videos & Images */
    .vedio, .Gallery-img, .porsche-Design, .العجلات, .المقصورة-الداخلية, .التكنلوجيا {
        width: 100%;
        max-width: 500px;
        height: auto;
        margin: 10px auto;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }
}
/* شاشة صغيرة جدًا أو تكبير الخط */
@media (max-width: 480px), (max-width: 768px) and (orientation: portrait) {
    body {
        font-size: 16px; /* أكبر من الافتراضي لتناسب الخط الكبير */
    }

    .porsche, .Specifications-card, .Design-card, .Gallery-card, nav, footer {
        width: 95%;
        padding: 10px;
        margin: 10px auto;
    }

    .vedio, .Gallery-img, .porsche-Design, .العجلات, .المقصورة-الداخلية, .التكنلوجيا {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 10px auto;
        right: 0; /* إزالة أي تحريك لليمين */
    }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1rem; }
    p, li { font-size: 1rem; line-height: 1.5; }
    @media (max-width: 768px) {
    nav a {
        width: 90%;
        text-align: center;
        white-space: normal;     /* لكسر الأسطر الطويلة */
        word-break: break-word;   /* لكسر الكلمات بدل خروجها */
    }
}
}
nav a {
    font-size: 0.9rem; /* تصغير الخط لو الشاشة صغيرة */
    padding: 10px 15px; /* تقليل البادينغ عشان يتناسب */
    box-sizing: border-box;
    word-break: break-word; /* تكسر الكلمات الطويلة بدل ما تطلع برا */
}