/* ================== Root Variables ================= */
:root {
    --Purple-50: hsl(260, 100%, 95%);
    --Purple-300: hsl(264, 82%, 80%);
    --Purple-500: hsl(263, 55%, 52%);
    --White: hsl(0, 0%, 100%);
    --Grey-100: hsl(214, 17%, 92%);
    --Grey-200: hsl(0, 0%, 81%);
    --Grey-400: hsl(224, 10%, 45%);
    --Grey-500: hsl(217, 19%, 35%);
    --Dark-blue: hsl(219, 29%, 14%);
    --Black: hsl(0, 0%, 7%);
}

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

body {
    background: var(--Purple-50);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-size: 1.1rem;
    font-weight: 500;
    font-family: "Barlow Semi Condensed", sans-serif;
    padding: 20px;
    
}

.container {
    position: absolute;
    /* background-color: red;  */
    box-shadow:  5px 47px rgb(230 221 221 / 30%);
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: 
        "d   d   jo  k"
        "je  p    p  k";
    gap: 10px;
    max-width: 1100px;
}

/* تعيين مواقع كل عنصر داخل الشبكة */
.d {
  grid-area: d; 
 
}
.jo {
  grid-area: jo;
  
}
.je { 
  grid-area: je;
 
}
.P {
     grid-area: p; 
}
.K { 
    grid-area: k; 
}

/* تصميم الكروت */
.Daniel-Clifford {
    padding: 20px;
    background: var(--Purple-500);
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

/* شكل الصندوق الداخلي */
.Daniel-Clifford .box-1 {
    display: flex;
    align-items: center;
}

.Daniel-Clifford .box-1 img {
    border-radius: 50%;
    width: 50px;
    border: 3px solid var(--Purple-300);
}

.Daniel-Clifford .box-1 h4 {
    padding-left: 15px;
    padding-top: 20px;
}

.box-1 small {
    padding-left: 15px;
    color: var(--Purple-50);
}

.Daniel-Clifford h4 {
    margin-top: 10px;
    color: var(--Grey-100);
}

.Daniel-Clifford p {
    color: var(--Purple-50);
    font-size: 1rem;
    margin-top: 10px;
}

/* ألوان الخلفية المختلفة لكل بطاقة */
.Grey-500 {
     background: var(--Grey-500);
     padding-top: 41px; 

}
.text .h4 {
   transform: translateY(-30px);
   -webkit-transform: translateY(-30px);
   -moz-transform: translateY(-30px);
   -ms-transform: translateY(-30px);
   -o-transform: translateY(-30px);
}
.text .p{
    transform: translateY(-30px);
   -webkit-transform: translateY(-30px);
   -moz-transform: translateY(-30px);
   -ms-transform: translateY(-30px);
   -o-transform: translateY(-30px);
}
.jone{
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
}
.Whith {
    background-color:var(--White);
    color: var(--Black);
    padding-top: 72px;
    transform: translateY(1px);
}

.Whith h4,
.Whith small,
.Whith p{
    color: var(--Black);
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
}
.jeane{
    
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
}
.jeane h4{
    font-weight: 600;
    transform: translateY(1px);
    -webkit-transform: translateY(1px);
    -moz-transform: translateY(1px);
    -ms-transform: translateY(1px);
    -o-transform: translateY(1px);
}
.Dark-blue {
     background: var(--Dark-blue); 
     transform: translateY(6px);
    padding-top: 28px;
}


.Grey-100 {
   background: var(--White);
     color: var(--Black);
     
}           
.Kira h4,
.Kira small{
    color: var(--Black);
}
.Grey-100 .ki,
.Grey-100 .p{
    color: var(--Black);
}
.copyright {
    position: relative;
    transform: translateY(360px);
    -webkit-transform: translateY(360px);
    -moz-transform: translateY(360px);
    -ms-transform: translateY(360px);
    -o-transform: translateY(360px);
}
.copyright p {
    color: var( --Grey-400)
}
.copyright a {
    color: var(--Purple-300);
    text-decoration: none;
}
/* تحسين استجابة التصميم */
@media screen and (max-width: 1024px) {
    .container {
        grid-template-columns: repeat(2, 1fr);

        grid-template-areas: 
            "d  d"
            "jo k"
            "je p"
            "p k";
            
    }
    .Grey-500 {
        background: var(--Grey-500);
        padding-top: 121px;
        margin-top: -30px ;
        
    }
    .Whith {
        background-color:var(--White);
        color: var(--Black);
        padding-top: 71px;
        transform: translateY(-49px);
    }
    .copyright {
        position: relative;
        transform: translateY(360px);
        -webkit-transform: translateY(360px);
        -moz-transform: translateY(360px);
        -ms-transform: translateY(360px);
        -o-transform: translateY(360px);
    }
    

}
@media screen and (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "d"
            "jo"
            "je"
            "p"
            "k";
           
    }
    .Grey-500 {
        background: var(--Grey-500);
        padding-top: 60px; 
    }
    .Whith {
        background-color:var(--White);
        color: var(--Black);
        padding-top: 71px;
        transform: translateY(-35px);
    }
    
    .Dark-blue {
        background: var(--Dark-blue); 
        transform: translateY(-25px);
        padding-top: 31px;
   }
   .copyright {
    position: relative;
    transform: translateY(965px);
    -webkit-transform: translateY(965px);
    -moz-transform: translateY(965px);
    -ms-transform: translateY(965px);
    -o-transform: translateY(965px);
}
    
}