* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    color: black;
   
    --shadow: rgba(0, 0, 0, 0.05) 0px 6px 10px 0px,
      rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
    --color:rgb(68, 152, 145);
    --logoGreen: #2D969A;
    --btnColorRed:rgb(209, 39, 39);
    --btnColorGreen:cadetblue;
    --optionColor: rgb(112, 198, 191);
    --gap: 0.1rem;
    --radius: 5px;
    --button-inputHeight: 35px;
    --buttonPadding: 1px 10px 0px 6px;
    --selectPadding: 5px;
    --footerPadding: 20px;
    --fiestaBackground: radial-gradient(gold, pink, orange,purple);
  }
  
  
  /* || VARIABLES */
  :root {
    --inputBorder: solid 2px black;
    --inputBorderRad: 7px;
    --inputFontSize: 16px;
    --inputfontWeight: 500;
    --inputRequiredColor: red;  
    --cellPadding: 10px;
    --cellFontSize: 16px;
    --borderRadius: 10px;
  }
  
  header, footer {
    color: #fff;
    text-align: center;
    height: 2remx;
    box-shadow: 0 1px 2px black;
  }
  
  header {
    position: sticky;
    top: 0;
    font-size: 5rem;
  }
  
  .top {
    position: fixed;
    top: 0;
    font-size: 3rem;
    width: 100%;
    z-index: 1;
  }
  
  footer {
    background-color: #000;
    position: sticky;
    bottom: 0;
    font-size: 3rem;
    background-image: var(--fiestaBackground);
    color: Black;
  }

  section {
    height: 12vh;
  }

  .fiesta {
    background-image: var(--fiestaBackground);
  }
  .orange { background-color: orange;}
  .blue { background-color: #00f;}
  .red { background-color: #f00;}
  .green { background-color: green;}

  h2 {
    align-items: center;
  }

  .siteTitle {
    display: flex;
    justify-content: center;
  }

  img {
    display: block;
    max-width: 30%;
    height: auto;
  }
  
  /* || Utility CLASSES STYLES */
  .nowrap {
    white-space: nowrap;
  }
  
  /* || GENERAL STYLES */
  html {
    margin-top: 0;
    scroll-behavior: smooth;
  }
  
  body {
    min-height: 100vh;
    background-color: #758bac;
    border-radius: .1rem;
    padding: 0;
  }

.cartTitle {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    border-bottom: 1px solid black;
    padding-bottom: 20px;
}

.control {
    padding: 5px;
    min-height: 100vh;
    overflow: hidden;
}

select {
    font-size: var(--inputFontSize);
    font-weight: var(--inputfontWeight);
    padding: 4px;
    padding-left: 4px;
    border: var(--inputBorder);
    border-radius: var(--inputBorderRad);
    width: 100%;
    margin: 0;
    background-color: var(--color);
    opacity: .9;
    cursor: pointer;
    color: white;
    height: var(--button-inputHeight);
  }
  
  select:hover{
    opacity: .8;
  }
  
  input {
    height: var(--button-inputHeight);
    width: 100%;
    font-size: var(--inputFontSize);
    font-weight: var(--inputfontWeight);
    padding: 5px;
    padding-left: 8px;
    border: var(--inputBorder);
    border-radius: var(--inputBorderRad);
    caret-color: var(--inputRequiredColor);
    color: var(--btnColorRed);
  }
  
  input::placeholder {
    color:var(--inputRequiredColor);
  }
  
  input[type="date"] {
    margin-left: 0;
    font-size: var(--inputFontSize);
    font-weight: var(--inputfontWeight);
    color:var(--inputRequiredColor);
    border: var(--inputBorder);
    border-radius: var(--inputBorderRad);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
    background-color: aliceblue;
    width: 100%;
  }
  
  input[type="search"] {
    width: 100%;
    height: var(--button-inputHeight);
    margin-left: 0;
    font-size: var(--inputFontSize);
    font-weight: var(--inputfontWeight);
    color: var(--btnColorRed);
    border: var(--inputBorder);
    border-radius: var(--inputBorderRad);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
   
    background-image: url('img/searchicon.png');
    background: transparent url('img/searchicon.png');
  }
  
  input[type="number"] {
    width: 25%;
    min-width: 50px;
    height: var(--button-inputHeight);
    font-size: var(--inputFontSize);
    font-weight: var(--inputfontWeight);
    color:var(--inputRequiredColor);
    border: var(--inputBorder);
    border-radius: var(--inputBorderRad);
    background-color: aliceblue;
  }
  
  .btn {
    white-space:nowrap;
    background-color: var(--logoGreen);
    padding: var(--buttonPadding);
    font-size: var(--inputFontSize);
    font-weight: var(--inputfontWeight);
    border: var(--inputBorder);
    border-radius: var(--inputBorderRad);
    height: var(--button-inputHeight);
    margin: 0;
    margin-top: 10px;
    width: 100%;
    color: white;
    cursor: pointer;
  }
  
  .btn:hover {
    opacity: .7;
  }
  
.flexWrap {
   
    display: flex;
    vertical-align: middle;
    min-width: 0;
    padding: 5px;
    gap: var(--gap);
  }

.flexWrap2 {
    display: flex;
    vertical-align: middle;
   
    margin-top: 15px;
   
  }

.search {
    width: 100%;
  }

.deleteOperation.btn{
    width: 100%;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

button.btn.roundCorners {
  border-bottom-right-radius: var(--inputBorderRad);
  border-top-right-radius: var(--inputBorderRad);
  background-color: var(--btnColorRed);
  width: 100%;
}

button.btn.searchBtn {
  border-bottom-right-radius: var(--inputBorderRad);
  border-top-right-radius: var(--inputBorderRad);
  background-color: var(--color);
  margin: 1rem;
  margin-bottom: 0;
  width: 100%;
}

button.btn.squareCorners {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  width: 100%;
  background-color: var(--btnColorRed); 
}

button.btn.searchBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  margin-left: auto;
  margin-right: auto;
  padding: 25px;
  width: 200px;
  font-size: 20px;
}

p {
  margin-bottom: 5px;
  margin-left: 5px;
}

.flightData {
  justify-content: left;
  margin-top: 0px;
  margin-top: 15px;
  margin-bottom: 0;
  border: 1px solid black;
  border-radius: var(--borderRadius);
  font-size: 20px;
  background-color: aliceblue;
  padding: 0;
  box-shadow: 0 1px 2px black;
}

.gridContainer {
  display: grid;
  grid-template-columns: 80px repeat(12, 1fr);
  grid-template-rows: 1fr 1fr;
  padding: 0;
  margin: 6px;
  margin-left: 0;
  margin-right: 0;
  border-radius: var(--borderRadius);
  border: solid 1px black;
  background-color: aliceblue;
  box-shadow: 0 1px 2px black;
}

.results {
  font-size: var(--cellFontSize);
  justify-content: center;
  border-top-left-radius: var(--borderRadius);
  border-bottom-left-radius: var(--borderRadius);
  align-items: center;
  display:grid;
  background-color: aqua;
  grid-column: 1;
  grid-row: 1/2;
  cursor: pointer;
}

.resultsDelete {
  font-size: var(--cellFontSize);
  justify-content: center;
  border-top-left-radius: var(--borderRadius);
  border-bottom-left-radius: var(--borderRadius);
  align-items: center;
  display:grid;
  background-color: red;
  grid-column: 1;
  grid-row: 2/3;
  cursor: pointer;
}

.resultsAdd {
  font-size: var(--cellFontSize);
  justify-content: center;
  border-top-left-radius: var(--borderRadius);
  border-bottom-left-radius: var(--borderRadius);
  align-items: center;
  display:grid;
  background-color: aliceblue;
  grid-column: 1;
  grid-row: 1/2;
  cursor: pointer;
}

#resultsData {
  padding: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.flight {
  display:grid;
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: beige;
  grid-column: 2/7;
 
}

.details {
  display:grid;
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: coral;
  grid-column: 7/12;
  
}

.bags {
  display:grid;
  border-top-right-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: darkcyan;
  grid-column: 12/14;
 
}

.depart {
  display:grid;
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: #00AEEB;
  grid-row: 2;
  grid-column: 2/8;
 
}

.return {
  display:grid;
  border-bottom-right-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: darkturquoise;
  grid-row: 2;
  grid-column: 8/14;
  
}

.interfaceGrid {
  display: grid;
  border-radius: var(--borderRadius);
  padding: 10px;
  border: solid 1px black;
  background-color: aliceblue;
  box-shadow: 0 1px 2px black;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 5px;
  
}

.sort {
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 0;
  grid-column: 3;
}


.currency {
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 1;
  grid-column: 6;
}
.customerBags {
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 2;
  grid-column: 5;
}

.stopOvers {
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 2;
  grid-column: 4;
}

.ticketClass {
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 3;
  grid-column: 4;
}

.maxFly {
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 3;
  grid-column: 5;
}

.fromAirport {
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 4;
  grid-column: 4/6;
}

.toAirport {
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 5;
  grid-column: 4/6;
}

.fromDate {
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 4;
  grid-column: 5;
}

.toDate {
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 5;
  grid-column: 5;
}

.toFromDate1  {
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 8;
  grid-column: 4/5;
}

.deleteOperation {
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  grid-template-rows: 6;
  grid-column: 4;
  padding: 0;
  margin-top: 0;
}

.clearOperation {
  display:grid;
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 6;
  grid-column: 5;
}

.searchOperation {
  display:grid;
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 7;
  grid-column: 4/6;
}

.sort {
  justify-content: center;
  border-radius: var(--borderRadius);
  font-size: var(--cellFontSize);
  padding: var(--cellPadding);
  background-color: rgb(220, 220, 245);
  grid-template-rows: 0;
  grid-column: 3;
}


p {
  white-space: nowrap;
}

.deleteOperation .btn{
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.searchOperation .btn{
  border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  
}

li {
  color: white;
}
li::marker {
  color:rgb(252, 106, 106);
  font-size: 30px;
}

ul {
  list-style-type: none;
  padding: 0 5px;
  
}

.dokdo-regular {
  font-family: "Dokdo", system-ui;
  font-weight: 600;
  font-style: normal;
  color: black;
}

.columns {
  font-size: 18px;
  display: flex;
  background-color: #3D4E60;
}

.column1 {
  padding: var(--footerPadding);
  text-align: left;
  width: 100%; 
 }

.column2 {
  padding: var(--footerPadding);
  display: flex;
  justify-content: center;
  border-left: 1px solid black;
  border-right: 1px solid black;
  width: 100%;
 }

 .column3 {
  padding: var(--footerPadding);
  text-align: left;
  width: 100%;
 }

 @media screen and (max-width: 769px) {
  .columns {
      flex-direction: column;
     
  }

.column1 {
  padding-left: 60px;
  margin: 0;
  padding-bottom: 0;
}

.column2 {
  padding: 0;
  margin: 0;
}

.column3 {
  padding: 0;
  margin: 0;
  padding-left: 60px;
  padding-top: 0;
  padding-bottom: 10px;
}

.column2Top { 
  margin: 0;
  padding: 0;
}

.column3Top { 
  margin: 0;
  padding: 0;
  margin-bottom: 25px;
}

img.dh{
  margin-top: 20px;

}

img.aws{
  display: none;
}

.control {
  padding: 0;
  margin: 0;
  margin-top: 30px;
}  


}

.copywright {
  font-size: 16px;
  padding: 8px;
  color: black;
}

a {
  text-decoration: none;
  color: aqua;
}

.cart {
    margin: 5px;
    margin-bottom: 10px;
    border: 1px solid black;
    border-radius: var(--borderRadius);
    font-size: 20px;
    background-color: aliceblue;
    padding: 5px;
    box-shadow: 0 1px 2px black;
  
}

.cartItems{
  border-bottom: 2px solid black;
  margin: 10px auto;
}

.itemDetails {
  display: flex;  
  justify-content: space-around;
  padding: 10px;
 
}

.cartTotal {
  display: flex;
  justify-content: flex-end;
  margin: 15px;
  font-weight: 600;
}

.detailColumn {
  display: flex;
  flex-direction: column;
  justify-content: left;
  margin: 0;
 padding-left: 7%;
}

.itemHeading {
  font-weight: 600;
  margin-bottom: 5px;

}

.deleteRow {
  padding: 5px;
  font-weight: 600;
  font-size: 16px;
  background-color: rgb(241, 64, 64);
  border: solid 1px black;
  border-radius: var(--borderRadius);
  cursor: pointer;
}

.cart-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-left: 5%;
}

.cartRows {
  border-bottom: 1px solid black;
}

.itemQuantity {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0;
}