.attribution {
     font-size: 11px; text-align: center;
     }
.attribution a {
     color: hsl(228, 45%, 44%); 
    }
    :root{
                    /* Primary */
     /* أزرق غامق جدًا (الخلفية الرئيسية) 
     Very dark blue (main background)*/
     --Very-dark-blue-main-background: hsl(233, 47%, 7%);
     /* أزرق داكن غير مشبع (خلفية البطاقة)
     Dark desaturated blue (card background) */
     --Dark-desaturated-blue-card-background: hsl(244, 38%, 16%);
     /* <!-- بنفسجي ناعم (لهجة): -->
     - Soft violet (accent) */
     --Soft-violet-accent: hsl(277, 64%, 61%);
                    /* Neutral */
     /*الأبيض (العنوان الرئيسي، الإحصائيات)
     hite (main heading, stats)*/
     --main-heading-stats: hsl(0, 0%, 100%);
     /* <!-- أبيض شفاف قليلاً (الفقرة الرئيسية) -->
     - Slightly transparent white (main paragraph) */
     --Slightly-transparent-white-main-paragraph: hsla(0, 0%, 100%, 0.75);
     /* <!-- أبيض شفاف قليلاً (عناوين الإحصائيات) -->
     - Slightly transparent white (stat headings) */
     --Slightly-transparent-white-stat-headings: hsla(0, 0%, 100%, 0.6);
    }
     body{
          font-family: "Lexend Deca", serif;
          /* font-optical-sizing: auto; */
          /* font-weight: <weight>; */
          /* font-style: normal; */
          font-size: 15px;
          background-color: var(--Very-dark-blue-main-background);
          overflow:hidden;
          box-sizing: border-box;
          overflow: hidden;
     }
       .landing{
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
     }
     .container{
              display: flex;
          width: 1200px;
          grid-template-columns: 450px 450px;
           border: 5px solid var(--Very-dark-blue-main-background);
          padding: 0px;
          border-radius: 12px;
     }
     .right-card{
     width: 700px;
     height: 500px;
     position: relative;
     background-size: cover; 
     background-repeat: no-repeat;
     border: 0px solid var(--Very-dark-blue-main-background);
     padding: 0px;
     border-radius: 0 12px 12px 0;
     }
.right-card img{
     width: 100%;
     height: 100%;
     border-radius: 0 12px 12px 0;
}
     .right-card::before{
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background-color:violet;
     opacity: 0.4;
     border-radius: 0 12px 12px 0;
     }
   
     .left-card{
          width: 700px;
          background-color: var(--Dark-desaturated-blue-card-background);
          padding:40px 50px;
          border: 0px solid var(--Very-dark-blue-main-background);
        border-radius: 12px 0 0 12px;
     }
     .heading{
     color: var(--main-heading-stats);
     font-weight: 700;
         
}
.text{
     color: var(--Slightly-transparent-white-main-paragraph);
padding-right: 60px;
}
.text p{
     line-height: 1.6;
     width: 80%;
     font-size: small;
}
.stat{
     display: flex;
     justify-content: space-between;
     text-transform: capitalize;
     margin-right: 100px;
     font-family: "Inter", serif;
     margin-top: 50px;
     padding-right: 60px;
}
.stat h2{
     color: var(--main-heading-stats);
     margin-bottom: 0;
     font-weight: 600;

}
.stat span{
color: var(--Slightly-transparent-white-stat-headings);
padding-top: 0;
font-weight: 400;
}
@media (width: 375px) {
     body{
     font-family: "Lexend Deca", serif;
     /* font-optical-sizing: auto; */
     /* font-weight: <weight>; */
     /* font-style: normal; */
     font-size: 15px;
     background-color: var(--Very-dark-blue-main-background);
     }
     .landing{
     display: flex;
     justify-content: center;
     align-items: center; 
     overflow: hidden;
     }
     .container{
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column-reverse;
     padding: 50px 25px;
     }
     .right-card{
     width: 300px;
     height: 220px;
     position: relative;
    
     background-size: contain;
     background-repeat: no-repeat;
     border: 0px solid var(--Very-dark-blue-main-background);
     padding: 0px;
     border-radius: 12px 12px 0px 0px;
     }
     .right-card img{
     width: 100%;
     border-radius: 12px 12px 0px 0px;
}
     .right-card::before{
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background-color:violet;
     opacity: 0.4;
     border-radius:  12px 12px 0px 0px;
     }
.left-card{
     width: 300px;
     /* height: 400px; */
     background-color: var(--Dark-desaturated-blue-card-background);
     padding: 0;
     border: 0px solid var(--Very-dark-blue-main-background);
     border-radius: 0 0 12px 12px;
}
.heading{
     color: var(--main-heading-stats);
     font-weight: 700;
     font-size: 20px;
         margin: 25px;
         text-align: center;
}
.text{
     color: var(--Slightly-transparent-white-main-paragraph);
     text-align: center;
     align-items: center;
     display: flex;
     flex-direction: column;
     padding: 0;

}
.text p{
     line-height: 1.6;
     font-size: 12px;
     font-family: "Inter", serif;
}
.stat{
     display: flex;
     justify-content: space-between;
     text-transform: capitalize;
     font-family: "Inter", serif;
     display: flex;
     flex-direction: column;
     margin: 0;
     align-items: center;
     text-align: center;
margin-bottom:20px ;
padding: 0;
}
.stat h2{
     color: var(--main-heading-stats);
     margin-bottom: 0;
     font-weight: 600;

}
.stat span{
color: var(--Slightly-transparent-white-stat-headings);
padding-top: 0;
font-weight: 400;
}
}