*{

box-sizing:border-box;
font-family:"Inter",Arial,sans-serif;

}


body{

margin:0;
background:white;
color:#111;

}



.container{

    width:92%;
    max-width:1300px;
    margin:auto;

    padding-bottom:150px;

}




header{

text-align:center;
padding:50px 0;

}



header h1{

font-size:40px;

}



header p{

max-width:700px;
margin:auto;
color:#555;
line-height:1.6;

}




.grid{

display:grid;
grid-template-columns:0.9fr 1.1fr;
gap:80px;

}



h2{

font-size:15px;
margin-bottom:15px;

}



.card{

background:white;
padding:25px;
border-radius:15px;

box-shadow:
0 5px 25px rgba(0,0,0,.12);

margin-bottom:35px;

}

.experience{

    width:681.44px;       /* change card width */

    min-height:1044.04px;  /* change card height */

    padding:35px;      /* space inside card */

}


.education-card{

    width:681.44px;      /* card width */

    height:156.29px;     /* card height */

    padding:35px 40px;

}



.education-card h3{

font-size:25.01px;

font-weight:400;

margin:0 0 35px 0;

}



.education-bottom{

display:flex;

justify-content:space-between;

align-items:center;

}



.imperial img{

    width:350px;

    position:relative;

    top: -30px;   /* down/up */
    left:-30px;   /* left/right */

}


.accreditations{

display:flex;

flex-direction:column;

align-items:flex-start;

}



.accreditations p{

font-size:16px;

margin:0 0 10px;

transform:translateY(-15px);
}



.logos{

display:flex;

align-items:center;

gap:20px;

transform:translateY(-25px);
}



.logos img{

height:45px;

width:auto;

object-fit:contain;

}

.award-image{

width:100%;
border-radius:10px;

}

.atkins-text{

    position:relative;

    left:-60px;

}

.atkins-logo{

    width:115px !important;

    height:115px !important;

    object-fit:contain;

    transform:translateX(-30px);
}


.job{

margin-bottom:55px;

}



.job-header{

display:flex;
align-items:center;
gap:20px;

}



.job-header img{

width:45px;
height:45px;
object-fit:contain;

}



.job-header div{

flex:1;

}



.job-header span{

white-space:nowrap;

}
.hippos-title,
.pentafom-title{

    position:relative;

    left:-55px;

}

.hippos-logo{

    width:120px !important;

    height:120px !important;

    object-fit:contain;

    transform:translateX(-30px);
}



.pentafom-logo{

    width:120px !important;

    height:120px !important;

    object-fit:contain;

    transform:translateX(-30px);
}
.job i{

    font-size:13px;

    display:block;

    margin-bottom:5px;

}


.job p{

    font-size:13px;

    line-height:1.5;

    margin-top:5px;

}




/* ===============================
   PROJECT CARD SETTINGS
   CHANGE THESE VALUES
================================= */

:root{

    --project-width:220px;       /* Card width */
    --project-height:300px;      /* Card total height */

    --project-image-height:220px; /* Image height */

    --project-gap:20px;           /* Space between cards */

    --project-radius:15px;        /* Rounded corners */

}



/* ===============================
   PROJECT SECTION
================================= */


.projects{

    margin-top:160px;

    display:flex;

    justify-content:center;

    gap:var(--project-gap);

    flex-wrap:wrap;

}






/* ===============================
   EACH PROJECT CARD
================================= */


.project-card{


    width:var(--project-width);

    height:var(--project-height);


    background:white;


    border-radius:var(--project-radius);


    overflow:hidden;


    box-shadow:
    0 5px 20px rgba(0,0,0,0.15);


}





/* ===============================
   PROJECT IMAGE SETTINGS
   CHANGE THESE VALUES
================================= */

:root{

    --image-width:100%;      /* Image width */

    --image-height:220px;   /* Image height */

    --image-radius:13.03px;     /* Image corner roundness */

    --image-position:right center; /* Image crop position */

}




/* PROJECT IMAGE */


.project-card img{

    width:158.9px;     /* photo width */

    height:216.4px;    /* photo height */

    object-fit:cover;

    transform:translate(30px,30px);
    
    border-radius:13.03px;

}




/* ===============================
   PROJECT TITLE AREA
================================= */


.project-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:50px 15px 15px 15px;

    font-size:13px;

}

.social-links{

    margin-top:25px;

}


.social-links img{

    width:70px;

    height:70px;

    object-fit:contain;

    transition:0.2s;

}


.social-links img:hover{

    transform:scale(1.15);

}


.project-info span{

    position:relative;

    left:15px;

}



.project-info b{

    position:relative;

    left:-15px;   /* move right */

}





/* ===============================
   MOBILE
================================= */


@media(max-width:900px){


.projects{

    justify-content:center;

}


}