body{
    color: var(--dark-tc);
}
header * {
    z-index: 5;
}
header {
    height: 100svh;
    width: 100%;
    background: var(--Secondary-colour-200);
    position: relative;
    overflow: hidden;
}

nav{
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--main-o-100);
    padding: 0 10px 0 20px;
    position: sticky;
    top: 0;
}
nav #logo {
    height: 45px;
    aspect-ratio: 1;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav ul {
    display: flex;
    width: 50%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

nav ul li {
    display: none;
}

nav ul li a{
    font-size: var(--p-fs);
    transition: 0.2s ease-in;
}
nav ul li a:hover {
    color: var(--main-colour-200);
}

nav button {
    height: 35px;
    width: 105px;
    border-radius: var(--small-br);
    background: var(--main-colour-300);
    border: none;
    outline: none;
    font-size: var(--p-fs);
    font-weight: var(--section-heading-fw);
    color: var(--light-tc);
    display: none;
}
header h1 {
    font-weight: var(--main-heading-fw);
    color: var(--main-o-200);
    position: absolute;
    left: 50%;
    top: 57%;
    transform: translate(-50% , -50%);
    pointer-events: none;
}
header h1 .word {
    font-size: var(--header-fs);
    text-transform: uppercase;
    text-align: center;
    position: relative;
}
header h1 .two {
    top: -50px;
}
header h1 .three {
    top: -100px;
}
/* _____________________________ */

header .CTA_information {
    height: 70vh;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient( 180deg, #00000000 10%, var(--main-o-200) 50% , #00000000);
    display: flex;
    align-items:center ;
    justify-content: center;
    z-index: 6;
}
header .CTA_information .actions{
    width: 75%;
    display: grid;
    justify-content: center;
}

header .CTA_information .actions h6 {
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    color: var(--light-tc);
}

header .CTA_information .actions button {
    width: 276px;
    height: 50px;
    border-radius: var(--bigger-br);
    border: none;
    justify-self: center;
    outline: none;
    margin-top: 15px;
    background: var(--main-colour-300);
    color: var(--light-tc);
    font-size: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--section-heading-fw);
}
.img-displays {
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    inset: 0;
    align-items: center;
}
/* footer .img-displays img {
    animation: mainImg2 100s linear infinite forwards;
}  */
.img-displays img {
    height: 100%;
}

.blackOpiqueImghide{
    position: absolute;
    z-index: 4;
    background: var(--main-o-200);
    height: 100%;
    width: 100%;
    inset: 0;
}

header .mobile-nav{
    height: 54dvh;
    width:100%;
    background: var(--Secondary-colour-200);
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 40px 20px;
    z-index: 15;
    inset: 0;
    transform: translateY(-5000px);
}
.mobile-nav svg {
    position: absolute;
    right: 0;
    top: 0;
    margin: 20px 10px 10px 0;
    cursor: pointer;
    z-index: 16;
}
.mobile-nav button {
    height: 41px;
    width: 126px;
    border-radius: var(--small-br);
    background: var(--main-colour-300);
    border: none;
    outline: none;
    font-size: var(--p-fs);
    font-weight: var(--section-heading-fw);
    color: var(--light-tc);
}
.mobile-nav ul li {
    margin-block: 20px;
}
.mobile-nav ul li a{
    font-size: var(--headFourth-fs);
    color: var(--light-tc);
    padding-block: 20px;
    
}
.mobile-nav .logo-display{
    height: 80px;
    aspect-ratio: 1;
    position: absolute;
    bottom: 20px;
    right: 10px;
}
.mobile-nav .logo-display img {
    height: 100%;
    width: 100%;
}/* ------------------contactForm------- */

#contactForm{
    height: 100vh;
    background: url(/media/1bfbd7d9-39f7-443b-ab01-31703a8539f0.jpeg);
    position: fixed;
    background-position: center center;
    background-repeat:no-repeat;
    background-size: cover;
    padding:140px var(--ss-padding);
    z-index: 16;
    inset: 0;
    transform: translateX(5000px);
}
#contactForm h2 {
    position: absolute;
    display: flex;
    color: var(--main-colour-300);
    width: 100%;
    justify-content: center;
    inset: 0;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
}
#contactForm h2 .word{
    margin-inline: 10px;
    font-size: var(--headFourth-fs);
    text-transform: uppercase;
    font-weight: var(--main-heading-fw);
}
#contactForm .details{
    position: absolute;
    inset: 0;
    display: flex;
    width: max-content;
    height: max-content;
}
#contactForm .details .CompanyNo , #contactForm .details .CompanyEmail{
    width: max-content;
    display: flex; 
    margin: 10px 5px 0px 10px;
    align-items: center;
    justify-content: space-between;
}

