/*----------------------------------------- Restting The Values-------------------------------------- */
*{
   padding: 0%;
   margin: 0%;
}
/* =============================================================================================================== */
/* Styling of the website begin */
/* A)Navigation Bar */
/* .navigation{
    /* position: fixed;
    top: 0%;
    width: 100%; */


.navbar{
    display: flex;
    /* position: fixedy; */
    /* position: stick; */
    /* top: 0%; */
      /* position: fixed; */
  top: 0;
  /* background: rgb(230, 46, 0); */
  width: 100%;
    
    
    /* margin: 1rem 0rem; */
    /* margin-left: 1rem; */
}
.a_aff{
margin-top: 28rem;
}
.navbar::before{
    content: "";
    background: black;
    position: absolute;
    z-index: -1;
    opacity: 0.3;
    height: 9rem;
    width: 100%;
}
.navbar ul{
    display: flex;
    align-items: center;
    /* justify-content: ; */
    margin: 2rem 4rem;
}
.navbar li{
    list-style: none;
    margin: 5% 7%;
    color: white;
}
.navbar li a{
    text-decoration: none;
    color: white;
    font-size: 20px;
    transition: all 1s;
    font-family: sans-serif;
    
}
.navbar li a:hover{
    color: black;
}
#logo-nav{
    width: 4rem;
    height: 4rem;
    margin: 0rem 1rem;
    transition: all 1s;
    animation-name: rotate;
    animation-duration: 2s;
}
@keyframes rotate{
    0%{
        transform: rotate(360deg);
    }
}
#logo-nav:hover{
transform: rotate(360deg);
}
.label-nav{
    margin: 4% 1rem;
    margin-left: 6rem;
}
#active_home{
    color: #000000
}
#active_home_hr{
    margin: 2rem 2rem;
}
/* ----------------------------------------------------- */
/* B)Section */

