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

html{
    font-size: 62.3%;
  

}

/* font-family: "Work Sans", sans-serif;  for main heading */ 
/*  font-family: "Open Sans", sans-serif;  for p tags and h1's sub headind*/
/* font-family: "Roboto", sans-serif;  for for p tags's heading*/
body > header {
    background-color: #fff;
  
}

.navbar-brand h2{
    font-family: "Work Sans", sans-serif;
    font-weight: 620;
    font-size: 10rem !important;
    
    /* background: linear-gradient(45deg, #ea2b8d, #de2566, purple); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;  */
}

.navbar-brand h2 a {
    text-decoration: none;
    background: linear-gradient(90deg, #ff1b6b, #45caff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;


}

[data-scrollPercentage] .percentage {
  
    background: linear-gradient(90deg, #ff1b6b, #45caff);

    height: 2rem;
}


.contact-btn,
.address-btn{
    padding: 1.8rem 3.8rem !important;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    font-family: "Open Sans", sans-serif !important;
    font-size: 2rem !important;
    font-weight: bold !important;
    transition: all 0.5s ease-in-out;

  
     background: linear-gradient(90deg, #ff1b6b, #45caff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   
}




.contact-btn:hover,
.address-btn:hover{
    cursor: pointer;

    background: linear-gradient(270deg, #ff1b6b, #45caff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;    
}



.address-btn{
    margin-left: 2rem;
}



/* Navigation Media Query */

@media (max-width:1000px){

    nav{
        display:flex;
        flex-direction: column;
        text-align: center;
    }

    .contact-btn,
    .address-btn{
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    }
}
@media (max-width:768px){

    .navbar-brand h2{
    font-size: 7rem !important;
        
    }

    .contact-btn,
    .address-btn{
        font-size: 1.8rem !important;
    }
}
@media (max-width:425px){

    .navbar-brand h2{
        font-size: 6rem !important;
        
    }

    .contact-btn,
    .address-btn{
        font-size: 1.5rem !important;
    }
}
@media (max-width:377px){

    .navbar-brand h2{
        font-size: 5.5rem !important;
        
    }

    .contact-btn,
    .address-btn{
        font-size: 1.2rem !important;
    }
}


/* HERO PAGE */

body > div > div > div.col-lg-6.order-lg-1.text-center > h1{
    font-size: 4rem !important;
    color: #381E1E;
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    
}

body > div > div > div.col-lg-6.order-lg-1.text-center > p{
    font-size: 3rem !important;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
}


body > div > div > div.col-lg-6.order-lg-1.text-center > h1 > span {

    background: linear-gradient(90deg, #ff1b6b, #45caff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
font-weight: bold;
   
}

body > div > div > div.col-lg-6.order-lg-2.text-center > img {

    max-width: 85% !important;
}


/* MEDIA QUERY FOR HERO PAGE */

@media (max-width:1400px){
    body > div > div > div.col-lg-6.order-lg-1.text-center > h1{
        font-size: 3.5rem !important;
    }
    
    body > div > div > div.col-lg-6.order-lg-1.text-center > p{
        font-size: 2.7rem !important;
    }
}
@media (max-width:1200px){
    body > div > div > div.col-lg-6.order-lg-1.text-center > h1{
        font-size: 2.9rem !important;
    }
    
    body > div > div > div.col-lg-6.order-lg-1.text-center > p{
        font-size: 2.3rem !important;
    }
}
@media (max-width:992px){
    body > div > div > div.col-lg-6.order-lg-1.text-center > h1{
        font-size: 3.6rem !important;
    }
    
    body > div > div > div.col-lg-6.order-lg-1.text-center > p{
        font-size: 2.8rem !important;
    }

    body > div > div > div.col-lg-6.order-lg-2.text-center > img {

        margin-top: 4rem !important;
    }
}
@media (max-width:768px){
    body > div > div > div.col-lg-6.order-lg-1.text-center > h1{
        font-size: 3rem !important;
    }
    
    body > div > div > div.col-lg-6.order-lg-1.text-center > p{
        font-size: 2.3rem !important;
    }

}
@media (max-width:485px){
    body > div > div > div.col-lg-6.order-lg-1.text-center > h1{
        font-size: 2.6rem !important;
    }
    
    body > div > div > div.col-lg-6.order-lg-1.text-center > p{
        font-size: 2rem !important;
    }

}
@media (max-width:425px){
    body > div > div > div.col-lg-6.order-lg-1.text-center > h1{
        font-size: 2.4rem !important;
    }
    
    body > div > div > div.col-lg-6.order-lg-1.text-center > p{
        font-size: 1.8rem !important;
    }

}
@media (max-width:398px){
    body > div > div > div.col-lg-6.order-lg-1.text-center > h1{
        font-size: 2.2rem !important;
    }
    
    body > div > div > div.col-lg-6.order-lg-1.text-center > p{
        font-size: 1.7rem !important;
    }

}
@media (max-width:370px){
    body > div > div > div.col-lg-6.order-lg-1.text-center > h1{
        font-size: 2rem !important;
    }
    
    body > div > div > div.col-lg-6.order-lg-1.text-center > p{
        font-size: 1.5rem !important;
    }

}
@media (max-width:328px){
    body > div > div > div.col-lg-6.order-lg-1.text-center > h1{
        font-size: 1.9rem !important;
    }
    
    body > div > div > div.col-lg-6.order-lg-1.text-center > p{
        font-size: 1.4rem !important;
    }

}


/*ZERO COMMISION */

.commision{
    text-align: center;
    color: #fff;
    background: linear-gradient(90deg, #ff1b6b, #45caff);
  
}

.commision h2 {
    font-size: 3rem;
    font-family: "Roboto", sans-serif;
    
}

.slogan {
    
    text-align: center;
    max-width: 100rem !important;
    margin: 0 auto;
}

.slogan h2 {
    font-size: 3rem;
}

/* MEDIA QUERY FOR SLOGAN */

@media (max-width:500px) {
    .commision h2 {
        font-size: 2.5rem;
        
    }
}
@media (max-width:410px) {
    .commision h2 {
        font-size: 2.2rem;
        
    }
}
@media (max-width:363px) {
    .commision h2 {
        font-size: 1.9rem;
        
    }
}
@media (max-width:315px) {
    .commision h2 {
        font-size: 1.6rem;
        
    }
}
@media (max-width:1000px) {

    .slogan {

        max-width: 80rem !important;
       
    }
    .slogan h2 {
        font-size: 2.5rem;
    }
}
@media (max-width:800px) {

    .slogan {

        max-width: 70rem !important;
       
    }
    .slogan h2 {
        font-size: 2.2rem;
    }
}
@media (max-width:700px) {

    .slogan {

        max-width: 60rem !important;
       
    }
    .slogan h2 {
        font-size: 2rem;
    }
}
@media (max-width:600px) {

    .slogan {

        max-width: 50rem !important;
       
    }
    .slogan h2 {
        font-size: 1.8rem;
    }
}
@media (max-width:500px) {

    .slogan {

        max-width: 40rem !important;
       
    }
    .slogan h2 {
        font-size: 1.6rem;
    }
}
@media (max-width:370px) {

    .slogan {

        max-width: 30rem !important;
       
    }
    .slogan h2 {
        font-size: 1.6rem;
    }
}




/* TICKETS */


body > div.container.ticket-main > div > div.col-lg-6.order-lg-2.text-center.tickets> h2{
    font-size: 4rem !important;
    min-width:  100% !important;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    background: linear-gradient(90deg, #ff1b6b, #45caff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.list-item {
    margin-bottom: 1rem;
    text-align: left;
}


.ticket-list{

    font-family: "Roboto", sans-serif;
    font-weight: 400 !important;
    letter-spacing: 0.2rem;
    margin-top: 2rem;
    /* text-align: left; */
    margin-left: 20%;

}

body > div.container.ticket-main > div > div.col-lg-6.order-lg-1.text-center > img {
    max-width: 90%;
}

.ticket-icon {
    height: 5rem;
    width: 5rem;
    stroke: #ff1b6b;
}








/* Media Query for Tickets */
 @media (max-width:992px) {

    .tickets {
        margin-top: 3rem !important;font-size: 4rem !important;
    }
    
 }


@media (max-width:500px) {

    body > div.container.ticket-main > div > div.col-lg-6.order-lg-2.text-center.tickets> h2{
        font-size: 3.5rem !important;
    }
} 


@media (max-width:450px) {

    body > div.container.ticket-main > div > div.col-lg-6.order-lg-2.text-center.tickets> h2{
        font-size: 3rem !important;
    }
} 

@media (max-width:400px) {

    body > div.container.ticket-main > div > div.col-lg-6.order-lg-2.text-center.tickets> h2{
        font-size: 2.5rem !important;
    }
} 

footer {
    color: #fff;  
    padding-bottom: 5rem;     
    padding-top: 5rem !important;
    text-align: center !important;
    background: linear-gradient(90deg, #ff1b6b, #45caff);
}


.footer-heading h2{
    font-family: "Work Sans", sans-serif;
    font-size: 8rem !important;
    font-weight: 600;
    padding-top: 3re;
}


.location-icon  {
    height: 4rem;
    width: 4rem;
    padding-bottom: 1rem !important;
}

.address-text {
    font-family: "Roboto", sans-serif;
    width: 100%;
    font-size: 3rem;
    text-align: center;
    padding-left: 1rem;   
    text-align: center;
   
}



.contact-icons {
    display: flex;
    justify-content: center;
}
.phone-icon {
    height: 10rem;
    width: 5rem;
    cursor: pointer;
    margin-right: 2rem;
    fill: #00FF00;
}



.whatapp-icon {

    height: 10rem ;
    width: 5rem ;
    cursor: pointer;
    margin-left: 2rem;
    fill: #00FF00;

}

.phone-icon:hover,
.whatapp-icon:hover {
    fill: #25D366!important;
}


/* Media Query for Tickets */


@media (max-width:780px) {

    .footer-heading h2 {
        font-size: 6rem !important; 
    }



}

@media (max-width:426px) {

    .footer-heading h2 {
        font-size: 5rem !important; 
    }

}


@media (max-width:500px) {

    .address-text  {
        font-size: 2.5rem !important; 
    }

    .location-icon  {
        height: 3rem;
        width: 3rem;
    }

}
@media (max-width:420px) {

    .address-text  {
        font-size: 2rem !important; 
    }

    .location-icon  {
        height: 2.5rem;
        width: 2.5rem;
    }

}

@media (max-width:350px) {

    .address-text  {
        font-size: 1.8rem !important; 
    }

    .location-icon  {
        height: 2.2rem;
        width: 2.2rem;
    }

}