#contactForm .details svg {
    height: 20px;
    width: 20px;
    margin-right: 10px;
}
#contactForm .details .divider{
    font-size: var(--p-fs);
    text-align: center;
    place-content: center;
    margin-top: 10px;
    margin-inline: 10px;
    scale: 1.2;
}

#contactForm .details p , #contactForm .details a  {
    color: var(--light-tc);
    font-size: var(--ss-fs);
    text-decoration: none;
}


#contactForm #closeTwo{
    position: absolute;
    right: var(--ss-padding);
    top: var(--ss-padding);
}
#contactForm form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-height: 460px;
}
#contactForm form .firstDiv{
    height: 29%;
    display: grid;
    grid-template-rows: 50% 50%;
}
#contactForm form .firstDiv .secondDiv{
    position: relative;
    align-content: center;
    justify-items: center;
}

#contactForm form .firstDiv .secondDiv input {
    height: 47px;
    border-radius: var(--smaller-br);
    width: 100%;
    outline: none;
    border: none;
    font-size: var(--p-fs);
    color: var(--dark-tc);
    padding: 12px var(--ss-padding);
    text-align: center;
}
#contactForm form .firstDiv .secondDiv label{
    font-size: var(--ss-fs);
    position: absolute;
    left: 20px;
    transform: translateY(-16px);
    opacity: 0;
}
#contactForm form textarea{
    width: 100%;
    height: 30%;
    font-size: var(--p-fs);
    color: var(--dark-tc);
    font-family: "Poppins";
    padding: var(--small-br);
    outline: none;
    border-radius: var(--smaller-br);
}
#contactForm form button {
    height: 47px;
    width: 100%;
    max-width: 400px;
    border-radius: var(--smaller-br);
    border: none;
    background: var(--main-colour-300);
    color: var(--light-tc);
    font-size: 2rem;
    font-weight: var(--section-heading-fw);
    padding: 0 var(--main-padding);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
/* ----------header done----- */

#ourStory{
    background: var(--main-colour-100);
    height: fit-content;
    padding: 90px var(--ss-padding) ;
    position: relative;
    display: grid;
    align-items: end;
    grid-template-rows: 1fr 1fr;
    justify-content: center;
    overflow: hidden;
    z-index: 10;
}
#ourStory .img-slider_outstory{
    position: absolute;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    inset: 0;
    background:var(--Secondary-colour-300)
}

#ourStory .fade-transition_ourstory-top {
    position: absolute;
    inset: 0;
    height: 10vh;
    width: 100%;
    z-index: 5;
    background: linear-gradient(180deg , var(--Secondary-colour-200), var(--main-colour-100));
}
#ourStory aside{
    background: var(--main-colour-100);
    display: grid;
    align-content:center ;
    justify-content: center;
    color: var(--Secondary-colour-300);
    position: relative;
    z-index: 5;
    padding: var(--ss-padding) 10px;
    margin-inline: auto;
}

#ourStory aside h3 {
    font-size: var(--headTwo-fs);
    text-align: left;
    font-weight: var(--section-heading-fw);
}
#ourStory aside p ,  #ourStory aside p a {
    font-size: var(--p-fs);
    color: var(--dark-tc);
}
#ourStory aside .ReadMore {
    margin-top: 60px;
    font-weight: var(--section-heading-fw);
    text-decoration: underline;
}
#ourStory .outStoryImgCover{
    background: url(/media/061b4f2a-8d4b-49c7-bf0f-c9db9fd798a1.jpeg);
    top: 10%;
    z-index: 3;
    width: 100%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 1280/960;
}
#ourStory .outStoryImgCover img{
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center center;
}
/* -------------------Dance STyles sections */
#achievements_vision {
    display: grid;
    gap: 5.5vh;
    justify-content: space-between;
    background: var(--main-colour-200);
    padding: 40px var(--ss-padding) 60px;
    display: grid;
    grid-row: 2vh;
    position: relative;
    z-index: 10;
    color: var(--dark-tc);
}

