* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
body {
    background: 
      linear-gradient(135deg,#0000 20.5%,#f8f8f8 0 29.5%,#0000 0) 0 5px,
      linear-gradient( 45deg,#0000 8%,#f8f8f8 0 17%, #0000 0 58%) 10px 0,
      linear-gradient(135deg,#0000 8%,#f8f8f8 0 17%, #0000 0 58%,#f8f8f8 0 67%,#0000 0),        
      linear-gradient( 45deg,#0000 8%,#f8f8f8 0 17%, #0000 0 58%,#f8f8f8 0 67%,#0000 0 83%,#f8f8f8 0 92%,#0000 0),
      #ffffff;
    background-size: 20px 20px;
}

.indexBody section {
    padding: 75px 0;
}

.dark-bg {
    /* background: 
      linear-gradient(135deg,#0000 20.5%,#070707 0 29.5%,#0000 0) 0 5px,
      linear-gradient( 45deg,#0000 8%,#070707 0 17%, #0000 0 58%) 10px 0,
      linear-gradient(135deg,#0000 8%,#070707 0 17%, #0000 0 58%,#070707 0 67%,#0000 0),        
      linear-gradient( 45deg,#0000 8%,#070707 0 17%, #0000 0 58%,#070707 0 67%,#0000 0 83%,#070707 0 92%,#0000 0),
      #000000;
    background-size: 20px 20px; */

    background-image: url("./images/Index/background/dark-bg.jpg");
    color: white;
}

.indexHead1 {
    text-align: center;
    padding-bottom: 75px;
    font-size: 50px;
    font-style: italic;
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
}

.indexHead1 span{
    margin: 0 15px;
    color: rgb(219, 15, 15);
}

.navContainer {
    z-index: 11;
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

    height: 80px;
    width: 100%;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);

    background: 
        repeating-linear-gradient( 45deg,#0000 calc(-650%/13) calc(50%/13),#000000 0 calc(100%/13),
        #0000 0 calc(150%/13),#000000 0 calc(200%/13),
        #0000 0 calc(250%/13),#000000 0 calc(300%/13)),repeating-linear-gradient( 45deg,#0000 calc(-650%/13) calc(50%/13),#000000 0 calc(100%/13),
        #0000 0 calc(150%/13),#000000 0 calc(200%/13),
        #0000 0 calc(250%/13),#000000 0 calc(300%/13)) 10px 10px,
        repeating-linear-gradient(-45deg,#0000 calc(-650%/13) calc(50%/13),#000000 0 calc(100%/13),
        #0000 0 calc(150%/13),#000000 0 calc(200%/13),
        #0000 0 calc(250%/13),#000000 0 calc(300%/13)),repeating-linear-gradient(-45deg,#0000 calc(-650%/13) calc(50%/13),#000000 0 calc(100%/13),
        #0000 0 calc(150%/13),#000000 0 calc(200%/13),
        #0000 0 calc(250%/13),#000000 0 calc(300%/13)) 10px 10px #111111;
    background-size: 20px 20px;
}

.navSpace {
    height: 80px;
    width: 100%;
}

.navLogoContainer {
    position: relative;
    display: flex;
    width: max-content;
    align-items: center;
}

.navLogoContainer img {
    height: 50px;
    width: 50px;
}

.navLogoContainer a {
    margin-left: 10px;
    font-size: 30px;
    text-decoration: none;
    font-family: 'Play', sans-serif;
    font-weight: bold;
    color: white;
}

.navItems {
    position: relative;
    width: max-content;
    height: min-content;
    text-decoration: none;
    font-family: 'Play', sans-serif;
    font-weight: 600;
    color: white;
}

.navItems:hover {
    color: #ff0000;
}

.navItems:hover::before {
    transform: scaleX(1);
}

.navItems::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: #ff0000;
    transform: scaleX(0);
    transform-origin: top left;
    transition: transform 0.5s ease;
}

.navDropdown {
    position: relative;
    display: inline-block;
}

.navDropdown-content {
    z-index: 1;
    display: none;
    position: absolute;
    top: 25px;
    left: -12px;
    font-size: 14px;
    width: max-content;
    border-radius: 10px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    background-color: #f9f9f9;
}

.navDropdown-content a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    border-radius: 5px;
    font-family: 'Play', sans-serif;
    color: black;
}

.navDropdown-content a:hover {
    background-color: #ff0000;
    color: white;
}

.navDropdown:hover .navDropdown-content {
    display: block;
}

.navLogin {
    padding: 10px 16px;
    text-decoration: none;
    font-family: 'Play', sans-serif;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 2px solid #00000000;
    background-color: red;
    color: aliceblue;

    transition: 1s;
}

.navJoinUs {
    padding: 10px 16px;
    text-decoration: none;
    font-family: 'Play', sans-serif;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 2px solid #00000000;
    background-color: red;
    color: aliceblue;

    transition: 1s;
}

.navLogin:hover,
.navJoinUs:hover {
    background-color: #000000;
    border: 2px solid red;
    border-color: #ff0000;
}

.navSpace {
    height: 80px;
    width: 100%;
}

/* - - - - -   Landing Page Poster - - - - -   */

.landingPage {
    /* margin-top: 80px; */
    position: relative;
    height: max-content;
    background-color: black;
}

.landingPage img {
    width: 100%;
}

.black-layer {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
}

.landingContent {
    margin: auto;
    text-align: center;
    font-family: 'Kanit', sans-serif;
}

.landingContent h3 {
    font-style: italic;
    font-weight: 600;
    color: #ff0000;
}

.landingContent h2 {
    margin: 50px 0;
    font-size: 80px;
    font-style: italic;
    font-weight: 800;
    line-height: 90px;
    color: white;
}

.landingContent a {
    margin: auto;
    padding: 14px 22px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: max-content;
    text-decoration: none;
    font-weight: 500;
    align-items: center;
    border-radius: 30px;
    border: 2px solid rgba(255, 0, 0, 0);
    background-color: rgb(255, 0, 0);
    color: white;

    transition: 1s;
}

.landingContent a:hover {
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid rgb(255, 0, 0);
    border-color: #ff0000;
}

.landingContent svg {
    margin-left: 5px;
    fill: white;
    height: 20px;
    width: 20px;
}

/* - - - - -  Index - Birthday - - - - -   */

.birthdaySec {
    text-align: center;
    background-image: url("./images/Index/birthday/bg.jpg");
    background-size: cover;
}


/* - - - - -  Index - Section - 2  (About Ijska) - - - - -   */

.aboutIjska {
    margin: auto;
    width: 70%;
    text-align: center;
}

.aboutIjskaCont p {
    font-size: 20px;
}

.faculties {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}

.facultyCard {
    margin: 0 50px;
    border-radius: 12px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;

    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.faculties img {
    height: 300px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.facultyCardCont {
    background-color: #b70000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.facultyCardCont h3 { 
    padding: 10px 0;
    word-spacing: 3px;
}

.facultyCardCont p {
    padding-bottom: 10px;
    font-size: 10px;
    letter-spacing: 2px;
}

/* - - - - -  Index - Section - 2  (Features) - - - - -   */

.karateFeaturesContainer {
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
    width: 70%;
}

.feature {
    padding: 20px;
    /* height: 175px; */
    box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
    background-color: rgba(255, 255, 255, 0.2);
}

.feature h3{
    margin-bottom: 20px;
    font-style: italic;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-transform: uppercase;
    color: red;
}

/* ---------------- Ijska Key ------------- */

.index-section-2 {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* background-color: white; */
}

.whyIjskaContainer {
    z-index: 1;
    height: max-content;
    width: 100%;
    border-radius: 20px;
    /* background-color: rgb(255, 255, 255); */

    /* box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px; */
}

.whyIjskaContainer h2 {
    padding: 50px 0;
    text-align: center;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 40px;
    background-color: #ab0000;
    color: white;
    opacity: 1;
    background: linear-gradient(135deg, #bb000055 25%, transparent 25%) -4px 0/ 8px 8px, linear-gradient(225deg, #bb0000 25%, transparent 25%) -4px 0/ 8px 8px, linear-gradient(315deg, #bb000055 25%, transparent 25%) 0px 0/ 8px 8px, linear-gradient(45deg, #bb0000 25%, #ab0000 25%) 0px 0/ 8px 8px;
}

.whyIjskaCardContainer {
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 40px;
    row-gap: 40px;
}

.whyIjskaCard {
    position: relative;
    margin: auto;
    height: 330px;
    width: 100%;
    max-width: 300px;
    border-radius: 10px;
    overflow: hidden;
}

.whyIjskaCard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: 0.5s all ease-in-out;
}

.whyIjskaCard:hover img {
    transform: scale(1.5);
}

.whyIjskaCard div {
    z-index: 1;
    padding-bottom: 20px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;

    background-image: linear-gradient(to top, rgb(152, 0, 0.95), rgba(162, 0, 0, 0.95), rgba(162, 0, 0, 0.95), rgba(182, 0, 0, 0.8), rgba(192, 0, 0, 0.6), rgba(198, 0, 0, 0.4), rgba(205, 0, 0, 0.3), rgba(211, 0, 0, 0.3), rgba(215, 0, 0, 0.3), rgba(219, 0, 0, 0.3), rgba(223, 0, 0, 0.3), rgba(227, 0, 0, 0.3));
}

.whyIjskaCard div h3 {
    color: white;
    font-size: 40px;
    font-family: 'Saira Condensed', sans-serif;
}

/* ----------Accredition Sectiom ---------- */
.accreditionSection{
    padding: 0 200px;
    text-align: center;
    color: white;

    /* background: 
      radial-gradient(farthest-side at -33.33% 50%,#0000 52%,#000000 54% 57%,#0000 59%) 0 calc(40px/2),
      radial-gradient(farthest-side at 50% 133.33%,#0000 52%,#000000 54% 57%,#0000 59%) calc(40px/2) 0,
      radial-gradient(farthest-side at 133.33% 50%,#0000 52%,#000000 54% 57%,#0000 59%),
      radial-gradient(farthest-side at 50% -33.33%,#0000 52%,#000000 54% 57%,#0000 59%),
      #111111;
    background-size: calc(40px/4.667) 40px,40px calc(40px/4.667); */
}
.accrdContainer{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.accrContent{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.accrContent img{
    margin: 0 60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255);
    background-color: #ffffff;
}
.accrContent p{
    padding-top: 15px;
}
.accrContent h5{
    padding-top: 4px;
    color: rgba(255, 255, 255, 0.5);
}
.accreditionSection button{
    margin-top: 40px;
    padding: 8px 20px;
    cursor: pointer;
    border: 1px solid white;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.2);
}
.accreditionSection button:hover{
    color: rgb(0, 30, 56);
    border: 1px solid rgb(15, 76, 151);
    background-color: rgb(255, 255, 255);
}


/* - - - - -  Index - Section - 3  (Testimonials)  - - - - -   */


/* ----------Testimonial Section ---------- */
.testimonialSection{
    padding: 0 200px;
    color: white;
    text-align: center;
}
.testimonialContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.mySlides {
    display:none;
    margin: 0 70px;
    text-align: center;
}
.mySlides img{
    margin-bottom: 50px;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* background-image: url("./images/Index/bg.JPG"); */
    background-color: rgb(198, 198, 198);
    background-size: cover;
}
.mySlides p{
    margin: 20px 0;
    font-style: italic;
}
.mySlides p span{
    color: rgb(0, 0, 0);
}
.mySlides h4{
    font-style: italic;
}
.slideBtn{
    padding: 15px 20px;
    height: 50px;
    border-radius: 2px;
    cursor: pointer;
    border: 1px solid white;
    color: rgb(0, 30, 56);
    background-color: white;
}

.slideBtn:hover{
    color: white;
    background-color: rgb(128, 0, 0);
}

/* - - - - -  Footer  - - - - - ❌❌❌❌❌❌❌❌❌❌*/

.footer {
    margin: auto;
    padding: 75px 0;
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 1fr;
    width: 90%;
    font-style: italic;
}

.footer h2 {
    font-family: 'Play', sans-serif;
    color: red;
}

.footer h3 {
    margin-bottom: 15px;
    font-family: 'Play', sans-serif;
    color: red;
}

.footer iframe {
    height: 120px;
    width: 200px;
}

.footer a {
    color: black;
}

.fb {
    padding: 10px 0 25px 10px;
    background-image: radial-gradient(circle, #950000, #ae0003, #c90002, #e40001, #ff0000);
    border-radius: 5px;
    width: 100px;
}

.insta {
    padding: 10px 0 25px 10px;
    background-image: radial-gradient(circle, #003361, #00305c, #002d56, #002b51, #00284c);
    border-radius: 5px;
    width: 100px;
}

.fb a, .insta a {
    text-decoration: none;
    color: rgb(255, 255, 255);
}

.copyright {
    padding: 10px 0;

    display: flex;
    flex-direction: row;
    justify-content: center;

    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    background-color: #000000;
}

.copyright a {
    color: rgba(255, 255, 255, 0.5);
}

/* - - - - -  Academics - Section - 1 (Poster)  - - - - - ❌❌❌❌❌❌❌❌❌❌*/

.academics-section-1 {
    position: relative;
}

.academics-section-1 img {
    width: 100%;
    background-size: contain;
}

.academicsPoster {
    margin: auto;
}

.academicsPoster p {
    font-size: 100px;
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    font-style: italic;
    color: rgb(255, 255, 255);
}

.acadBody {
    height: 100%;
    width: 100%;
    background-color: #003a5c;
    opacity: 1;
    background-image: linear-gradient(30deg, #00294b 12%, transparent 12.5%, transparent 87%, #00294b 87.5%, #00294b), linear-gradient(150deg, #00294b 12%, transparent 12.5%, transparent 87%, #00294b 87.5%, #00294b), linear-gradient(30deg, #00294b 12%, transparent 12.5%, transparent 87%, #00294b 87.5%, #00294b), linear-gradient(150deg, #00294b 12%, transparent 12.5%, transparent 87%, #00294b 87.5%, #00294b), linear-gradient(60deg, #00294b77 25%, transparent 25.5%, transparent 75%, #00294b77 75%, #00294b77), linear-gradient(60deg, #00294b77 25%, transparent 25.5%, transparent 75%, #00294b77 75%, #00294b77);
    background-size: 8px 14px;
    background-position: 0 0, 0 0, 4px 7px, 4px 7px, 0 0, 4px 7px;
    ;
}

.acadContainer {
    padding: 50px;
    font-family: 'Saira Condensed', sans-serif;
}

.belt {
    margin: auto;
    width: 95%;
    /* max-width: 1800px; */
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.75);
}

.kyuNumber {
    padding: 10px 40px;
    width: 100%;
    font-weight: 600;
    border-radius: 5px;
    border: 1px solid white;
    color: white;
}
.kyu10 {
    color: red;
}

.kyu9 {
    background-color: white;
    color: rgb(3, 31, 56);
}

.kyu8 {
    background-color: yellow;
    color: rgb(3, 31, 56);
}

.kyu7 {
    background-color: orange;
}

.kyu6 {
    background-color: green;
}

.kyu5 {
    background-color: #091bb9;
}

.kyu4 {
    background-color: purple;
}

.kyu3 {
    background-color: #7a2222;
}

.kyu2 {
    background-color: #7a2222;
}

.kyu1 {
    background-color: #7a2222;
}

.beltCont {
    padding: 40px;
}

.beltCont h3 {
    margin-bottom: 10px;
    text-decoration: underline;
    color: rgb(202, 0, 0);
}

.beltCont h4 {
    margin-bottom: 5px;
    text-decoration: underline;
}

.beltCont p {
    margin-bottom: 3px;
}

.punblokik {
    margin-bottom: 5px;
    text-decoration: underline;
}

.stancesCont {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 50px;
    width: 100%;
}

/* - - - - -  Students & Instructor - Section - 2  - - - - - ❌❌❌❌❌❌❌❌❌❌*/

.student-section {
    padding: 50px;
    text-align: center;
    font-family: 'Kanit', sans-serif;
}

.studentCardContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.beltNameStud {
    padding: 50px 0;
    text-transform: uppercase;
    font-size: 50px;
    font-style: italic;
}

.student-card {
    margin: 20px 10px;
    /* border: 1px solid rgba(112, 97, 0, 0.5); */
    border: 1px solid rgba(112, 97, 0, 0.4);
    width: min-content;
    border-radius: 20px;
}

.student-card div {
    padding: 20px 0;
    border-radius: 20px;
    border: 2px solid rgba(120, 120, 120, 0.1);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.student-card img {
    height: 240px;
    width: 210px;
    border-radius: 20px;
    border: 2px solid rgba(120, 120, 120, 0.1);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.instTitle {
    margin: auto;
    width: max-content;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-style: italic;
    color: rgb(70, 70, 70);
}

.student-card h4 {
    padding-bottom: 5px;
    text-transform: uppercase;
    font-size: 20px;
    font-style: italic;
}

.student-card p {
    font-size: 12px;
    text-transform: uppercase;
    font-style: italic;
}

.student-card button {
    display: none;
    background-color: white;
    border: none;
}

#certificate-btn {
    height: 20px;
    width: 20px;
    cursor: pointer;
}

/* - - - - -  Certificate  - - - - - ❌❌❌❌❌❌❌❌❌❌*/

.certificateBody {
    margin: auto;
}

.certificateCont {
    margin: auto;
    margin-top: 5%;
    width: 800px;
    height: 556px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
    background-image: url("./images/student/certificate.jpeg");
    background-size: cover;
}

.certificateCont div {
    position: absolute;
}

.certificateCont div h3, h4, p {
    position: relative;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-style: italic;
}

.certificateCont div h3 {
    top: 288px;
    left: 340px;
}

.certificateCont div h4 {
    top: 332px;
    left: 470px;
}

.certificateCont div p {
    top: 282px;
    left: 610px;
}

.certificateCont div h2 {
    position: relative;
    font-family: 'Stalemate', cursive;
}

#chiefExam {
    top: 395px;
    left: 260px;
    font-size: 25px;
}

#chiefInst {
    top: 358px;
    left: 620px;
    font-size: 25px;
}

/* - - - - -  Dojos  - - - - - ❌❌❌❌❌❌❌❌❌❌*/

.dojoContainer {
    padding: 50px;
    font-family: 'Kanit', sans-serif;

    background: 
      linear-gradient(135deg,#0000 20.5%,#f8f8f8 0 29.5%,#0000 0) 0 5px,
      linear-gradient( 45deg,#0000 8%,#f8f8f8 0 17%, #0000 0 58%) 10px 0,
      linear-gradient(135deg,#0000 8%,#f8f8f8 0 17%, #0000 0 58%,#f8f8f8 0 67%,#0000 0),        
      linear-gradient( 45deg,#0000 8%,#f8f8f8 0 17%, #0000 0 58%,#f8f8f8 0 67%,#0000 0 83%,#f8f8f8 0 92%,#0000 0),
      #ffffff;
    background-size: 20px 20px;
}
.dojo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    font-family: 'Play', sans-serif;
}
.dojoContent {
    padding-bottom: 15px;
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 200px;
    width: 320px;
    border-radius: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    background-color: rgba(255, 255, 255, 0.3);
}

.dojoContent h3 {
    padding: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
    background-color: rgb(205, 0, 0)
}

.dojoContent p {
    padding: 0 20px;
}

/* - - - - -  Achievements  - - - - - ❌❌❌❌❌❌❌❌❌❌*/

.achievementSection {
    padding: 50px;
    background-color:rgba(0, 41, 75, 0.2);
}

.achievementContainer {
    padding: 25px;
    margin: auto;
    display: grid;
    grid-template-columns: 3fr 4fr;
    column-gap: 20px;
    width: 90%;
    max-width: 800px;

    border-radius: 15px;

    background-color: #ffffff;
    opacity: 1;
    background-image:  repeating-linear-gradient(45deg, #a8a8a8 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0), repeating-linear-gradient(45deg, #f0f0f0 25%, #ffffff 25%, #ffffff 75%, #f0f0f0 75%, #f0f0f0);
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;

    box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
}

.achProPic {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.achProPic img{
    z-index: 1;
    margin: auto;
    width: 100%;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.achProPic div{
    position: absolute;
    left: 15%;
    height: 100%;
    width: 70%;
    border-radius: 20px;
    background-color:rgba(0, 41, 75, 0.2);
}


.achContent {
    padding: 0 25px;
    height: max-content;
    font-family: 'Saira Condensed', sans-serif;
}

.circleList {
    padding: 0 20px;
    list-style-type: circle;
}

.yearList{
    font-weight: bold;
}

.squareList {
    margin: 5px 0;
    padding: 0 20px;
    list-style-type: square;
}

.achContent h1{
    margin-bottom: 20px;
    font-size: 30px;
    font-style: italic;
    color: red;
    font-family: 'Kanit', sans-serif;

}

/* ------------❎❎❎--------------- Events ----------------❎❎❎------------ */

.eventSection{
    padding: 50px;
    /* background-color: #011e38; */
    background: 
      linear-gradient(135deg,#0000 20.5%,#070707 0 29.5%,#0000 0) 0 5px,
      linear-gradient( 45deg,#0000 8%,#070707 0 17%, #0000 0 58%) 10px 0,
      linear-gradient(135deg,#0000 8%,#070707 0 17%, #0000 0 58%,#070707 0 67%,#0000 0),        
      linear-gradient( 45deg,#0000 8%,#070707 0 17%, #0000 0 58%,#070707 0 67%,#0000 0 83%,#070707 0 92%,#0000 0),
      #000000;
    background-size: 20px 20px;
} 
.eventToggle{
    text-align: center;
}
.eventToggle button{
    margin-bottom: 50px;
    padding: 10px;
    width: 200px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid white;
    color: #011e38;

    transition-duration: 1.5s;
}
.eventToggle button:hover{
    background-color: greenyellow;
}
.eventBtnTranslate{
    transform: translate(0,-5px);
}
.upcomingEBActivate{
    transform: translate(0,-5px);
    background-color: greenyellow;
}
/* upcoming event  */
.eventContainer{
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1000px;
    height: relative;
    color: rgba(3, 31, 56);
    background-color: rgb(255, 255, 255);
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.15), 0 6px 20px 0 rgb(255, 255, 255, 0.15);
}
.eventImg{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.eventImgLogo{
    z-index: 1;
    position: absolute;
    top: 10px;
    left: 30px;
}
.eventImgLogo img{
    width: 100px;
    height: 100px;
}
.eventcardec{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background-color: white;
}
.eventcardec div{
    width: 30px;
    height: 60%;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    background-color: #870000;
}
.eventImgMainImg{
    margin: auto;
    width: 70%;
}
.eventContent{
    position: relative;
    padding: 40px;
    border-bottom-right-radius: 130px;
    color: white;
    background-color: #870000;
}
.eventcardecContent{
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 50%;
    border-bottom-left-radius: 80px;
    background-color: white;
}
.eventContent h1{
    font-size: 35px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.eventContent h5{
    padding-top: 10px;
    font-size: 25px;
    color: rgb(173, 173, 173);
}
.eventDateTimeContainer{
    margin: 30px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif ;
    color: rgba(255, 255, 255, 0.571);
}
.eventDateTimeContainer div:nth-child(1){
    grid-row: 1/3;
}
.eventDateTimeContainer h5{
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}
.eventDateTimeContainer p{
    font-size: 16px;
    color: white;
}

.eventContentbuttonCont{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.eventContent button{
    padding: 15px;
    font-size: 18px;
    font-weight: 500;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid green;
    color: #011e38;
    background-color: rgb(242, 255, 0);
}
.eventContent button:hover{
    transition: 1s;
    background-color: rgb(136, 255, 0);
}
.eventFormDownload{
    margin: 40px 0;
    width: 100%;
    text-align: center;
}
.eventFormDownload a{
    padding: 10px 20px;
    width: max-content;
    text-decoration: none;
    cursor: pointer;
    border-radius: 5px;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}
.eventFormDownload a:hover{
    transition: 1s;
    background-color: rgb(136, 255, 0);
}



/* Event Instructions  */
.eventInstructions{
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    max-width: 1000px;
    color: white;
    background-color: rgba(0, 79, 128, 0.5);
}
.eventInstructions h1{
    padding: 15px;
    text-align: center;
}
.eventInstructions p{
    padding-bottom: 10px;
}
/* Past event */
#pastEvent{
    display: none;
    font-size: 50px;
    text-align: center;
    color: white;
}





/*❌❌❌❌❌❌❌❌❌❌  - - - - -  Hidden Responsive Elements  - - - - - ❌❌❌❌❌❌❌❌❌❌*/

/* Navbar Hamburger  */
.hamburger {
    display: none;
}

.respNavContainer {
    display: none;
}

/* Mobile Landing Imgage */
#resplandingImg {
    display: none;
}

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

    /* - - - - -  Start of Landing Page poster - - - - - */

    .landingContent h3 {
        font-size: 16px;
    }

    .landingContent h2 {
        margin: 35px 0;
        font-size: 65px;
        line-height: 60px;
    }

    .landingContent a {
        padding: 10px 16px;
        border-radius: 25px;
    }

    /* ------------ Heading Index Page ----------- */

    .indexHead1{
        padding-bottom: 50px;
        font-size: 40px;
    }

    /* - - - - -  Index - Section - 2  (About Ijska) - - - - -   */
    .indexBody section{
        padding: 50px 0;
    }
    .aboutIjska {
        width: 80%;
    }

    .aboutIjskaCont p {
        font-size: 18px;
    }

    /* - - - - -  Index - Section - 2  (Features) - - - - -   */

    .karateFeaturesContainer {
        width: 80%;
    }

    /* - - - - -  Start of Section 2 >> Why Ijska - - - - - */

    .whyIjskaContainer h2 {
        padding: 35px 0;
        font-size: 30px;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
    }

    .whyIjskaCardContainer {
        padding: 40px;
        column-gap: 30px;
        row-gap: 30px;
    }

    .whyIjskaCard {
        height: 300px;
        max-width: 280px;
    }

    .whyIjskaCard div {
        padding-bottom: 15px;
    }

    .whyIjskaCard div h3 {
        font-size: 30px;
    }

    /* ----------Accredition Sectiom ---------- */
    .accreditionSection{
        padding: 0 150px;
    }
    .accrContent img{
        margin: 0 80px;
        width: 180px;
    }
    .accrContent p{
        padding-top: 14px;
    }
    .accreditionSection button{
        margin-top: 30px;
        padding: 6px 16px;
    }

    /* ----------Testionial Section ---------- */
    .testimonialSection{
        padding: 0 150px;
    }
    .mySlides {
        margin: 0 60px;
    }
    .mySlides img{
        height: 150px;
        width: 150px;
    }
    .mySlides p{
        margin: 18px 0;
    }
    .slideBtn{
        padding: 10px 18px;
        height: 45px;
    }

    .footer {
        padding: 50px 0;
    }

    /* ----------Dojos ---------- */

    .dojoContainer {
        padding: 40px;
    }

    .dojoContent {
        padding-bottom: 15px;
        margin: 15px;
        height: 200px;
        width: 260px;
    }
    
    .dojoContent h3 {
        padding: 15px;
    }
    
    .dojoContent p {
        padding: 0 15px;
    }

}

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

    /* - - - - -  Start of Navbar - - - - - */

    .navContainer,
    .navSpace {
        height: 65px;
    }

    .navLogoContainer img {
        height: 35px;
        width: 35px;
    }

    .navLogoContainer a {
        margin-left: 10px;
        font-size: 25px;
    }

    .navItems {
        font-size: 14;
    }

    .navDropdown-content {
        font-size: 12;
    }

    .navDropdown-content a {
        padding: 8px 10px;
    }

    .navLogin,
    .navJoinUs {
        padding: 8px 10px;
    }
    
    .navSpace {
        height: 65px;
        width: 100%;
    }

    /* - - - - -  Start of Landing Page poster - - - - - */

    /* .landingPage {
        margin-top: 65px;
    } */

    .landingContent h3 {
        font-size: 14px;
    }

    .landingContent h2 {
        margin: 25px 0;
        font-size: 50px;
        line-height: 50px;
    }

    .landingContent a {
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 20px;
    }

    .landingContent svg {
        margin-left: 3px;
        height: 16px;
        width: 16px;
    }

    .faculties {
        margin-top: 40px;
    }
    
    .facultyCard {
        margin: 0 40px;
    }
    
    .faculties img {
        height: 250px;
        width: 220px;
    }
    
    .facultyCardCont h3 {
        font-size: 16px;
    }
    
    .facultyCardCont p {
        font-size: 12px;
    }

    /* - - - - -  Start of Section 2 >> Why Ijska - - - - - */

    .whyIjskaContainer h2 {
        padding: 25px 0;
        font-size: 25px;
    }

    .whyIjskaCardContainer {
        padding: 25px;
        column-gap: 20px;
        row-gap: 20px;
    }

    .whyIjskaCard {
        height: 250px;
        max-width: 220px;
    }

    .whyIjskaCard div {
        padding-bottom: 10px;
    }

    .whyIjskaCard div h3 {
        font-size: 25px;
    }

    /* ------------ Heading Index Page ----------- */

    .indexBody section{
        padding: 40px 0;
    }

    .indexHead1{
        padding-bottom: 40px;
        font-size: 35px;
    }

    /* - - - - -  Index - Section - 2  (About Ijska) - - - - -   */

    .aboutIjska {
        width: 85%;
    }

    .aboutIjskaCont p {
        font-size: 16px;
    }

    /* - - - - -  Index - Section - 2  (Features) - - - - -   */

    .featuresSection {
        padding: 40px 0;
    }

    .karateFeaturesContainer {
        width: 90%;
    }

    /* ----------Accredition Sectiom ---------- */
    .accreditionSection{
        padding: 0 100px;
    }
    .accrdContainer{
        padding-top: 30px;
    }
    .accrContent img{
        margin: 0 60px;
        width: 150px;
        height: 150px;
    }
    .accrContent p{
        padding-top: 12px;
    }
    .accreditionSection button{
        margin: 20px 0;
        padding: 4px 12px;
    }

    /* ----------Testionial Section ---------- */
    .testimonialSection{
        padding: 0 100px;
    }
    .mySlides {
        margin: 0 50px;
    }
    .mySlides img{
        margin-bottom: 35px;
        height: 120px;
        width: 120px;
    }
    .mySlides p{
        margin: 18px 0;
    }
    .slideBtn{
        padding: 8px 16px;
        height: 35px;
    }

    /* - - - - -  Footer  - - - - - */

    .footer {
        padding: 40px 0;
        display: grid;
        grid-template-columns: 2fr 2fr 2fr 1fr;
        width: 90%;
    }

    .footer h2 {
        font-size: 20px;
    }

    .footer h3 {
        margin-bottom: 10px;
    }

    .fb, .insta {
        padding: 10px 0 20px 10px;
        width: 80px;
    }

    .footer iframe {
        height: 100px;
        width: 160px;
    }

    /* ----------------Academics Section-------------- */

    .academicsPoster p {
        font-size: 70px;
    }

    .acadContainer {
        padding: 20px;
    }

    .stancesCont {
        column-gap: 35px;
    }

    /* - - - - -  Students - Section - 2  - - - - - */

    .student-section {
        padding: 30px;
    }

    .beltNameStud {
        padding: 30px 0;
        font-size: 30px;
    }

    .student-card {
        margin: 15px 10px;
        border-radius: 15px;
    }

    .student-card img {
        height: 200px;
        width: 175px;
        border-radius: 15px;
    }

    .student-card div {
        padding: 15px 0;
        border-radius: 15px;
    }
    
    .student-card h4 {
        font-size: 17px;
    }


    /* - - - - -  Achievements  - - - - - */

    .achievementSection {
        padding: 30px;
    }

    .achievementContainer {
        grid-template-columns: 2fr 3fr;
    }

    /* ----------Dojos ---------- */

    .dojoContainer {
        padding: 30px;
    }

    .dojoContent {
        padding-bottom: 10px;
        margin: 12px;
        height: 160px;
        width: 200px;
    }
    
    .dojoContent h3 {
        padding: 12px;
        font-size: 18px;
    }
    
    .dojoContent p {
        padding: 0 12px;
        font-size: 14px;
    }

    /*----------------Event Section-------------- */

    .eventSection{
        padding: 35px;
    }

    .eventcardec div{
        width: 25px;
        height: 60%;
        border-top-right-radius: 80px;
        border-bottom-right-radius: 80px;
    }

    .eventImgMainImg{
        margin: auto;
        width: 70%;
    }

    .eventContent{
        padding: 30px;
        border-bottom-right-radius: 200px;
    }
    
    .eventcardecContent{
        width: 25px;
        border-bottom-left-radius: 180px;
    }

    .eventContent h1{
        font-size: 30px;
    }

    .eventContent h5{
        padding-top: 5px;
        font-size: 20px;
    }

    .eventDateTimeContainer{
        margin: 20px 0;
        row-gap: 8px;
    }

    .eventDateTimeContainer h5{
        font-size: 12px;
    }

    .eventDateTimeContainer p{
        font-size: 14px;
    }

    .eventContent button{
        padding: 12px;
        font-size: 16px;
        font-weight: 500;
    }

    /* ----------copyright ---------- */
    
    .copyright p, a {
        font-size: 12px;
    }
}

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

    /* - - - - -  Start of Navbar - - - - - */

    .navContainer {
        padding: 0 20px;
        justify-content: space-between;
    }

    /* Hiding Nav-elements */
    .navItems,
    .navDropdown,
    .navLoginJoinBtn {
        display: none;
    }

    .hamburger {
        display: block;
        cursor: pointer;
    }

    #close {
        display: none;
    }

    .hamburger svg {
        fill: white;
        height: 35px;
        width: 35px;
    }

    .respNavContainer {
        z-index: 2;
        margin: auto;
        position: fixed;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
        width: 100%;
        height: 90%;
        background-color: rgb(255, 255, 255);
    }

    .respNavContainer a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
        font-family: 'Play', sans-serif;
        color: black;

        transition: 0.5s;
    }

    .respNavContainer a:hover {
        background-color: #ff0000;
        color: white;
    }

    /* - - - - -  Start of Landing Page poster - - - - - */

    .landingContent h3 {
        font-size: 12px;
    }

    .landingContent h2 {
        margin: 20px 0;
        font-size: 35px;
        line-height: 35px;
    }

    .landingContent a {
        padding: 4px 8px;
        font-size: 12px;
        border-radius: 15px;
    }

    .landingContent svg {
        margin-left: 3px;
        height: 12px;
        width: 12px;
    }

    /* - - - - -  Start of Section 2 >> Why Ijska - - - - - */

    .whyIjskaContainer h2 {
        padding: 15px 0;
        font-size: 20px;
    }
    
    .whyIjskaCardContainer {
        padding: 15px;
        column-gap: 10px;
        row-gap: 10px;
    }

    .whyIjskaCard {
        height: 225px;
        max-width: 200px;
    }

    .whyIjskaCard div {
        padding-bottom: 8px;
    }

    .whyIjskaCard div h3 {
        font-size: 20px;
    }

    /* ------------ Heading Index Page ----------- */

    .indexBody section{
        padding: 30px 0;
    }

    .indexHead1{
        padding-bottom: 30px;
        font-size: 25px;
    }

    /* - - - - -  Index - Section - 2  (About Ijska) - - - - -   */

    .aboutIjska {
        width: 90%;
    }

    .aboutIjskaCont p {
        font-size: 14px;
    }

    .faculties {
        margin-top: 20px;
    }
    
    .facultyCard {
        margin: 0 20px;
    }
    
    .faculties img {
        height: 200px;
        width: 190px;
    }
    
    .facultyCardCont h3 {
        font-size: 14px;
    }
    
    .facultyCardCont p {
        font-size: 10px;
    }

    /* - - - - -  Index - Section - 2  (Features) - - - - -   */

    .karateFeaturesContainer {
        width: 95%;
        column-gap: 10px;
        row-gap: 10px;
    }

    .feature {
        padding: 10px;
    }

    .feature h3{
        font-size: 16px;
        margin-bottom: 10px;
    }

    .feature p{
        font-size: 12;
    }

    /* ----------Accredition Sectiom ---------- */
    .accreditionSection{
        padding: 0 50px;
    }
    .accrdContainer{
        padding-top: 15px;
    }
    .accrContent img{
        margin: 0 40px;
        width: 110px;
        height: 110px;
    }
    .accrContent p{
        padding-top: 5px;
        font-size: 12px;
    }
    .accreditionSection button{
        margin: 15px 0;
        padding: 4px 12px;
        font-size: 10px;
    }

    /* ----------Testimonial Section ---------- */
    .testimonialSection{
        padding: 0 50px;
    }
    .mySlides {
        margin: 0 30px;
    }
    .mySlides img{
        margin-bottom: 20px;
        height: 90px;
        width: 90px;
    }
    .mySlides p{
        margin: 16px 0;
        font-size: 12px;
    }
    .slideBtn{
        padding: 4px 12px;
        height: 30px;
    }

    /* - - - - -  Footer  - - - - - */

    .footer {
        padding: 30px 0;
        grid-template-columns: 2fr 1fr;
        row-gap: 20px;
        width: 70%;
    }

    .footer h2 {
        font-size: 16px;
    }

    .footer h3 {
        margin-bottom: 10px;
    }

    .footer p {
        font-size: 14px;
    }

    .footer iframe {
        height: 80px;
        width: 140px;
    }

    /* --------------- Academics Page ----------------- */

    .academicsPoster p {
        font-size: 50px;
    }

    .acadContainer {
        padding: 0;
    }

    .belt {
        width: 98%;
    }

    .kyuNumber {
        padding: 10px 20px;
    }

    .beltCont {
        padding: 20px;
    }

    .stancesCont {
        grid-template-columns: 1fr 1fr;
        row-gap: 15px;
    }

    /* - - - - -  Students - Section - 2  - - - - - */

    .student-section {
        padding: 20px;
    }

    .beltNameStud {
        padding: 25px 0;
        font-size: 25px;
    }

    .student-card {
        margin: 10px;
        border-radius: 12px;
    }

    .student-card img {
        height: 170px;
        width: 150px;
        border-radius: 12px;
    }

    .student-card div {
        padding: 10px 0;
        border-radius: 12px;
    }
    
    .student-card h4 {
        font-size: 14px;
    }

    .student-card p {
        font-size: 10px;
    }

    #certificate-btn {
        height: 18px;
        width: 18px;
    }

    /* - - - - -  Achievements  - - - - - */

    .achievementSection {
        padding: 15px;
    }

    .achievementContainer {
        padding: 10px;
        grid-template-columns: 3fr 5fr;
        column-gap: 10px;
        width: 98%;
    }

    /* ----------Dojos ---------- */

    .dojoContainer {
        padding: 15px;
    }

    .dojoContent {
        padding-bottom: 6px;
        margin: 10px;
        height: 140px;
        width: 180px;
    }
    
    .dojoContent h3 {
        padding: 10px;
        font-size: 16px;
    }
    
    .dojoContent p {
        padding: 0 10px;
        font-size: 12px;
    }

    /*----------------Event Section-------------- */
    .eventSection{
        padding: 35px 0;
    }
    .eventToggle button{
        margin-bottom: 35px;
        padding: 8px;
        width: 150px;
        font-size: 14px;
    }
    .eventContainer{
        grid-template-columns: 1fr 1fr;
    }
    .eventcardec div{
        width: 15px;
        border-top-right-radius: 200px;
        border-bottom-right-radius: 200px;
    }
    .eventImgLogo{
        top: 0;
        left: 20px;
    }
    .eventImgLogo img{
        width: 70px;
        height: 70px;
    }
    .eventImgMainImg{
        width: 70%;
    }
    .eventContent{
        padding: 20px;
        border-bottom-right-radius: 166px;
    }
    .eventcardecContent{
        width: 15px;
        border-bottom-left-radius: 200px;
    }
    .eventContent h1{
        font-size: 25px;
    }
    .eventContent h5{
        padding-top: 4px;
        font-size: 18px;
    }
    .eventDateTimeContainer{
        margin: 15px 0;
        row-gap: 6px;
    }
    .eventDateTimeContainer h5{
        font-size: 10px;
    }
    .eventDateTimeContainer p{
        font-size: 12px;
    }
    .eventContent button{
        padding: 10px;
        font-size: 14px;
    }

    /* ----------copyright ---------- */
    
    .copyright p, a {
        font-size: 10px;
    }
}

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

    /* - - - - -  Start of Navbar - - - - - */

    .navLogoContainer img {
        height: 30px;
        width: 30px;
    }

    .navLogoContainer a {
        margin-left: 7px;
        font-size: 20px;
    }

    .hamburger svg {
        height: 30px;
        width: 30px;
    }

    /* - - - - -  Start of Landing Page poster - - - - - */

    #landingImg {
        display: none;
    }

    #resplandingImg {
        display: block;
    }

    .landingContent h3 {
        font-size: 10;
    }

    .landingContent h2 {
        margin: 20px 0;
        font-size: 25px;
        line-height: 25px;
    }

    /* - - - - -  Start of Section 2 >> Why Ijska - - - - - */

    .whyIjskaContainer h2 {
        padding: 10px 0;
        font-size: 18px;
    }

    .whyIjskaCardContainer {
        grid-template-columns: 1fr 1fr 1fr;
        padding: 5px;
        column-gap: 5px;
        row-gap: 5px;
    }

    .whyIjskaCard {
        height: 175px;
        max-width: 150px;
    }

    .whyIjskaCard div {
        padding-bottom: 5px;
    }

    .whyIjskaCard div h3 {
        font-size: 15px;
    }

    /* ------------ Heading Index Page ----------- */

    .indexBody section{
        padding: 20px 0;
    }

    .indexHead1{
        padding-bottom: 20px;
        font-size: 20px;
    }

    /* - - - - -  Index - Section - 2  (About Ijska) - - - - -   */

    .aboutIjska {
        width: 95%;
    }

    .aboutIjskaCont p {
        font-size: 12px;
    }

    .faculties {
        margin-top: 15px;
    }
    
    .facultyCard {
        margin: 0 5px;
    }
    
    .faculties img {
        height: 140px;
        width: 140px;
    }
    
    .facultyCardCont h3 {
        font-size: 11px;
    }
    
    .facultyCardCont p {
        font-size: 9px;
    }

    /* - - - - -  Index - Section - 2  (Features) - - - - -   */

    .featuresSection {
        padding: 20px 0;
    }

    .karateFeaturesContainer {
        width: 98%;
        column-gap: 6px;
        row-gap: 6px;
    }

    .feature {
        padding: 6px;
    }

    .feature h3{
        font-size: 14px;
        margin-bottom: 6px;
    }

    .feature p{
        font-size: 10;
    }

    /* ----------Accredition Section ---------- */

    .accrdContainer{
        padding-top: 10px;
    }
    .accrContent img{
        margin: 0 40px;
        width: 80px;
        height: 80px;
    }
    .accrContent p{
        padding-top: 5px;
        font-size: 10px;
    }
    .accrContent h5{
        font-size: 8px;
    }
    .accreditionSection button{
        margin: 10px 0;
        padding: 2px 8px;
        font-size: 8px;
    }

    /* ----------Testionial Section ---------- */
    
    .mySlides {
        margin: 0 20px;
    }
    .mySlides img{
        margin-bottom: 10px;
        height: 70px;
        width: 70px;
    }
    .mySlides p{
        margin: 14px 0;
        font-size: 10px;
    }
    .mySlides h4{
        font-size: 14px;
    }
    .slideBtn{
        padding: 2px 8px;
        height: 25px;
    }

    /* - - - - -  Footer  - - - - - */

    .footer {
        padding: 20px 0;
        grid-template-columns: 2fr 1fr;
        row-gap: 20px;
        width: 80%;
    }

    .footer h2 {
        font-size: 14px;
    }

    .footer h3 {
        margin-bottom: 10px;
    }

    .footer p {
        font-size: 12px;
    }

    .fb, .insta {
        padding: 10px 0 15px 10px;
        width: 80px;
    }

    .footer iframe {
        height: 70px;
        width: 140px;
    }

    /* ----------------- Academics page ---------------- */

    .academicsPoster p {
        font-size: 30px;
    }

    .kyuNumber {
        padding: 6px 10px;
    }

    .beltCont {
        padding: 10px;
    }

    .stancesCont {
        column-gap: 15px;
        grid-template-columns: 1fr;
    }

    /* - - - - -  Students - Section - 2  - - - - - */

    .student-section {
        padding: 15px 2px;
    }

    .beltNameStud {
        padding: 15px 0;
        font-size: 22px;
    }

    .student-card {
        margin: 8px;
        border-radius: 10px;
    }

    .student-card img {
        height: 150px;
        width: 140px;
        border-radius: 10px;
    }

    .student-card div {
        padding: 5px 0;
        border-radius: 10px;
    }
    
    .student-card h4 {
        font-size: 12px;
    }

    .student-card p {
        font-size: 8px;
    }

    #certificate-btn {
        height: 12px;
        width: 12px;
    }

    /* - - - - -  Achievements  - - - - - */

    .achievementSection {
        padding: 15px;
    }

    .achievementContainer {
        grid-template-columns: 1fr;
    }

    .achProPic {
        margin: 15px 0;
    }
    
    .achProPic img{
        width: 50%;
        border-radius: 20%;
    }

    .achProPic div{
        background-color: rgba(0, 41, 75, 0);;
    }

    .achContent h1{
        font-size: 23px;
    }

    /* ----------Dojos ---------- */

    .dojoContainer {
        padding: 10px 0;
    }

    .dojoContent {
        padding-bottom: 4px;
        margin: 4px;
        height: 120px;
        width: 170px;
    }
    
    .dojoContent h3 {
        padding: 8px;
        font-size: 14px;
    }
    
    .dojoContent p {
        padding: 0 8px;
        font-size: 10px;
    }

    /*----------------Event Section-------------- */
    .eventSection{
        padding:0;
    }
    .eventToggle{
        z-index: 1;
        padding: 14px 0;
        position: fixed;
        top: 50px;
        height: 50px;
        width: 100%;
        background-color: #011e3880;
    }
    .eventToggle button{
        margin-bottom: 15px;
        padding: 6px;
        width: 120px;
        font-size: 12px;
    }
    .eventContainer{
        margin-top: 50px;
        grid-template-columns: 1fr;
    }
    .eventcardec div{
        width: 15px;
        border-top-right-radius: 200px;
        border-bottom-right-radius: 200px;
    }
    .eventImgLogo{
        top: 6px;
        left: 10px;
    }
    .eventImgLogo img{
        width: 40px;
        height: 40px;
    }
    .eventImgMainImg{
        width: 50%;
        height: 80%;
    }
    .eventContent{
        padding: 20px;
        border-bottom-right-radius: 100px;
    }
    .eventInstructions{
        margin: 0 auto;
        padding: 10 20px;
    }
    .eventInstructions h1{
        padding: 10px;
        font-size: 20px;
    }
    .eventInstructions p{
        font-size: 12px;
    }

    /* ----------copyright ---------- */
    
    .copyright p, a {
        font-size: 8px;
    }

}

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

    /* ----------Accredition Sectiom ---------- */

    .accrContent img{
        width: 60px;
        height: 60px;
    }
    .accrContent p{
        padding-top: 4px;
        font-size: 8px;
    }
    .accrContent h5{
        font-size: 6px;
    }
    .accreditionSection button{
        font-size: 6px;
    }
}