@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@100;200;300;400;500;600;700;900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&family=Noto+Kufi+Arabic:wght@100..900&family=Noto+Naskh+Arabic:wght@400..700&family=Noto+Sans+Arabic:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Cairo+Play:wght@200..1000&family=Cairo:wght@200..1000&family=Changa:wght@200..800&family=Lemonada:wght@300..700&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');


/* 
===== Arabic Fonts ======
font-family: "Changa", sans-serif; maybe
font-family: "Tajawal", sans-serif; maybe
font-family: "Lemonada", cursive;
font-family: "Cairo", sans-serif; best one so far - maybe
font-family: "Cairo Play", sans-serif; also a maybe
font-family: "Amiri", serif;
font-family: "Amiri Quran", serif;

font-family: "Noto Sans Arabic", sans-serif; best one- almost a yes
font-family: "Noto Naskh Arabic", serif;
font-family: "Noto Kufi Arabic", sans-serif;
font-family: "IBM Plex Sans Arabic", sans-serif; 
*/



/* FLUID FONT-SIZES*/
:root {
    --black: #131313;
    --white: #F0F2F5;
    --fluid-h1: clamp(2.188rem, 1.63rem + 2.288vw, 4.375rem);
    --fluid-h2: clamp(1.563rem, 1.244rem + 1.307vw, 2.813rem);
    --fluid-h3: clamp(1.563rem, 1.487rem + 0.324vw, 1.875rem);
    --fluid-h4: clamp(1.313rem, 1.252rem + 0.259vw, 1.563rem);
    /* --fluid-h5: clamp(1.313rem, 1.267rem + 0.194vw, 1.5rem); */
    --fluid-p: clamp(0.875rem, 0.845rem + 0.129vw, 1rem);
    --fluid-b: clamp(0.813rem, 0.782rem + 0.129vw, 0.938rem);
    --fluid-li: clamp(1.063rem, 1.002rem + 0.259vw, 1.313rem);
    --fluid-prjtag: clamp(1.063rem, 0.911rem + 0.647vw, 1.688rem);
    --fluid-aT: clamp(1.75rem, 1.4rem + 1.438vw, 3.125rem);
    --fluid-prjTitle: clamp(1.5rem, 1.245rem + 1.046vw, 2.5rem);
    --fluid-prjTitleMobileView: clamp(1.5rem, -0.068rem + 6.433vw, 2.188rem);
    --fluid-logoIcon: clamp(6rem, 4.98rem + 4.183vw, 10rem);
    --fluid-LrgMenuTxt: clamp(2.875rem, 2.015rem + 3.529vw, 6.25rem);
    --fluid-SmlMenuTxt: clamp(1.5rem    , 1.325rem + 0.719vw, 2.188rem);
    --fluid-menuIcons: clamp(2.188rem, 1.98rem + 0.85vw, 3rem);
    --fluid-prjMenuOptions: clamp(1rem, 0.873rem + 0.523vw, 1.5rem);
    --fluid-checkOutTitle: clamp(1.563rem, 1.324rem + 0.98vw, 2.5rem);
    --fluid-ViewPrjButton: clamp(0.875rem, 0.843rem + 0.131vw, 1rem);
    --fluid-SkillIcon: clamp(2.813rem, 2.335rem + 1.961vw, 4.688rem); 
    --fluid-SkillIconName: clamp(1.125rem, 1.093rem + 0.131vw, 1.25rem);
    --fluid-ProfilePic: clamp(18.125rem, 14.779rem + 13.725vw, 31.25rem);
    --fluid-PrjPrvImgsMobile: clamp(16.875rem, 7.829rem + 37.113vw, 28.125rem);
}



/* font-family: 'Epilogue', sans-serif;
font-family: 'Zen Maru Gothic', serif; */

/* Type */



body {
    font-family: 'Zen Maru Gothic', serif;
    margin-bottom: 0.5rem;
    font-weight: 300;
    background-color: #F0F2F5;
}