.achievements , .vision {
    width: 100%;
}
#achievements_vision aside h3 {
    font-size: var(--headThree-fs);
}
#achievements_vision aside strong {
    font-size: var(--p-fs);
}
#achievements_vision aside p {
    font-size: var(--p-fs);
}
#achievements_vision aside li {
    font-size: var(--p-fs);
    padding-inline-start: calc(var(--ss-padding) / 5) ;
    list-style: none;
}
#achievements_vision a {
    color: var(--dark-tc);
}
.imgSolution {
display: none;
}
.AV-img-mobile {
    background: url(/media/a725a43b-5f99-4cab-9f15-667ebf5347a0-min.jpeg);
    aspect-ratio: 16/9;
    width: 100%;
    background-position: center 30%;
    background-size: cover;
}
/* ----------------------------dance display section------ */

#classes {
/*     padding:calc( var(--main-padding) + var(--ss-padding)) var(--ss-padding); */
    background: var(--main-colour-100);
    padding: var(--ss-padding) 5px;
    display: grid;
    grid-row: 2vh;
    position: relative;
    z-index: 10;
}
#classes .classView{
    background: #00000005;
    display: grid;
    grid-gap: 4vh;
    padding: var(--ss-padding) 10px;
    margin-block-end: 8vh ;
}
#classes .funClasses .video {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    max-width: 950px;
    aspect-ratio: 16/9;
    margin-inline: auto; 
    background: url(/media/classes/fun.jpeg);
    background-size: cover;
    background-position: center center;
}
#classes .fitnessClasses .video {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    max-width: 950px;
    aspect-ratio: 16/9;
    margin-inline: auto; 
    background: url(/media/classes/fitness2.webp);
    background-size: cover;
    background-position: center center;
}
#classes .compClasses .video {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    max-width: 950px;
    aspect-ratio: 16/9;
    margin-inline: auto; 
    background: url(/media/classes/competitive.jpeg);
    background-size: cover;
    background-position: center top;
}

.classImgs{
    display: flex;
    flex-wrap: wrap;
    gap: 2.5vh;
}

.rightclassimage {
    background: url(/media/tempImg/fun2.jpg);
}
.leftclassimage {
    background: url(/media/tempImg/fun3.jpg);
}
.leftclassimage , .rightclassimage{
    width: 100%;
    aspect-ratio: 16/9; 
    background-size: cover;
    background-position: center center;
}
/* #classes h2 {
    font-size: var(--headFourth-fs);
    font-weight: var(--section-heading-fw);
}
*/
#classes .videoSrc_Information{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#classes .videoSrc_Information .darkenForVid{
    width: 100%;
    aspect-ratio: 16/9;
    position: absolute;
    background: var(--main-o-500);
    z-index: 11;
} 
#classes video {
   /*  width: 90vw;
    max-width: 950px; */
    /* width: 100%;
    aspect-ratio: 16/9; */
/*     margin-bottom: 40px; */
}
#classes p {
    font-size: var(--p-fs);
    max-width: 950px;
    text-align: center;
}
#classes strong {
    font-size: var(--p-fs);
    max-width: 950px;
    text-align: center;
    font-weight: 600;
}
#classes .funClassDescription{
    place-content: center;
    place-items: center;
    display: flex;
    flex-direction: column;
}
#classes .funClassDescription h2{
    font-size: var(--headFourth-fs);
    font-weight: var(--section-heading-fw);
}

/* -------------------Dance STyles sections */

#danceStyles {
    position: relative;
}
#danceStyles .first-dance_container{
    width: 100%;
    padding: var(--main-padding) var(--ss-padding);
}
#danceStyles .second-dance_container{
    width: 100%;
    padding: var(--main-padding) var(--ss-padding);
}

#danceStyles  .hiphop-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    flex-wrap: nowrap;
}

#danceStyles .hiphop-header h5{
    font-size: var(--headThree-fs);
    font-weight: var(--section-heading-fw);
    color: var(--secondary-colour-300);
}
#danceStyles .img_dance-style-display{
    width: 100%;
    aspect-ratio: 1/0.69;
    background-color: white;
    margin-bottom:10px;
}

#danceStyles  p {
    font-size:var(--ss-fs);
}

#danceStyles .ReadMore , #danceStyles .ReadLess  {
    margin-top: 60px;
    font-weight: var(--section-heading-fw);
    text-decoration: underline;
    cursor: pointer;
}


#danceStyles .hiphop-header .block-line {
    height: 40px;
    background: var(--Secondary-colour-300);
}


/* ======================FAQ sectionm from here outwards====== */
#FAQ{
    position: relative;
    overflow-x: hidden;
}

#FAQ h2 {
    font-weight: var(--main-heading-fw);
    color: var(--main-o-100);
    position: absolute;
    inset: 0;
    transform: translateY(0%);
}

