*,
*::before,
*::after {
    box-sizing: border-box;
}
 
html{
    scroll-behavior: smooth;
}

/* Custom properties */
:root{
    --ff-primary:  "Vollkorn", serif;
    --ff-secondary:  "Domine", serif;

    --fw-reg: 300;
    --fw-bold: 900;

    --clr-light: #FAF2E0;
    --clr-white: #ffff;
    --clr-dark: #000;
    --clr-accent: #f49738;
    --clr-background:#4458be;
    /* --clr-accent: #16e0bd; */
    --clr-lighter: #66f190;


    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;

    --bs: 0.25em 0.25em 0.75em rgb(0,0,0,0.25),
    0.125em 0.125em 0.25em rgb(0,0,0,0.15);
}

@media (min-width: 800px){
    :root{  
        --fs-h1: 4.5rem;
        --fs-h2: 2.50rem;
        --fs-h3: 1.5rem;
        --fs-h4: 1.00rem;
        --fs-body: 1.125rem;
    }
}

/* General styles */

body{
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 0;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    line-height: 1.6;
}

section {
    padding: 2em 2em;
}

img{
    display: block;
    max-width: 100%;
}

:focus {
    outline: 3px solid var(--clr-accent);
    outline-offset: 3px;
}

.btn{
    display: inline-block;
    padding: 0.5em 2.5em;
    background: var(--clr-accent);
    color: var(--clr-dark);
    text-decoration: none;
    cursor: pointer;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: var(--fw-bold);
    transition: transform 200ms ease-in-out;
}


.btn:hover{
    transform: scale(1.1);
}


/* Typography */

h1,
h2,
h3{
    line-height: 1;
    margin: 0;
}

h1{font-size: var(--fs-h1);}
h2 { font-size: var(--fs-h2);}
h3{font-size: var(--fs-h3);}

.section__title{
    margin-bottom: 0.25em;
}

strong{
    font-weight: var(--fw-bold);
}

.section__title{
    margin-bottom: 0.25em;
}

strong{
    font-weight: var(--fw-bold);
}

.section__title--description{
    font-weight: var(--fw-reg);
    text-align: center;
}



@media (max-width: 1370px) {

    /* .logo__section{
        display: none !important;
    } */

    .shashank{
        font-size: var(--fs-h3 - 2em);
        font-weight: var(--fw-bold);
        padding: 1em;
    }

    .header{
        text-align: right !important;
        left: 70% !important;
    }
}

header{
    display: flex;
    justify-content: space-between;
    padding: 1em;
    color: var(--clr-background);
    background: var(--clr-white);
    /* background-image: url("../image/banner.gif"); */
    height: 8em;
}

.shashank{
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    padding: 1em;
}

.sub-shashank{
    font-weight: bold;
    font-size: var(--fs-h4);
}

.logo__section{
    position: relative;
    /* left: 12%; */
    padding: 0;
    align-items: center;
    align-content: center;
    text-align: center;
    display: grid;
    font-family: var(--ff-primary);
}

.logo__heading {
    margin: 0;
    display: block;
    text-align: center;
}

.logo{
    max-width: 100px;
}

.nav{
    color: var(--clr-accent);
    display: inline-flexbox;
    left: auto;
    right: 0;
    top: 2.75em;
    bottom: auto;
    align-items: center;
}

.nav__list{
    list-style: none;
    display: flex;
    height: 100%;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
    padding: 0 1em;
}

.nav__item{
    padding: 0 0.75em
}

.nav__link{
    color: inherit;
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    text-decoration: none;
}

.nav__link:hover{
    color: var(--clr-accent);
}
    

.Contact{
    padding-top: 1em;
    align-content: end;
    text-align: end;
    padding-right: 3em;
}


.divider{
    background: var(--clr-lighter);
}

.divider p{
    font-size: 0.095em;
    font-weight: var(--fw-bold);
}


.description, .experiences{
    max-width: 1000px;
    margin: 0 auto;
}

.section desciption, .section .experiences{
    max-width: 70%;
    margin: 0 auto;
}

p{
    margin: 0.5em auto;
    text-align: justify;
}

/* Description of Each Experiences */

@media (min-width: 1150px){
    .description{
        display: grid;
        grid-template-rows: 1fr 200px;
        grid-template-areas: 
            "title"
            "text";
        grid-column-gap: 2em;
    }

    .section__title--description {
        grid-area: title;
    }
}

.experience__body p{
    margin: 0.5 auto;
    text-align: justify;
}
.subTitle{
    text-align: center;
    margin: 0.75em auto;
}

#services {
    margin-top: 5vw;
    padding: 30px 0;
}

.servicesList {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-gap: 10px;
}

.servicesList div {
    padding: 0.25vw;
    text-align: center;
    align-content: center;
    background: var(--clr-lighter);
    font-size: 0.5vw;
    border-radius: 10px;
    transition: background 0.5s, transform 0.5s;
}

.servicesList div h2 {
    font-size: 1vw; 
    padding-top: 0.35em;
}

.servicesList div a {
    text-decoration: none;
    color: var(--clr-accent);
    font-size: 0.95vw; 
    font-weight: var(--fw-bold);
    display: inline-block;
}

.servicesList div:hover {
    background: #ff004f;
    transform: translateY(-10px);
}


/* Description of Each Experience */


