/* Sets Up Format of Whole Page */

*{  

    box-sizing: border-box;

    color: #1F0812;

}

body{

    margin:0px;

}

h1{

    color:white;

}



/* Main Grid */

.mainGrid{

    display:grid;

    grid-template-columns: 1fr;

    margin-top: 70px;

    max-width: 100vw;

}

.mainItem{

    padding:1rem;

}



/* Navigation */

.nav{

    display:grid;

    grid-template-columns: 1fr 1fr;

    padding-left:2rem;

    padding-right:2rem;

    padding-top:1rem;

    padding-bottom:1rem;

    background-color:#1F0812;

    color:white;

    overflow: hidden;

    position: fixed; /* Set the navbar to fixed position */

    top: 0; /* Position the navbar at the top of the page */

    width: 100%; /* Full width */

    z-index: 3;

}

.navItem1{

    text-align: right;

}

.navItem1 img{

    width:2rem;

}

.navItem2{

    text-align:left;

    color:white;

    font-size: 1.5rem;

}



/*Hamburger*/

.bar1, .bar2, .bar3{

    width: 35px;

    height: 5px;

    /*background-color: #b0c89b;*/

    background-color: #90A583;

    margin: 6px 0;

    transition: 0.4s;

    border-radius: 3px;

}

.change .bar1{

    transform: translate(0, 11px) rotate(-45deg);

}

.change .bar2{

    opacity: 0;

}

.change .bar3{

    transform: translate(0, -11px) rotate(45deg);

}

#hamburger{

    padding: 20px;

    position: fixed;

    background-color: white;

    top: 71px;

    left: 0px;

    display: none;

    overflow: auto;

    border-radius: 0px 0px 3px 0px;

}

/* Styles the dropdown */

.burgerLink{

    padding:0.5rem;

}

.burgerLink a{

    text-decoration: none;

}

.burgerLink a:hover{

    opacity:0.8;

}



/* Hero Banner */

.section1{

    display:grid;

    grid-template-columns:1fr;

    background-color:#1F0812;

}

.hero{

    background-image:url('banners/banner4.jpg');

    background-size:cover;

    background-position: center;

    background-repeat:no-repeat;

    text-align: center;  

}

.banner{

    color:white;

    border-radius:10px;

    font-size:7rem;

    padding:2rem;

    margin-top:10rem;

    margin-bottom:10rem;

}

.banner img{

    aspect-ratio: 1 / 1;

    width:5rem;

}



/* About Us */

.aboutUs{

    display:grid;

    grid-template-columns: 1fr;

    color:white;

}

.aboutUsTitle{

    padding:1rem;

    text-align:center;

    padding-bottom: 0rem;

    font-size:1.5rem;

    font-family: Montserrat, sans-serif;

    color:white;

}

.aboutUsPara{

    font-size:2rem;

    padding:4rem;

    padding-top:0rem;

    font-family: 'Hind Madurai', sans-serif;

    margin-left:2rem;

    text-indent:50px;

    text-align:left;

}

.aboutUsTitle h1{

    color:white;

}

.aboutUsPara p{

    color:white;

}



/* Education */

.section2{

    display:grid;

    grid-template-columns: repeat(2, 1fr);

    background-color:#1F0812;

}

.educationSection{

    text-align:center;

    box-shadow: 2px 2px 5px #333;

    border-radius:3px;

    margin-top:1rem;

    margin-bottom:1rem;

    padding:2rem;

}

