* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

.navbar {
    display: flex;
    margin: 10px;
}

.logo {
    width: 100px;
}

.home-link {
    text-decoration: none;
}

.navbar p {
    color: rgb(1, 128, 1);
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 35px;
    margin-left: 20px;
    margin-top: 15px;
}

.nav-links {
    display: flex;
    list-style: none;
    margin-left: auto;
    margin-right: 20px;
    margin-top: 10px;
}

.nav-links li {
    padding: 15px 20px;
}

.nav-links li a {
    text-decoration: none;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 18px;
    color: black;
    padding: 12px 18px;
    border-radius: 5px;
    transition: 0.2s;
}

.nav-links li a:hover {
    text-decoration: none;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgb(255, 255, 255);
    background-color: rgb(13, 160, 0);
    transition: 0.2s;
}

.slogan {
    text-align: center;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: normal;
    font-size: 50px;
}

.mission-statement {
    text-align: center;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 30px;
    margin-top: 20px;
}

.branches {
    /* background-color: red; */
    margin-top: 100px;
    background-color: antiquewhite;
    padding-top: 50px;
    padding-bottom: 70px;
    border: 1px solid black;
    border-radius: 10px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* #indian-flag {
    max-width: 500px;
    height: 300px;
    background-color: orange;
}

#american-flag {
    width: 500px;
    height: 300px;
    background-color: blue;
    padding: 0 25px;
} */

.image-container {
    display: flex;
    justify-content: space-around;
}

#indian-flag {
    width: 100%;
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    object-position: left;
    border-radius: 10px;
}

#american-flag {
    width: 100%;
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    object-position: left;
    border-radius: 10px;
}

#usa-button {
    width: 100%;
    max-width: 500px;
    height: 300px;
    cursor: pointer;
    border: none;
    background-color: transparent;
}

#india-button {
    width: 100%;
    max-width: 500px;
    height: 300px;
    cursor: pointer;
    border: none;
    background-color: transparent;
}

.branches h2 {
    text-align: center;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 40px;
    font-weight: normal;
    margin-bottom: 50px;
}

.branches-to-what-we-do {
    width: 50%;
    margin: auto;
    margin-top: 80px;
    border: 1px solid black;
}

.what-we-do {
    /* background-color: red; */
    background-color: aliceblue;
    padding-top: 50px;
    padding-bottom: 120px;
}

.what-we-do h3 {
    text-align: center;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 50px;
    font-weight: normal;
}

.what-we-do ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    margin-top: 50px;
}

.what-we-do ul li {
    font-family:'Courier New', Courier, monospace;
    font-size: 45px;
    padding: 10px;
}

