@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ---- SITE-WIDE ELEMENTS ---- */
html{
    scroll-behavior: smooth;
}

body {
    width: 90%;
    margin: auto;
    overflow-x: hidden;
    background-color: #F9F4ED;   
}

.navbar {
    overflow: hidden;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.navbar a {
    float: right;
    display: block;
    color: #565656;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-decoration: none;
    font-family: 'Saira';
    font-weight: 500;
    font-size: 1.3rem;
}

.navbar a:hover {
    color: #d18f9a;
}

.site-logo {
    top: 1rem;
}

.site-logo img {
    width: 100%;
}

.nav {
    margin-top: 1rem;
    padding: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.image-container {
    position: absolute;
    top: 0.25rem;
    left: 45.5%;
    width: 8%;
    height: auto;
}

footer {
    text-align: center;
    font-family: "Saira";
}

.footerSocials{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #E5A9A9;
    text-align: center;
    padding-top: 0.8rem;
}

.socialsContainer{
    width: 13%;
    display: grid;
    grid-template-columns: 21% 21% 21% 35%;
    padding-left: 42%;
    gap: 2%;
}

.socialsContainer-1{ /* this one's for the ABOUT PAGE */
    width: 20%;
    display: grid;
    grid-template-columns: 21% 21% 21% 35%;
    gap: 6%;
}

.socials-1{
    grid-column: 1 / 2;
}

.socials-2{
    grid-column: 2 / 3;
}

.socials-3{
    grid-column: 3 / 4;
}

/* ---- HOMEPAGE ---- */
.parentHome { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(2, 1fr); 
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }

.div1-1 { grid-area: 1 / 1 / 3 / 2; } 
.div2-1 { grid-area: 1 / 2 / 2 / 3; } 
.div3-1 { grid-area: 2 / 2 / 3 / 3; } 
.div4-1 { grid-area: 1 / 3 / 3 / 4; } 

.homeDesignation{
    width: 210%;
    left: 36%;
    height: auto;
    position: relative;
}

.featured {
    text-align: center;
    font-family: "Saira";
    font-weight: 500;
    line-height: 42px;
    font-size: 2rem;
    color: #AF7582;
    overflow-wrap: break-word;
    margin-bottom: -0.2rem;
}

.featuredSubHead{
    text-align: center;
    font-family: "Saira";
    font-weight: 400;
    font-size: 1.2rem;
    color: #D18F9A;
    margin-top: -2rem;
}

.featuredContainer {
    width: 100%;
    margin-top: 4rem;
    margin-bottom: 4rem;
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 2rem;
}

.featuredContainer-1{
    padding-bottom: 7%;
}

.featuredSection{
    font-family: "Saira";
}

.featuredTitle{
    font-size: 2.6rem;
    font-weight: 800;
    grid-column: 1 / span 1;
    color: #D18F9A;
    line-height: 42px;
    overflow-wrap: break-word;
    margin-bottom: -0.2rem;
}

.featuredImage {
    width: 75%;
    grid-column: 1 / span 1;
    border-radius: 25px;
    justify-content: left;
    border: 3px solid #E5A9A9;
}

.featuredCategory{
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 0%;
    color: #E5A9A9;
}

.featuredCopy{
    width: 75%;
    font-size: 1.5rem;
    font-weight: 500;
    color: #565656;
    padding-top: 3%;
}

.featuredCopy a{
    text-decoration: underline;
    color: #423F40;
    font-weight: 600;
}

.featuredCopy a:hover{
    color: #D18F9A;
}

.featuredCopy b{
    color: #D18F9A;
}

.featuredLink{
    width: 75%;
    font-size: 1.5rem;
    font-weight: 500;
    color: #565656;
    padding-top: 4%;
}

.featuredLink a{
    text-decoration: underline;
    color: #423F40;
    font-weight: 700;
}

.featuredLink a:hover{
    color: #D18F9A;
}


.scrollMore{
    font-size: 1.4rem;
    font-family: "Saira";
    text-align: center;
    font-weight: 500;
    padding-right: 3%;
}

.scrollMore a{
    color: #AF7582;
    text-decoration: none;
}

.scrollMore a:hover{
    color: #D18F9A;
    text-decoration: none;
}

.scrollSection{
    height: 90vh;
}

.arrow {
    border: solid #591731;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 2.5px;
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.copyrightIndex{
    padding-bottom: 3.5rem;
    color: #565656;
}

/* ---- ABOUT PAGE ---- */
.aboutContainer {
    width: 100%;
    margin-top: 0;
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 2rem;
}

.aboutTitle{
    font-size: 4.8rem;
    font-weight: 800;
    line-height: 0%;
    color: #D18F9A;
}

.aboutImage{
    width: 100%;
    grid-column: 1 / span 1;
    border-radius: 25px;
    border: 3px solid #D18F9A;
}

.aboutCopy{
    width: 85%;
    font-size: 1.35rem;
    font-weight: 500;
    color: #565656;
    padding-top: 3%;
}

.copyrightAbout{
    padding-top: 1rem;
    color: #565656;
}

.programsProficiency{
    width: 10%;
}

/* ---- GALLERY PAGE ---- */
.galleryTitle{
    font-family: "Saira";
    font-size: 1.6rem;
}

.parentGallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 1px;
    grid-row-gap: 1px;
    }
    
    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 1 / 2 / 2 / 3; }
    .div3 { grid-area: 1 / 3 / 2 / 4; }
    .div4 { grid-area: 2 / 1 / 3 / 2; }
    .div5 { grid-area: 2 / 2 / 3 / 3; }
    .div6 { grid-area: 2 / 3 / 3 / 4; }
    .div7 { grid-area: 3 / 1 / 4 / 2; }
    .div8 { grid-area: 3 / 2 / 4 / 3; }
    .div9 { grid-area: 3 / 3 / 4 / 4; }
    .div10 { grid-area: 4 / 1 / 5 / 2; }
    .div11 { grid-area: 4 / 2 / 5 / 3; }
    .div12 { grid-area: 4 / 3 / 5 / 4; }
    .div13 { grid-area: 5 / 2 / 6 / 3; }


.galleryThumbnail{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.copyrightGallery{
    padding-bottom: 3rem;
    color: #565656;
}

/* ---- PROJECT PAGE ---- */
.projectContainer {
    width: 100%;
    margin-top: 0;
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 2rem;
}

.projectTitle{
    font-family: "Saira";
    font-size: 2.3rem;
    font-weight: 700;
    color: #D18F9A;
    display: block;
    line-height: 42px;
    overflow-wrap: break-word;
    margin-bottom: -0.2rem;
}

.projectImage{
    width: 100%;
    grid-column: 2 / span 1;
    border-radius: 25px;
}

.projectVideo{
    width: 100%;
    border-radius: 25px;
}

.projectInfo{
    font-family: "Saira";
    width: 100%;
    grid-column: 1 / span 1;
    float: left;
    color: #565656;
    padding-bottom: 1rem;
}

.projectCopy{
    font-size: 1.35rem;
    padding-top: 4%;
    font-weight: 500;
    padding-bottom: 3%;
    color: #423F40;
    width: 93%;
}

.projectCopy a{
    text-decoration: underline;
    color: #423F40;
    font-weight: 600;
}

.projectCopy a:hover{
    color: #D18F9A;
}

.projectTT{
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 0.5%;
    color: #D18F9A;
}
    
.parentP5 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.div1-P5 { grid-area: 1 / 1 / 2 / 2; }
.div2-P5 { grid-area: 1 / 2 / 2 / 3; }
.div3-P5 { grid-area: 1 / 3 / 2 / 4; }

.P5-Add{
    object-fit: cover;
}

.copyrightProject{
    padding-bottom: 3rem;
    color: #565656;
}

/* ---- MEDIA QUERIES ---- */
@media screen and (min-width: 1200px){
    .aboutContainer-2 {display: none;}

    .projectContainer-2{display: none;}
}

@media screen and (min-width: 992px){
    nav {justify-content: space-between;}
    nav li {font-size: 1.2rem;}
    /*.site-logo {max-width: 25%; padding-left: 50%;} */

    .featuredContainer-1{display: none;}

    .aboutContainer-2 {display: none;}
    .aboutTitle {font-size: 2.5rem;}
    .aboutCopy {font-size: 1.5rem;}

    .PP-image{width:900%}
    .socialsContainer {padding-left: 40%;}
    .socialsContainer-1 {gap:10%;}

    .projectContainer-2{display: none;}
}

/* @media screen and (min-width: 800px){
    nav {justify-content: space-between;}
    nav li {font-size: 1.2rem;}
    .site-logo {max-width: 25%; padding-left: 50%;}

    .aboutContainer-2 {display: none;}
    .aboutTitle {font-size: 3rem;}
    .aboutCopy{font-size: 1.35rem; width: 85%;}

    .projectContainer-2{display: none;}

    .PP-image {width:900%}
    footer{margin-bottom: 1rem}
    .socialsContainer {padding-left: 40%;}
    .socialsContainer-1 {gap:6%;}
} */

@media screen and (max-width: 992px){
    .nav{padding: 0.5rem;}
    .navbar a{font-size: 0.9rem;}
    .image-container{width: 17%; left:43.25%; top:0.60rem;}
    
    .homeDesignation{width: 300%; left: 0%;}
    .scrollMore{font-size: 0.9rem;}
    .scrollSection{display: none;}
    .featuredContainer{display: none;}
    .featured{font-size: 1.4rem;}
    .featuredSubHead{padding-bottom: 2.5rem;}
    .featuredImage{position:relative; width: 75%; left: 11%;}
    .featuredTitle{font-size: 1.7rem;}
    .featuredCopy{width: 100%; font-size: 1.3rem; padding-bottom: 3rem; margin-top: 2rem;}
    .copyrightIndex{margin-top: -2rem; margin-bottom: -3rem;}

    .aboutContainer{display: none;}
    .aboutContainer-2{display: block;}
    .aboutTitle {font-size: 2.5rem;}
    .aboutCopy {font-size:1.2rem; width: 95%;}
    .copyrightAbout{margin-bottom: -3rem;}

    .copyrightGallery{margin-bottom: -3rem;}

    .projectContainer{display: none;}
    .projectTitle{font-size: 2rem;}
    .featuredCategory{font-size: 1.4rem;}
    .projectCopy{font-size: 1.2rem;}

    .PP-image{width:900%}
    footer{margin-bottom: 4rem;}
    .socialsContainer {gap: 50%; padding-left: 22%;}
    .socialsContainer-1 {gap:25%; padding-left: 15%;}
}

/* @media screen and (max-width: 765px){
    .aboutContainer{display: none;}
    .aboutTitle{font-size: 3.4rem;}
    .featuredCopy{font-size: 0.4rem;}
    .PP-image{width:900%}
}

@media screen and (min-width:766px){
    .aboutContainer-2{display: none;}
} */