.programming{

    margin-right:1rem;

    background-image: linear-gradient(to bottom right, #708E9A, #54707D);

}

.recourses{

    margin-left:1rem;

    background-image: linear-gradient(to bottom right, #54707D, #37515F);

}

.educationTitle{

    font-family: Montserrat, sans-serif;

    padding:0rem;

}

.educationPara{

    font-family:'Hind Madurai', sans-serif;

    font-size:1.5rem;

}

.educationPara a:hover{

    opacity:0.5;

}

.educationLogo{

    height:3rem;

    vertical-align: middle;

    margin-right:1rem;

}



/* Future Opportunities */

.section3{

    display:grid;

    grid-template-columns:1fr;

    text-align: center;

    background-color:#1F0812;

}

.opportunitySection{

    display:grid;

    grid-template-columns: 1fr 1fr;

    margin-bottom: 1rem;

}

.certifications{

    background-image: linear-gradient(to bottom right, #37515F, #54707D); 

}

.colleges{

    background-image: linear-gradient(to bottom right, #54707D, #708E9A);

}

.opportunityList{

    margin:1rem;

    font-size:1.5rem;

    font-family:'Hind Madurai', sans-serif;

    padding:2rem;

    border-radius: 3px;

}

.opportunityTitle{

    font-size:2rem;

    font-family: Montserrat, sans-serif;

}

.opportunityJobSection{

    display:grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-gap:2rem;

}

.opportunityJobList{

    font-size:1.5rem;

    font-family:'Hind Madurai', sans-serif;

    border-radius:3px;

}

.jobCard{

    padding:1rem;

    border-radius: 3px;

}

.card1{

    background-image: linear-gradient(to bottom right, #708E9A, #678490);

}

.card2{

    background-image: linear-gradient(to bottom right, #678490, #5D7A86);

}

.card3{

    background-image: linear-gradient(to bottom right, #5D7A86, #54707D);

}

.card4{

    background-image: linear-gradient(to bottom right, #54707D, #4A6573);

}

.card5{

    background-image: linear-gradient(to bottom right, #4A6573, #415B69);

}

.card6{

    background-image: linear-gradient(to bottom right, #415B69, #37515F);

}



/* Class History */

.section4{

    display:grid;

    grid-template-columns: 1fr;

    background-color:#1F0812;

}

.classHistorySection{

    background-color:white;

    padding:1rem;

    margin: 1rem 0rem 1rem 0rem;

    border-radius:3px;

    background-image: linear-gradient(to bottom right, #37515F, #708E9A);

}

.classHistoryTitle{

    font-size:2rem;

    font-family: Montserrat, sans-serif;

    text-align:center;

}

/* Class Projects */

.classProjects{

    display:grid;

    grid-template-columns: repeat(2, 1fr);

    text-align:center;

    gap: 1rem;

}

.project{

    font-size:2rem;

    padding:2rem;

}

.project img{

    width:100%;

    height:auto;

    border-radius: 3px;

}

.projectLink{

    color:#333;

}

.projectLink a:hover{

    background-color:#787276;

    text-decoration:none;

}





/* Photos */

.section5{

    display:grid;

    grid-template-columns:1fr;

    grid-gap:2rem;

    background-color:#1F0812;

    text-align:center;

}

.classVisualSection{

    padding:2rem;

}

.classVisualTitle{

    grid-column: 1 / -1;

    text-align:center;

    font-size:2rem;

    font-family:  Montserrat, sans-serif;

}

.classVisualTitle h3{

    color:white;

}

.classPhotos{

    display:grid;

    grid-template-columns:1fr;

    background-image: linear-gradient(to bottom right, #708E9A, #54707D);

    border-radius: 3px;

    display:inline-block;

}

.photo{

    padding:1rem;

    text-align:center;

    height:30rem;

    margin-bottom:1rem;

}

.photo img{

    width:40rem;

}

.classVideos{

    display:grid;

    grid-template-columns: 1fr;

    z-index: 1;

    background-image: linear-gradient(to bottom right, #54707D, #37515F);

    border-radius:3px;

    display:inline-block;

}

.testimonial{

    text-align:center;

    padding-top:3.3rem;

    padding-bottom:3.3rem;

    height:30rem;

    padding:1rem;

}

.testimonial video{

    width:40rem;

}



/* Footer */

.section6{

    background-color: #1F0812;

}

.footer{

    font-family:'Hind Madurai', sans-serif;

    text-align:center;

}

.footer p{

    color: white;

}



/* CSS For Capstone Page */

.capstoneGrid{

    display:grid;

    grid-template-columns: 1fr;

    background-color:#1F0812;

    text-align: center;

    gap:1rem;

    font-size:2rem;

}

.capstones{

    display:grid;

    grid-template-columns: 1fr 1fr;

    background-color:white;

    border-radius: 3px;

    background-image: linear-gradient(to bottom right, #37515F, #708E9A);

}

.capstone{

    padding:2rem;

    font-size:2rem;

}

.capstone img{

    width:100%;

    height:auto;

    border-radius: 3px;

}

.capstoneTitle{

    grid-column:1 / -1;

    font-size:2rem;

}





/* Responsive Design */

@media screen and (max-width:850px){

    /* Main Grid */

    .mainGrid{

        grid-template-columns: 1fr;

    }



    /* Hero Banner */

    .section1{

        display:grid;

        grid-template-columns:1fr;

    }

    .hero{

        padding-top:2rem;

        padding-bottom:2rem;

        padding-left:5rem;

        padding-right:5rem;

        text-align:center;

    }

    .banner{

        font-size:2rem;

    }

    .aboutUsPara{

        margin-left:0rem;

        font-size:1.5rem;

        padding:2rem;

    }



    /* Education */

    .section2{

        display:grid;

        grid-template-columns: 1fr;

    }

    .programming{

        margin-right:0rem;

    }

    .recourses{

        margin-left:0rem;

    }



    /* Future Opportunities */

    .opportunitySection{

        display:grid;

        grid-template-columns: 1fr;

    }

    .opportunityJobSection{

        display:grid;

        grid-template-columns: 1fr;

    }

    .opportunityTitle{

        font-size:1rem;

    }



    /* Class History */

    .section4{

        display:grid;

        grid-template-columns: 1fr;

    }

    .mySpan{

        grid-column: 1 / 1;

    }

    .classHistoryTitle{

        font-size:1rem;

    }



    /* Class Projects */

    .classProjects{

        display:grid;

        grid-template-columns: 1fr 1fr;

    }

    .project{

        font-size:1.2rem;

        padding:1rem;

    }

    .project img{

        width:7rem;

    }



    /* photos */

    .section5{

        display:grid;

        grid-template-columns:1fr;

    }

    .classVisualSection{

        padding:0rem;

    }

    .classVisualTitle{

        grid-column: 1 / 1;

    }

    .photo img{

        width:18rem;

    }

    .testimonial video{

        width:18rem;

    }

    .photo{

        height:20rem;

    }

    .testimonial{

        height:20rem;

        padding-top:0rem;

        padding-bottom:0rem;

    }



    /* Capstones */

    .capstone{

        font-size:1.5rem;

        padding:1.5rem;

    }

}