.what-we-do ul li span {
    /* color: rgb(13, 160, 0); */
    color: rgb(1, 103, 128);
    display: block;
    width: 400px;
    font-size: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.what-we-do-to-what-we-provide {
    width: 50%;
    margin: auto;
    margin-top: 30px;
    border: 1px solid black;
}

.what-we-provide {
    /* background-color: red; */
    background-color: aliceblue;
    padding-top: 50px;
    padding-bottom: 120px;
}

.what-we-provide h3 {
    text-align: center;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 50px;
    font-weight: normal;
}

.what-we-provide p {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 25px;
    margin-top: 50px;
    margin-left: 400px;
    margin-right: 400px;
    text-align: center;
    line-height: 1.8;
}

.what-we-provide-to-our-courses {
    width: 50%;
    margin: auto;
    margin-top: 30px;
    border: 1px solid black;
}

.our-courses {
    /* background-color: red; */
    background-color: aliceblue;
    padding-top: 50px;
    padding-bottom: 120px;
}

.our-courses h3 {
    text-align: center;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 50px;
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
}

.course-list {
    display: flex;
    justify-content: space-evenly;
    margin-top: 50px;
}

.course img {
    width: 25vw;
    height: 280px;
    object-fit: cover;
    border-radius: 10px;
    border-top-right-radius: 50px;
    margin: 0;
    z-index: -10;
    box-shadow: 6px 6px rgb(201, 201, 170);
}

.course-description {
    width: 25vw;
    height: 180px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 20px;
    /*background-color: #272629;*/
    background: linear-gradient(
        120deg,
        #4e7c7a 0%,
        #355e7c 60%,
        #22334a 100%
    );
    color: white;
    padding: 20px;
    margin-top: -10px;
    z-index: 10;
    position: relative;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    box-shadow: 6px 6px rgb(201, 201, 170);
}

.course-description span {
    font-size: 30px;
    display: block;
    margin-bottom: 15px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.title-and-button {
    display: flex;
    justify-content: space-between;
}

.invisible-button {
    visibility: hidden;
    margin-right: 70px;
    height: 60px;
    width: 180px;
    border: 1px solid black;
    border-radius: 10px;
    margin-top: 15px;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.visible-button {
    margin-right: 70px;
    margin-top: 15px;
    height: 60px;
    width: 180px;
    border: 2px solid rgb(82, 139, 70);
    border-radius: 30px;
    background-color: rgb(0, 0, 0);
    cursor: pointer;
    color: white;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    transition: 0.2s;
}

.visible-button:hover {
    background: rgb(13, 160, 0);
    transition: 0.2s;    
}

@media (max-width: 1500px) {
    .course img,
    .course-description {
        width: 350px;
    }
    .course-description span {
        font-size: 23px;
    }
    .course-description {
        font-size: 17px;
    }
}

@media (max-width: 1200px) {
    .nav-links li {
        padding: 5px;
    }
    #indian-flag {
        width: 90%;
        max-width: 500px;
        height: 300px;
        object-position: center;
    }
    #american-flag {
        width: 90%;
        max-width: 500px;
        height: 300px;
        object-position: center;
    }
    .what-we-do h3 {
        font-size: 40px;
    }
    .what-we-do ul li {
        font-size: 35px;
    }
    .what-we-do ul li span {
        font-size: 20px;
        width: 250px;
    }
    .what-we-provide h3 {
        font-size: 40px;
    }
    .what-we-provide p {
        margin-left: 10%;
        margin-right: 10%;
    }
    .our-courses h3 {
        font-size: 40px;
    }
    .course img,
    .course-description {
        width: 270px;
    }
    .course img {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }
    .course-description span {
        margin-bottom: 5px;
    }
    .course-description {
        font-size: 15px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }
}

@media (max-width: 1000px) {
    .course img,
    .course-description {
        width: 230px;
    }
}

@media (max-width: 750px) {
    .nav-links li a {
        font-size: 15px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .what-we-do ul li {
        font-size: 30px;
    }
    .what-we-do ul li span {
        font-size: 20px;
        width: 150px;
    }
    .course img,
    .course-description {
        width: 170px;
    }
    .course-description span {
        font-size: 20px;
    }
    .course-description {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .nav-links {
        margin-right: -10px;
    }
    .nav-links li a {
        font-size: 13px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .navbar img {
        width: 50px;
        height: 50px;
    }
    .navbar p {
        font-size: 20px;
    }
    .mission-statement {
        font-size: 25px;
        margin: 10px 10px;
    }
    .branches {
        padding-bottom: 20px;
    }
    .branches h2 {
        margin-bottom: 30px;
    }
    .image-container {
        flex-direction: column;
    }
    #american-flag {
        height: 70%;
        margin-bottom: 10px;
    }
    #indian-flag {
        height: 70%;
        margin-top: 10px;
    }
    #usa-button {
        height: 70%;
    }
    #india-button {
        height: 70%;
    }
    .what-we-do h3,
    .what-we-provide h3,
    .our-courses h3 {
        font-size: 35px;
    }
    .what-we-do ul li {
        font-size: 25px;
    }
    .what-we-do ul li span {
        font-size: 15px;
        width: 110px;
    }
    .what-we-provide p {
        font-size: 20px;
    }
    .visible-button {
        display: none;
    }
    .invisible-button {
        display: none;
    }
    /*.course img,
    .course-description {
        width: 120px;
    }
    .course img {
        border-radius: 10px;
    }
    .course-description {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        font-size: 10px;
        height: 150px;
    }
    .course-description span {
        font-size: 13px;
        margin-bottom: 2px;
        margin-top: -8px;
        color: rgb(145, 219, 248);
    }*/
    .course img {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        width: 350px;
    }
    .course-description span {
        font-size: 30px;
    }
    .course-description {
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        width: 350px;
        height: 180px;
        font-size: 20px;
    }
    .course-list {
        flex-direction: column;
        align-items: center;
    }
    .course-list div {
        margin: 25px 0;
    }
}