p{
    font-family: 'Zen Maru Gothic', serif;
    font-weight: 400;
    line-height: 2rem;
    margin: 0px 0px 0px 0px;
    font-size: var(--fluid-p);
}

button{
    font-family: 'Zen Maru Gothic', serif;
}

hr{
    width: 100%;
    margin: 2rem 0rem 2rem 0rem;
}

b{
    font-weight: 500;
}


* {
    line-height: 1.25;
}

h1, 
.h1{
    font-family: 'Epilogue', sans-serif;
    font-size: var(--fluid-h1);
    margin-bottom: 1rem;
    font-weight: 700;
}
h2,
.h2{
    font-family: 'Epilogue', sans-serif;
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-size: var(--fluid-h2);
}

h3,
.h3{
    font-family: 'Epilogue', sans-serif;
    font-size: var(--fluid-h3);
    font-weight: 700;
}


h4,
.h4{
    font-family: 'Epilogue', sans-serif;
    font-size: var(--fluid-h4);
    margin-bottom: 1rem;
    font-weight: 600;
}

h5,
.h5{
    font-family: 'Epilogue', sans-serif;
    font-size: var(--fluid-h5);
    font-weight: 800;
}

h6,
.h6{
    font-family: 'Epilogue', sans-serif;
    margin-bottom: 0.5rem;
    font-weight: 200;
}

li,
.li{
    font-family: 'Epilogue', sans-serif;
    font-weight: 400;
    margin: 3rem 0rem 1rem 0rem;
}

section.bg {
    background-color: #F0F2F5;  
    padding: 0rem ;
    /* ^ Mental NOTE: Orginally was (padding: 4rem 0;) but changed to whats above ^ */
}

.container {
    /* max-width: 80rem; */
    margin: 0 auto;
    padding: 0rem 3rem 0rem 3rem;
    overflow: hidden;
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
       
}

.flex { display: flex; }

/* .space-between {
    justify-content: space-between;
} */


@media screen and (max-width: 560px){
    /* ========= GRID FOR MOBILE ========= */

}

@media screen and (min-width: 561px){
    /* ========= GRID FOR DESKTOP ========= */

}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media screen and (min-width: 568px) {
    
    .col-1-sm { grid-column: span 1; }
    .col-2-sm { grid-column: span 2; }
    .col-3-sm { grid-column: span 3; }
    .col-4-sm { grid-column: span 4; }
    .col-5-sm { grid-column: span 5; }
    .col-6-sm { grid-column: span 6; }
    .col-7-sm { grid-column: span 7; }
    .col-8-sm { grid-column: span 8; }
    .col-9-sm { grid-column: span 9; }
    .col-10-sm { grid-column: span 10; }
    .col-11-sm { grid-column: span 11; }
    .col-12-sm { grid-column: span 12; }
    

}

@media screen and (min-width: 834px) {
    
    .col-1-md { grid-column: span 1; }
    .col-2-md { grid-column: span 2; }
    .col-3-md { grid-column: span 3; }
    .col-4-md { grid-column: span 4; }
    .col-5-md { grid-column: span 5; }
    .col-6-md { grid-column: span 6; }
    .col-7-md { grid-column: span 7; }
    .col-8-md { grid-column: span 8; }
    .col-9-md { grid-column: span 9; }
    .col-10-md { grid-column: span 10; }
    .col-11-md { grid-column: span 11; }
    .col-12-md { grid-column: span 12; }

}

@media screen and (min-width: 1080px) {
    
    .col-1-lg { grid-column: span 1; }
    .col-2-lg { grid-column: span 2; }
    .col-3-lg { grid-column: span 3; }
    .col-4-lg { grid-column: span 4; }
    .col-5-lg { grid-column: span 5; }
    .col-6-lg { grid-column: span 6; }
    .col-7-lg { grid-column: span 7; }
    .col-8-lg { grid-column: span 8; }
    .col-9-lg { grid-column: span 9; }
    .col-10-lg { grid-column: span 10; }
    .col-11-lg { grid-column: span 11; }
    .col-12-lg { grid-column: span 12; }

}