#FAQ h2 .word {
    font-size: var( --headThree-fs);
    text-transform: uppercase;
    text-align: center;
    position: relative;
}

#FAQ h2 .three {
    top: -70px;
}
#FAQ h2 .two {
    top: -35px;
}

#FAQ .FAQ_inner-container{
    position: relative;
    padding: 80px var(--ss-padding) var(--main-padding);
    background: var(--main-colour-200);
}

#FAQ .question_container{
    background: var(--main-colour-100);
    padding: 20px 12px;
    border-radius: var(--smaller-br);
    margin: 30px 0;
    position: relative;
    z-index: 2;
}

#FAQ .question_container .questionContainerHeader{
    display: inline-grid;
    width: 100%;
    align-items: center;
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
    position: relative;
}
#FAQ .question_container .questionContainerHeader h5{
    font-size: var(--headFourth-fs);
    font-weight: var(--section-heading-fw);
}
#FAQ .question_container .questionContainerHeader .block-line{
    height: 24px;
    background: var(--Secondary-colour-300);
    width: 60px;
    display: none;
}
#FAQ .question_container p{
    font-size: var(--ss-fs);
    margin-block: 15px;
}
#FAQ .question_container .FAQcontact{
    width: 94px;
    height: 30px;
    border-radius: var(--smaller-br);
    border: none;
    justify-self: center;
    outline: none;
    margin-top: 20px;
    background: var(--main-colour-300);
    color: var(--light-tc);
    font-size: 1.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--section-heading-fw);
    cursor: pointer;
}

/* --------------footer from here onwards */
footer * {
    z-index: 5;
}
footer{
    position: relative;
    background: var(--Secondary-colour-300);
    overflow: hidden;
}

footer .upsideDown-triangle {
    height: 95px;
    background: var(--main-colour-200);
    position: absolute;
    width: 101vw;
    top: -2px;
    left: -3px;
    border-radius: 0 0 200% 200%;
    z-index: 10;
}

/* footer .upsideDown-triangle .rectangle{
    height: 55px;
    background: var(--main-colour-200);
    position: absolute;
    width: 100vw;
    top: 50px;
} */

footer .upsideDown-triangle .oneBlock{

    /* transform: rotate(16deg) translate(-50%); */
}
footer .upsideDown-triangle .twoBlock{
    width: 100vw;
    height: 30px;
    top: 10px;
    z-index: 10;
    background: var(--main-colour-200);
    position: absolute;
}
/* footer .upsideDown-triangle .thirdBlock{
    top: -10px;
} */


footer .inner_footer {
    padding: 130px var(--ss-padding) 60px;
    color: var(--light-tc);
    display: grid;
    grid-template-rows: 35% 65%;
    position: relative;
    z-index: 5;
    height: 110%;
    background-color: var(--main-o-400);
}

footer .timeTable_contactForm{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
footer .timeTable_contactForm p {
    font-size:var(--p-fs);
    text-align: center;
}
footer .inner_footer form input {
    background: transparent;
    outline: none;
    border: none;
    border-radius: 0;
    border-bottom: 2px solid var(--light-tc);
    width: 100%;
    font-size: var(--p-fs);
    padding: 6px;
    text-align: center;
    color: var(--light-tc);
}

footer .inner_footer form input::placeholder {
    color: var(--light-tc);
    font-size: var(--p-fs);
}

footer .inner_footer form button{
    background: var(--main-colour-300);
    margin-top: 20px;
    color: var(--light-tc);
    width: 100%;
    height: 50px;
    display: flex;
    font-weight: var(--section-heading-fw);
    font-size: 2.7rem;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: var(--small-br);
}
footer .inner_footer #map{
    width: -webkit-fill-available;
    width: fill-available;
}

footer .inner_footer #map .mapImg{
    width: 100%;
    aspect-ratio: 2.043/1;
    position: relative;
}
footer .inner_footer #map .mapImg iframe{
    width: 100%;
    height: 100%;
}


footer .inner_footer #map p {
    margin-top: 5px;
    font-size: 0.8rem;
}

footer .inner_footer .map_Link-div{

    display: grid;
    gap:40px;
}

footer .inner_footer .map_Link-div .socials{
    color: var(--main-colour-300);
}

footer .inner_footer .map_Link-div #footer_links{
    display: flex;
    justify-content: space-between;
}