section{
    display: flex;
    margin-top:3rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 8rem;
}
header::before{
    content: "";
    background: url(bg.jpg) no-repeat;
    position: absolute;
    z-index: -1;
    height: 10rem;
    opacity: 0.8;
    height: 70rem;
    width: 1015%;
}
/* section::before{
    content: "";
    background: url(bg.jpg) center center/cover;
    position: absolute;
    z-index: -1;
    opacity: 5;
    height: 110rem;
    width: 100rem;
} */
section h3{
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    color: #b45b00;
    /* font-family: sans-serif; */
    font-size: 4rem;
    letter-spacing: 5px;
    cursor: pointer;
    font-family: 'Rum Raisin', sans-serif;
    transition: all 2s;
    /* transition-property: text-decoration ; */
    /* transition-duration: 1s; */
}
section h3:hover{
    text-decoration: underline;
}
section p{
    text-align: center;
    font-family: 'Rum Raisin', sans-serif;
    padding: 1rem 1rem;
    font-size: 23px;
    /* color: wheat; */
    color: A18B91;
    /* color: white; */
    color: #000000;
    color: rgb(228, 134, 26);
    /* width: 23rem; */
}
.p_bottom{
    margin-bottom: 1rem;
}
#ticket_logo{
    height: 3rem;
    width: 5rem;
}
#label_section{
    color: #a59b9b;
    border: solid wheat;
    padding: 1rem 1rem;
    font-size: 22px;
    margin: 4rem 3rem;
    background: #5a5a5a;
    font-family: sans-serif;
    border-radius: 1rem;
    transition:2s all;
    cursor: pointer;
}
#label_section:hover{
    /* transform: scale(2); */
    background-color: white;
    color: black;
}
    body{
        height: 100rem;
    }
    /* c)Website Content Styling Began */
     /* i)Afforable Prices Styling */
     #price {
        height: 15rem;
        width: 17rem;
        transition: none;
        margin: 2rem;
    }
     .Afordable-Prices-Of-Tickets{
        border: solid rgb(255, 238, 238);
        padding: 2rem 2rem;
        background-color: rgb(167, 165, 165);
        display: flex;
        margin-bottom: 3rem;
            margin: 2rem;
            border-radius: 2rem;
        /* flex-wrap: wrap; */
        transition: all 2s;
         

     }
     .Afordable-Prices-Of-Tickets:hover{
         box-shadow: 2rem  2rem 2rem 2rem rgb(190, 187, 187);}
      
     .content-of-price{
         display: flex;
         flex-direction: column;
         text-align: center;
         

         margin-left: 2rem;
         margin: 3rem;
     }
     .content-of-price h3{
        font-family: 'Rum Raisin', sans-serif;
        font-size: 3rem;
        letter-spacing: 2px;
        color: rgb(82, 78, 78);
     }
     .content-of-price  p{
        font-family: 'Rum Raisin', sans-serif;
        letter-spacing: 2px;
        color: rgb(233, 227, 227);
        font-size: 1.5rem;
     }
     #airindia{
        height: 10rem;
        width: 17rem;
        display: block
     }
     #emirates{
        height: 10rem;
        width: 13rem;
        /* display: block; */
        display: block;
        margin: 4rem 2rem;
     }
     #asia{
        height: 8rem;
        width: 11rem;
        /* display: block; */
     }
     .img-logo{
        width: 32rem;
        margin: 1rem 1rem;
        display: flex;
     }
     /* Footer Stylling */
     footer span{
        font-family: 'Courier New', Courier, monospace;
    /* background-color: black; */
    margin: 4rem 6rem;
    padding: 2px 3rem;
    color: white;
    justify-content: center;
     }
     .li-of-navbar{
         /* display: block; */
         display: flex;
         flex-direction: row;
     }
     .footer-content {
         background-color: black;
     }
     section h3{
         transition: all 2s;
     }
     section h3:hover{
         transform: scale(150%);
         /* transform: skew(150%); */
     }
     #btn{
         transition: all 2s;

     }
     #btn:hover{
         transform: scale(150%);
     }
     /* D)Media Queries */
      /* For PHone */
      @media (max-width:500px){
          .navbar ul{
              display: flex;
              flex-direction: column;
              margin: 0 0;
          }
          .navbar::before{
              height: 30%;
              width: 100%;

          }
          #logo-nav {
            width: 4rem;
            height: 4rem;
            margin: 0rem 1rem;
            transition: all 1s;
            animation-name: rotate;
            animation-duration: 2s;
            margin: 1rem 4rem;
        }
        .Afordable-Prices-Of-Tickets{
            flex-direction: column;
            justify-content: center;
            align-items: center;
             
    
         }
         .Afordable-Prices-Of-Tickets p{
             display: flex;
             flex-wrap: wrap;
             width: 23rem;
             font-size: 15px;
         }
         .navbar li{
             margin: 15px 15px;
         }
         header::before{
            content: "";
            background: url(bg.jpg) no-repeat;
            position: absolute;
            z-index: -1;
            height: 10rem;
            opacity: 0.8;
            height: 70rem;
            width: 105%;
        }
        section p{
            width: 23rem;
        }
        #label_section{
            width: 9rem;
            text-align: center;
        }
        #price{
            height: 8rem;
    width: 9rem;
    transition: none;
    margin: 0rem;
}
.content-of-price h3 {
    font-family: 'Rum Raisin', sans-serif;
    font-size: 23px;
    letter-spacing: 2px;
    color: rgb(82, 78, 78);
    width: 23rem;}
    #airindia {
        height: 8rem;
        width: 13rem;
        display: block;
        margin: -2rem 9rem;
    }
    #emirates {
        height: 8rem;
        width: 8rem;
        /* display: block; */
        display: block;
        margin: 8rem -62%;
    }
}
        
     
      
      @media  (min-width:500px)and (max-width:1030px){
          /* p{
            width: 23rem;
          }
          #op{
              width: 22rem;
          } */
            .Afordable-Prices-Of-Tickets{
            flex-direction: column;
            justify-content: center;
            align-items: center;
             
    
         }
         .navbar::before{
             width: 100%;
            }
           /* p{    width: 22rem;} */
         /* .navbar li{ */
             /* margin: 15px 15px */
             /* margin: 0px; */
         }
         /* body{
             width: 100%;
         } */
        
         
      }