@font-face {
    font-family: Smile and Wave;
    src: url(../fonts/smile_and_wave/smileandwave.ttf);
}
@font-face {
    font-family: DESIGNER;
    src: url(../fonts/designer/DESIGNER.otf);
}
@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat/Montserrat-Bold.ttf);
}
@font-face {
    font-family: poppins;
    src: url(../fonts/Poppins/Poppins-Light.ttf);
}

/* FONT FACES ENDS */

:root{
    color:#000000
}
*{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
    color: #FFFFFF;
}

/* NAVIGATION */
.topNav{
    width: 100%;
    height: 100px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.topNav .emptySpace25{
    width: 15%;
    height: 100%;
}
.endeavourLogo{
    width: 100px;
    height: 100px;
    padding: 0px 50px;
}
.endeavourLogo img{
    width: 100%;
    height: 100%;
}
.topNav ul{
    list-style: none;
}
.navComponent{
    width: 100%;
    height: 100%;
}
.navComponent a{
    text-decoration: none;
    color: #A00000;
    width: 90%;
    height: 90%;
}
.navComponent a:hover{
    box-shadow: 0 6px 12px 0 rgba(0,0,0,0.15), 0 6px 20px 0 rgba(0,0,0,0.14);
}
.activeTopNav{
    border-radius: 0px 0px 20px 20px;
    box-shadow: 0 6px 12px 0 rgba(0,0,0,0.15), 0 6px 20px 0 rgba(0,0,0,0.14);
}
ul li{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    color: #A00000;
}

.navArray{
    width: 70%;
    height: 100%;
    display: flex;
    justify-content:space-between;
    align-items: center;

}
/* NAVIGATION */

/* INTRODUCTION */
.intro{
    width: 100%;
    height: 726px;
    background: url(../images/introBackground.webp);
    /* background: #000; */
    background-repeat: no-repeat;
    background-size: 100% 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.endeavourText{
    font-family: Smile and Wave;
    font-weight: normal;
    font-size: 64px;
    line-height: 74px;
    text-align: center;
    letter-spacing: 0.795em;
    color: #FFFFFF;

    margin-right: -0.795em;
    text-align:right;
}
.endeavourTagline{
    font-family: DESIGNER;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 32px;
    text-align: center;
    letter-spacing: 0.27em;
    text-transform: uppercase;
    color: #FFFFFF;
    
    margin-right: -0.27em;
    text-align:right;
}


/* BLOG REFECENCE */

section.blogReference{
    width: 100%;
    height: 128px;
    background-color: #A00000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blogReference .blogReferenceContainer{
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.blogReferenceContainer .blogContainerText{
    width: 60%;
    height: 100%;
    
    color: #FFFFFF;
    
}
.blogContainerText p{
    width: 100%;
    height: 100%;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 29px;
    display: flex;
    justify-content: left;
    align-items: center;
}
 .blogReferenceContainer .blogButtonContainer{
    width:40%;
    height: 100%;

    display: flex;
    justify-content: right;
    align-items: center;

    }
.Button{
    width: 30%;
    height: 60%;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #FFFFFF;
    box-shadow: 0 6px 12px 0 rgba(0,0,0,0.15), 0 6px 20px 0 rgba(0,0,0,0.14);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
}
/* BLOG REFECENCE */



/* ABOUT REFERENCE */
section.aboutReference{
    width: 100%;
    height: 384px;

    background: url(../images/grey-papert-texture.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    /* background: url(../images/about.png);
    background-size: 100% 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */

    background: linear-gradient(270deg, #000000 21.08%, rgba(0, 0, 0, 0) 54.17%), url(../images/grey-papert-texture.png);

}
.imageShowCase{
    width: 55%;
    height: 100%;
    background: transparent;
    /* background-color: chocolate; */
}
.imageShowCase img{
    height: 100%;
    width: auto;
    /* box-shadow: 0 6px 12px 0 rgba(0,0,0,0.15), 0 6px 20px 0 rgba(0,0,0,0.14); */

}
.textShowCase{
    width: 45%;
    height: 100%;
    background: transparent;

    /* about Us */
}
.mainText{
    width: 70%;
    height: 25%;
    font-family: Smile and Wave;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 41px;
    /* text-align: right; */
    letter-spacing: 0.1em;
    color: #FFFFFF;
    /* background: rosybrown; */
}
.mainPara{
    width: 70%;
    height: 25%;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 17px;
    /* or 106% */

    /* text-align: right; */

    color: #FFFFFF;
    /* background: rosybrown; */
}
.mainButton{
    width: 70%;
    height: 25%;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 17px;
    /* or 106% */

    color: #FFFFFF;
}


/* DOMAIN REFERENCE */
section.domainReference{
    width: 100%;
    height: calc(256px + 128px);
    background: linear-gradient(89.74deg, #020402 32.84%, rgba(0, 0, 0, 0) 66.81%), url(../images/grey-papert-texture.png);
    background-size: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: row;
    
    /* Might Delete */
    box-sizing: border-box;
    border-bottom: 0.5px solid #000;
    
}


/* CARDS SECTION */

section.cardsArray{
    width: 100%;
    height: 768px; /*Change*/
    background-color: #aaa;
    background: url(../images/grey-papert-texture.png);
    background-size: cover;
}
.cardsArray .cardText{
    width: 100%;
    height: 20%;
}
.cardText p.cardMainText{
    width: 100%;
    height: 75%;

    /* FONT STYLES */
    font-family: Smile and Wave;
    font-style: normal;
    font-weight: normal;
    font-size: 48px;
    line-height: 55px;
    text-align: center;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #CD0000;

    display: flex;
    align-items:center;
    flex-direction: column;
    justify-content: end;

}
.cardText .cardTagText{
    width: 100%;
    height: 25%;

    /* FONT STYLE */
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 18px;
    /* or 112% */

    text-align: center;
    color: #020402;

    display: flex;
    align-items:center;
    flex-direction: column;
    justify-content: end;
}
.cardsArray .cardContainer{
    width: 100%;
    height: 80%;
    /* display: flex; */
    /* overflow-x: auto; */
}
.cardContainer table.cardTable
{
    width: 100%;
    height: 100%;
}
.cardTable tr{
    width: 100%;
    height: 100%;
    
}
.cardTable tr td{
    width: 33%;
    height: 100%;
    
}
.card1{
    height: 80%;
    width: 80%;
    background-color: #fff;
    background-color: #444;
    margin: auto;
    border-radius: 10px;
    background: url(../images/qqart1.jpg);
    background-size: cover;
    background-position-x: center;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


}

.card2{
    height: 80%;
    width: 80%;
    background-color: #fff;
    /* min-width: 250px; */
    background-color: #444;
    /* text-align: center; */
    margin: auto;
    border-radius: 10px;
    background: url(../images/best-nitro-rc-cars-02.jpg);
    background-size: cover;
    background-position-x: center;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card3{
    height: 80%;
    width: 80%;
    margin: auto;
    border-radius: 10px;
    background: url(../images/ag.jpg);
    background-size: cover;
    background-position-x: center;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card1:hover, .card2:hover, .card3:hover{
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2), 0 7.5px 25px 0 rgba(0,0,0,0.19);
}
.partOne{
    width: 100%;
    height: 70%;
}
.partTwo{
    width: 100%;
    height: 30%;
    border-radius: 0px 0px 10px 10px;
    background: rgba(0,0,0,0.19);
}


.partTwo p{
    color: #fff;
    font-family: Smile and Wave;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 41px;
    text-align: center;
    width: 100%;
    height: 30%;
}
.partTwo > p > abbr{
    text-decoration: none;
}
.partTwo .taglineCard{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    /* or 121% */

    text-align: center;

    color: #FFFFFF;
    width: 100%;
    height: 30%;
}
.partTwo .buttonCardContainer{
    color: #fff;
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.buttonCardContainer .buttonCard{
    width: 40%;
    height: 80%;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* CARDS SECTION */

/* OUR RESEARCH PROJECTS */
section.researchReference{
    width: 100%;
    height: 384px;

    display: flex;
    flex-direction: row;

    background: linear-gradient(89.74deg, #020402 32.84%, rgba(0, 0, 0, 0) 66.81%), url(../images/grey-papert-texture.png);
    

    /* Might Delete */
    box-sizing: border-box;
    border-top: 0.5px solid #000;
}

section.sponsersReference{
    width: 100%;
    height: 300px;

    background: url(../images/grey-papert-texture.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    background: linear-gradient(to right,rgba(255,255,255,0.8),rgba(255,255,255,0.6),rgba(255,255,255,0.4));


}
.sponsers-section{
    height: 100%;
    width: 25%;
    /* background-color: aqua; */
}
.glass{
    width:80%;
    height: 80%;
    margin: auto;
    border-radius: 20px;
    background: linear-gradient(to right,rgba(255,255,255,0.8),rgba(255,255,255,0.6),rgba(255,255,255,0.4));
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
    }
.glass:hover{
    border-radius: 20px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.glass > a{
    width: 100%;
    height: 100%;
}
.glass > a > img{
    width: 80%;
    height: auto;
}

/* FOOTER SECTION */

section.footer{
    /* 0 */
    width: 100%;
    height: 416px;
    background: #aaa;

    display: flex;
    
}
.footer .connectionFooter{
    /* 0 */
    width: 45%;
    height: 100%;
    background: #A00000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.connectionFooter .connectionFooterOne{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: right;
    flex-direction: column;

}
.endeavourLogoFooter{
    height: 30%;
    width: 100%;
}
.endeavourLogoFooter img{
    width: auto;
    height: 100%;
    padding: 0px 50px;
}
.connectionFooter .connectionFooterTwo{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
}
.connectionFooterTwo .footerMainText{
/* 1 */
    font-family: Smile and Wave;
    font-style: normal;
    font-weight: normal;
    font-size: 26px;
    line-height: 30px;
    letter-spacing: 0.1em;
    text-align: left;
    color: #FFFFFF;
}

.connectionFooterTwo .footerTagText{
/* 1 */
font-family: Poppins;
font-style: normal;
font-weight: 300;
font-size: 18px;
line-height: 27px;
color: #FFFFFF;
}

.connectionFooterTwo .footerSocialIcons{
    /* Color For Icons */
    color: #fff; 
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.footerSocialIcons a{
    text-decoration: none;
    color: #FFFFFF;
    
}
.footerSocialIcons a:hover{
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}
.footer .menuFooter{
    width: 55%;
    height: 100%;
    color: #FFFFFF;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.menuFooter .menuFooterContainer{
    width: 80%;
    height: 60%;
}
table.menuFooterContainer tr{
    width: 100%;
    height: 20%;
}
table.menuFooterContainer tr th,td{
    font-size: 18px;
    line-height: 27px;
}
.tr td,th{
    width: 25%;
    height: 20%;
    text-align: left;
    font-family: Poppins;
    font-style: normal;
    color: #FFFFFF;
    
}
.contactContainer{
    width: 80%;
    height: 20%;
    font-size: 16px;
    line-height: 20px;
}

/* FOOTER SECTION */



/*768px < Viewport < 1024px,
3/4 of main viewport */
@media only screen and (max-width:1024px){
    /* NAV TEXT */
    .topNav{
        height: 75px;
    }
    .topNav .emptySpace25{
        width: 15%;
    }
    .navArray{
        width: 70%;
    }
    .topNav ul li{
        font-size: 18px;
    }
    .topNav .emptySpace25 .endeavourLogo{
        width: 75px;
        height: 75px;
        padding: 0px 37.5px;
    }
    /*-- NAV TEXT --*/


    /* INTRODUCTION */

    .intro{
        height: 544.5px;
    }
    .endeavourText{
        font-size: 48px;
        line-height: 55.5px;
        letter-spacing: 0.6em;
        margin-right: -0.6em;
    }
    .endeavourTagline{
        font-size: 24px;
        line-height: 24.5px;
        letter-spacing: 0.2em;
        margin-right: -0.2em;
    }

    /* REST */
    .mainPara{
        font-size: 12px;
        line-height: 13px;
    }
    .mainText{
    font-size: 27px;
    line-height: 30.75px;
    }
    


    /* CARDS SECTION */

    section.cardsArray{
        height: 576px;
    }
    .cardText p.cardMainText{
        font-size: 36px;
        line-height: 36px;

    }
    .cardText .cardTagText{
        font-size: 16px;
        line-height: 16.5px;
    }


    .partTwo p{
        
        font-size: 24px;
        line-height: 25px;
        
    }
    .partTwo .taglineCard{
        font-size: 9px;
        line-height: 10.5px;
    }
    .buttonCardContainer .buttonCard{
        width: 60%;
        height: 80%;
        font-size: 12px;
        border-radius: 6px;
    }


    /* CARDS SECTION */

    /* FOOTER */
    section.footer{
        height: 312px;
    }
    .connectionFooterTwo .footerMainText{
        font-size: 19.5px;
        line-height: 22.5px;
    }
    .connectionFooterTwo .footerTagText{
        font-size: 13.5px;
        line-height: 20.25px;
    }
    .connectionFooterTwo .footerSocialIcons{
        font-size: 15px;
    }
    table.menuFooterContainer tr th,td{
        font-size: 13.5px;
        line-height: 20.25px;
    }
    /* FOOTER */
    
    
}




@media only screen and (max-width:768px){
    /* HALF  */

   /* NAV TEXT */
   .topNav{
       height: 50px;
   }
   .topNav .emptySpace25{
       width: 15%;
   }
   .topNav .navArray{
       width: 70%;
   }
   .topNav ul li{
       font-size: 12px;
   }
   .topNav .emptySpace25 .endeavourLogo{
       width: 50px;
       height: 50px;
       padding: 0px 25px;
   }
   /*-- NAV TEXT --*/


   /* INTRODUCTION */
   
   .intro{
       height: 363px;
   }
   .endeavourText{
       font-size: 32px;
       line-height: 37px;

       letter-spacing: 0.795em;
   
       margin-right: -0.795em;
       text-align:right;
   }
   .endeavourTagline{
       font-size: 18px;
       line-height: 16px;
   }
   /*-- INTRODUCTION --*/

   section.blogReference{
       height: 64px;
   }
   .blogContainerText p{
       font-size: 12px;
       line-height: 14.5px;
   }
    
   .blogButtonContainer .blogButton{
        width: 40%;
        font-size: 7px;
        border-radius: 4px;
   }
   .Button{
    width: 40%;
    font-size: 7px;
    border-radius: 4px;
    }



   section.aboutReference{
       height: 192px;
   }

   section.domainReference{
       height: 192px;
   }

   /* REST */
   .mainPara{
    font-size: 8px;
    line-height: 9px;
    }
    .mainText{
        font-size: 18px;
        line-height: 20.5px;
        }

   /* CARDS */

   section.cardsArray{
       height: 384px;
   }

   .cardText p.cardMainText{
       font-size: 24px;
       line-height: 27.5px;
   }
   .cardText .cardTagText{
       font-size: 8px;
       line-height: 9px;
   }

   .partTwo p{
       font-size: 18px;
       line-height: 20.5px;
   }
   .partTwo .taglineCard{
       font-size: 6px;
       line-height: 7px;
   }
   .buttonCardContainer .buttonCard{
       font-size: 6px;
       border-radius: 4px;
   }

   
   /* FOOTER */
   section.footer{
       height: 208px;
   }
   .connectionFooterTwo .footerMainText{
       font-size: 13px;
       line-height: 15px;
   }
   .connectionFooterTwo .footerTagText{
       font-size: 9px;
       line-height: 13.5px;
   }
   .connectionFooterTwo .footerSocialIcons{
       font-size: 10px;
   }
   table.menuFooterContainer tr th,td{
       font-size: 9px;
       line-height: 13.5px;
   }
   /* FOOTER */
   
}






/* Viewport less than 600px,
1/4 of main viewport
392px Changed to 600px*/ 
@media only screen and (max-width:600px){

    /* NAV TEXT */
    .topNav{
        height: 25px;
    }

    .topNav .emptySpace25{
        width: 12.5%;
    }
    .navArray{
        width: 75%;
    }
    .topNav ul li{
        font-size: 8px;
    }
    .topNav .emptySpace25 .endeavourLogo{
        width: 25px;
        height: 25px;
        padding: 0px 12.5px;
    }
    .activeTopNav{
        border-radius: 0px 0px 5px 5px;
    }
    /*-- NAV TEXT --*/


    /* INTRODUCTION */
    
    .intro{
        height: 181.5px;
    }
    .endeavourText{
        font-size: 16px;
        line-height: 18.5px;
    }
    .endeavourTagline{
        font-size: 9px;
        line-height: 8px;
    }

    section.blogReference{
        height: 32px;
    }
    .blogContainerText p{
        font-size: 6px;
        line-height: 7.25px;
    }
    .blogButtonContainer .blogButton{
        font-size: 3.5px;
        border-radius: 2px;
    }
    .Button{
        font-size: 3.5px;
        border-radius: 2px;
    }

    section.aboutReference{
        height: 96px;
    }

    section.domainReference{
        height: 96px;
    }

    /* REST */
    .mainPara{
        font-size: 4px;
        line-height: 5px;
    }
    .mainText{
        font-size: 9px;
        line-height: 10.25px;
        }

    /* CARDS */

    section.cardsArray{
        height: 192px;
    }

    .cardText p.cardMainText{
        font-size: 12px;
        line-height: 26.75px;
    }
    .cardText .cardTagText{
        font-size: 4px;
        line-height: 4.5px;
    }

    .card1, .card2, .card3{
        height: 75%;
        width: 90%;
    }
    .partTwo p{
        font-size: 9px;
        line-height: 10.5px;
        letter-spacing: 0.25em;
    }
    .partTwo .taglineCard{
        font-size: 3px;
        line-height: 3.5px;
    }
    .buttonCardContainer .buttonCard{
        font-size: 3px;
        border-radius: 2px;
    }

    section.researchReference{
        height: 96px;
    }

    section.sponsersReference{
        height: 80px;
    }
    .glass{
        border-radius: 6.25px;
    }
    .glass:hover{
        border-radius: 6.25px;
    }
    /* FOOTER */
    section.footer{
        height: 104px;
    }
    .connectionFooterTwo .footerMainText{
        font-size: 9.75px;
        line-height: 10.75px;
    }
    .connectionFooterTwo .footerTagText{
        font-size: 6.75px;
        line-height: 7.75px;
    }
    .connectionFooterTwo .footerSocialIcons{
        font-size: 7.5px;
        line-height: 8.5px;
    }
    .menuFooter .menuFooterContainer{
        width: 90%;
        height: 70%;
    }
    table.menuFooterContainer tr th,td{
        color: #fff;
        font-size: 5.75px;
        line-height: 5.75px;
    }
    .contactContainer{
        width: 90%;
        height: 30%;
        font-size: 4px;
        line-height: 5px;
    }
    /* FOOTER */
}


/* Some common positioning css */

.flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-right{
    display: flex;
    align-items: center;
    justify-content: right;
}
.flex-vertical-center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.flex-vertical-right-center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: right;
}
.flex-vertical-left-center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: left;
}
.flex-right{
    align-items: right;
}