/* footer .inner_footer .map_Link-div ul{
    
} */
footer .inner_footer .map_Link-div ul h6{
    font-weight: var(--section-heading-fw);
    font-size: var(--headFourth-fs);
    color: var(--main-colour-300);
    margin-bottom: 10px;

}

footer .inner_footer .map_Link-div ul li{
    list-style: none;
    margin: 15px 2px;
    transition: 0.2s ease;
}
footer .inner_footer .map_Link-div ul li:hover {
    transform: translateX(10px);
}
footer .inner_footer .map_Link-div ul li a{
    text-decoration: none;
    font-size: 1.4rem;
    color: var(--light-tc);
    transition: 0.2s ease;
}
footer .inner_footer .map_Link-div ul li a:hover{
    color: var(--main-colour-200);
}


footer h2 {
    font-weight: var(--main-heading-fw);
    width: 100vw;
    color: var(--secondary-colour-300);
    position: absolute;
    left: -10px;
    top: 57%;
    z-index: 4;
    transform: translateY(-50%);
}
footer h2 {
    font-weight: var(--main-heading-fw);
    width: 100vw;
    color: var(--secondary-colour-300);
    position: absolute;
    left: -10px;
    top: 30%;
    transform: translateY(-50%);
}
footer h2 .word {
    font-size: var(--header-fs);
    text-transform: uppercase;
    text-align: center;
    position: relative;
}

footer h2 .three {
    top: -100px;
}
footer h2 .two {
    top: -50px;
}

#danceStyles  .hipHop {
    background-image: url(/media/tempImg/360_F_616274083_bc32W7nrJKl2aZJ24ck2QHIsGweOmYc3.jpg);
    background-position: center;
    background-size: cover;
}
#danceStyles .AfroBeat{
    background-image: url(/media/tempImg/close-up-portrait-of-smiling-handsome-young-caucasian-man-face-looking-at-camera-on-isolated-light-gray-studio-background-photo.jpg);
    background-position: center;
    background-size: cover;
}
#danceStyles .Amapiano{
    background-image: url(/media/tempImg/istockphoto-1082483460-612x612.jpg);
    background-position: center;
    background-size: cover;
}
#danceStyles .UrbanDance {
    background-image: url(/media/tempImg/istockphoto-1369508766-612x612.jpg);
    background-position: center;
    background-size: cover;
}
#danceStyles .BreakDance{
    background-image: url(/media/4b299c29-05ce-4c92-ac56-fd8aa2a25b62.jpeg);
    background-position: center;
    background-size: contain;
}
#danceStyles .tiktok{
    background-image: url(/media/bb91373b-e76a-4108-a26f-bbb54a0b776a.jpeg);
    background-position: center;
    background-size: contain;
}

#blackForContact{
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: var(--main-o-200);
    inset: 0;
}

.dance_display {
    background: var(--main-colour-100);
    padding:80px var(--ss-padding) ;
    position: relative;
    z-index: 10;
    place-items: center;
}
.dance_display .danceInstructors {
    display: grid;
    place-items: center;
    position: relative;
    grid-gap: 2vh;
}
.dance_display .danceInstructorbox {
    width: 100%;
    border-radius: 4px;
    position: relative;
    margin: 2vh 1vw;
    padding: 15px;
    place-content: end;
}
.dance_display .danceInstructorbox .InstructorImg {
    object-fit: cover;
    object-position: center left;
    width: 80%;
    position: absolute;
    left: 50%;
    top: 8%;
    transform: translateX(-50%);
    opacity: .6;
}
.dance_display .danceInstructorbox .InstructorImgface {
    width: 100%;
    object-fit: cover;
    height: 50%;
    aspect-ratio: 1;
    border-radius: 4px;
}
.dance_display .danceInstructorbox .infoaboutInstructor{
    position: relative;
    margin-top: 5px;
    place-items: center;
}
.dance_display .danceInstructorbox h4 {
    text-align: center;
    font-size: var(--headFourth-fs);
    font-weight: var(--section-heading-fw);
    margin-block: calc(var(--ss-padding) * 0.5);
}
.dance_display .danceInstructorbox img {
    position: relative;
    width: 100%;
}
.dance_display .danceInstructorbox strong {
    font-size: var(--p-fs);
}
.dance_display .danceInstructorbox p {
    font-size: var(--p-fs);
    text-align: center;
}
.dance_display h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0px; 
}
.dance_display h2 div {
    color: var(--main-o-300);
    font-size: var(--headThree-fs);
    text-transform: uppercase;
    font-weight: var(--main-heading-fw);
}