@media (min-width: 1150px){
    .experiences {
        display: grid;
        text-align: center;
        grid-template-rows: auto 1fr auto; 
        grid-template-columns: repeat(2, 1fr); 
        grid-template-areas: 
            "title title"
            "body body"
            "img1 img2"; 
        grid-column-gap: 2em;
    }
    
    .experience__body {
        grid-area: body; 
    }
    
    .experience__img {
        width: 100%; 
        margin-bottom: 0.75em;
        border: 2px solid black;
    }
    
    .experience__img:nth-child(1) {
        grid-area: img1; 
    }
    
    .experience__img:nth-child(2) {
        grid-area: img2; 
    }
    

    .section__title--experience {
        grid-area: title;
    }

    .back{
        padding-bottom: 1em;
        align-content: center;
        text-align: center;
    }
}

/* footer */

.contact_title{
    color: var(--clr-dark);
}
.contact-me{
    background: var(--clr-light);
    color: var(--clr-accent);
    text-align: center;
    padding: 0.5em 0;
    font-size: var(--fs-h3);
}

.contact-me a{
    color: inherit;
    text-decoration: none;
}

.social-list__link:hover{
    opacity: 0.7;
}

.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0.35em 0 0;
    padding: 0;
}

.social-list__item{
    margin: 0 0.5em;
}

.social-list__link{
    padding: 0.5em
}

.footer{
    font-size: var(--fs-h3);
    text-align: center;
    background: var(--clr-dark);
    color: var(--clr-accent);
    font-weight: var(--fw-bold);
}

.footer p{
    margin:0;
}

/* .experience__img{
    width: 50%;
} */



/* EXPERIMENTING DATA FOR CONTAINERS */

/* 
.experience-container {
    margin: 2em auto; 
    padding: 2em;
    max-width: 1000px;
    background-color: var(--clr-light); 
    border-radius: 50px; 
    box-shadow: var(--bs); 
}

.experiences {
    display: grid;
    text-align: center;
    grid-template-rows: auto 1fr auto; 
    grid-template-columns: repeat(2, 1fr); 
    grid-template-areas: 
        "title title"
        "body body"
        "img1 img2"
        "button button"; 
    grid-column-gap: 2em;
}

.experience__body {
    grid-area: body; 
}

.experience__img {
    width: 100%; 
    padding-bottom: 0.5em;
}

.experience__img:nth-child(1) {
    grid-area: img1; 
}

.experience__img:nth-child(2) {
    grid-area: img2; 
}


.section__title--experience {
    grid-area: title;
}

.experience__body {
    margin-bottom: 1em; 
}

.experience__img {
    width: 100%; 
    max-width: 100%;
    border-radius: 10px; 
    padding-left: 10%;
    padding-right: 10%;
}

.back {
    text-align: center;
    margin-top: 1em; 
}

.back .btn {
    padding: 0.5em 2em; 
    background-color: var(--clr-accent);
    color: var(--clr-dark); 
    text-decoration: none;
    border-radius: 5px; 
    transition: transform 0.2s ease-in-out;
}

.back .btn:hover {
    transform: scale(1.1); 
}

<section class="experiences" id="ISAB">
<h2 class="section__title section__title--experience">International Student Advisory Board (ISAB)</h2>
<div class="experience__body">
    <p>The ISAB is a group of international student representatives selected to serve as a sounding board for International Students and Scholar Services (ISSS) and other campus units. 
        Board-members are committed to fostering and maintaining strong relationships with international student organizations and UMD international students to understand their lived experience and challenges. 
        In turn, these members possess the ability to collect and share information as necessary. 
        ISAB is a solutions-oriented board and seeks to empower students to develop solutions to the identified challenges of international students at UMD.</p>
    <p>I joined ISAB initially as a board-member and later on became its co-President in FALL 2023.
        Serving as the co-President, I’ve tried to create an open-communication channel where members can discuss their thoughts without hesitations in our monthly board-meetings. 
        In my efforts of re-organizing the board and to create more awareness about it, I recognized the need for a new logo and came up with our present logo, created a dashboard on google Excel to track the activities of the board-members and communicated frequently with them. 
        I led a team of 4 board-members in organizing the International Terp Nexus, a 2-hour event aimed at providing international students a platform to raise their concerns and share their insights. 
        Using these insights we worked with ISSS on how we can make amends to the current policies to help better the situations</p>
    <p>In April 2024, I was awarded a Certificate of Achievement by ISSS for my continued commitment and contributions to ISAB as its co-President. 
        By being a part of ISAB, I have come closer to the international community at UMD. 
        Working at the co-President, I’ve had the opportunity to develop critical soft skills like active listening, problem solving, team management which I know will greatly benefit me in my future endeavors.</p>
    <p>I extend my heartfelt gratitude to Susan-Ellis Dougherty, ISSS director, under whose leadership we are making significant strides in fostering a more inclusive and welcoming environment for the international community at UMD. 
        Further I also wish to express my appreciation to our esteemed staff advisor for ISAB, Dr. Rebeca Moreno, whose unwavering support and assistance have been invaluable to our endeavors. </p>
</div>
</section>
<div class="experience-container">
<img src="image/Experience/ISAB/Certificate-ISSS.jpeg" alt="Certificate of Achievement" class="experience__img">
<img src="image/Experience/ISAB/ITN.jpg" alt="Shashank at ITN" class="experience__img">
<div class="back">
    <a href="#" class="btn">Back</a>
</div>
</div> */