@charset "utf-8";
/* CSS Document */


*{
  box-sizing:border-box ! important;
}
.navbar{
	background:orangered;
}

.navbar-toggler{
   margin:0px ! important;
}


.navbar-toggler:hover{
 
}


.fa-bars{
    font-size: 3vw !important;
    color: white !important;
}

#logo{
    width: 20% !important;
}

.searchBar[type=text] {
  width: 120px;
  border:none ! important;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url("images/searchicon.png");
  background-size: 8%;
  background-position: 4px 10px; 
  background-repeat: no-repeat;
  padding: 10px ! important;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

.searchBar[type=text]:focus {
  width: 100%;
  background: white;
}


input::placeholder,
textarea::placeholder {
  color: #888888;
  font-style: italic;
  opacity: 1; /* Ensures Firefox applies your exact color choice */
  padding-left:10px ! important;
}


.fa-angle-down{
 transition: transform 0.5s;	
}

.fa-angle-down:hover{
 font-size: 20px;
  transform: rotate(180deg);	
}


.brandDiv{
  background:blue;
  max-width:15% ! important;
  display:flex ! important;
}

.scrollMenuContainer{
    max-width:100% ! important;
    height:100px ! important;
    display: flex ! important;
	gap:20px !important;
    flex-wrap: nowrap ! important; /* Prevents wrapping to the next line */
    overflow-x: auto ! important;  /* Enables horizontal scrolling */
    -webkit-overflow-scrolling: touch ! important;
}


.dshow{
  white-space: nowrap ! important; /* Keeps the text on a single line */
  flex-shrink: 1 ! important; /* Allows the item to scale down to fit the row */
}


.dshow .rap{
	opacity: 0;
	visibility: hidden;
	position: absolute ! important;
}
		

.dshow p{
    margin-top: 0px !important;
    font-size:3vw;
}

.dshow:hover .rap{
	top:15px !important;
	opacity: 1;
	visibility: visible;
	transition: all 0.3s ease;
    border-top-style: solid !important;
    border-top-width: 1px !important;
    border-top-color: orangered !important;
}

.rap{
  background: white;
  color: black;
  right:6% ! important;
  width:250px ! important;
  padding:10px ! important;
}

.pShow{
    display: none;
}

#pMobi{
   display: none;
}
	
ul li{
  font-size: 3vw !important;
}

#bell{
  margin-top: 0px !important;
  margin-right: 0px !important;
}


#mE{
  margin-top: 10px !important;
}



/*For Desktop View*/

@media screen and (min-device-width: 1025px){
    
 .scrollMenuContainer{
    max-width:80% ! important;
    height:60px ! important;
    display: inline-flex ! important;
	gap:20px !important;
    overflow: scroll !important;
}

 .searchBar[type=text] {
  width: 200px ! importsnt;
  margin-top: 0px;
  margin-left: 0px;
  box-sizing: border-box;
   /*border: 2px solid #ccc;*/
  border-radius: 4px;
  font-size: 0.8vw ! important;
  background-color: white;
  background-image: url("images/searchicon.png");
  background-size: 25%;
  max-height: 40px;
  background-position: 4px 4px; 
  background-repeat: no-repeat;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}


input::placeholder,
textarea::placeholder {
  color: #888888;
  font-style: italic;
  font-size:0.8vw ! important;
  opacity: 1; /* Ensures Firefox applies your exact color choice */
  padding-left:10px ! important;
  padding-right:10px ! important;
}

.fa-bars{
    font-size: 2.2vw !important;
}


#logo{
    width: 30% !important;
    margin-left: 0px !important;
}


.dshow{
    margin-top: 0px !important; 
	
}

.dshow p{
    margin-top: 0px !important;
    font-size:1vw;
	
}

ul li{
    font-size: 1.2vw !important;
  }
  
  
	
}


	
/* For Tablet Landscape View */
@media only screen and (min-device-width: 641px)
and (max-device-width: 1024px) {
    
    
.brandDiv{
  width:14% ! important;
  margin-top: 0px ! important;
  margin-left: 0px ! important;
  display:flex! important;
}
   
  
#logo{
    width: 40px !important;
    margin-left: 0px !important;
}
 
  
 .scrollMenuContainer{
    width:700px ! important;
    background:yellow ! important;
    max-height:40px ! important;
    margin-right: 0px ! important;
    display: flex ! important;
	gap:20px !important;
    overflow: auto !important;
    
    p{
     font-size:1.2vw ! important;
    }
     
}


.searchBar{
    
   width: 50px ! important; 
}

 .searchBar[type=text] {
  margin-top: 0px;
  margin-left: 0px;
  box-sizing: border-box;
   /*border: 2px solid #ccc;*/
  border-radius: 4px;
  font-size: 0.8vw ! important;
  background-color: white;
  background-image: url("images/searchicon.png");
  background-size: 20%;
  max-height: 40px;
  background-position: 4px 4px; 
  background-repeat: no-repeat;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}


input::placeholder,
textarea::placeholder {
  color: #888888;
  font-style: italic;
  font-size:0.8vw ! important;
  opacity: 1; /* Ensures Firefox applies your exact color choice */
  padding-left:10px ! important;
  padding-right:10px ! important;
}

.fa-bars{
    font-size: 2.2vw !important;
}


.dshow{
    margin-top: 0px !important; 
	
}

.dshow p{
    margin-top: 0px !important;
    font-size:1vw;
	
}

ul li{
    font-size: 1.2vw !important;
  }
  
  
}
	
	


/* For Tablet Portrait View */
@media only screen and (min-device-width: 421px)
and (max-device-width: 640px) {
 
  .navbar{
   
  }
  
  
  .fa-bars{
    font-size: 6vw !important;
  }

  #logo{
    width: 55% !important;
    margin-left: -55px !important;
  }

   
.mobile{
  margin-left: -25px !important;
}

  #mE{
  
  }

.searchBar[type=text] {
  width: 30px;
  margin-top:0px;
  margin-left: -85px;
  /*border: 2px solid #ccc;*/
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url("images/searchicon.png");
  background-size: 60%;
  max-height: 40px !important;
  background-position: 10px 8px; 
  background-repeat: no-repeat;
   padding: 10px 10px 10px 15px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

.searchBar[type=text]:focus{
  width: 110px !important;
}
::placeholder{
	font-size: 12px !important;
}

  .ddropCover{
    margin-top: 0px !important;
  }

  .navbar-toggler{
    margin-top: 0px !important;
    margin-left: -10px !important;
  }

   .dshow p{
     margin-top: 0px !important;
  }
  
  
  .dshow p{
    font-size: 2vw !important;
  }
  
  .rap p{
    margin-top: 0px !important;
    font-size: 2vw !important;
  }
  
  ul li{
    font-size: 2vw !important;
  }
  
}
	

@media screen and (max-width:420px){
    
.navbar{

}

.desk{
  display: none !important;
}

.mobile{
  display: block !important;
  margin-left: 0px !important;
}



.brandDiv{
  background:blue;
  max-width:25% ! important;
  margin-left:0px ! important;
  display:flex ! important;
}

.scrollMenuContainer{
    max-width:70% ! important;
    height:30px ! important;
    display: flex ! important;
	gap:20px !important;
    flex-wrap: nowrap ! important; /* Prevents wrapping to the next line */
    overflow-x: auto ! important;  /* Enables horizontal scrolling */
    -webkit-overflow-scrolling: touch ! important;
    
    p{
     font-size:3.2vw ! important;
    }
}

.navbar-toggler{
   margin-left: 0px !important;
   border-style: none;
}


.fa-bars{
    margin-top: 0px !important;
    margin-left: -15px !important;
    font-size: 8vw !important;
}


 #logo{
    width: 50%  !important;
    margin-left: 0px !important;
}

.searchBar[type=text] {
  width: 35px ! important;
  margin-left:-90px !important;
  box-sizing: border-box;
  /*border: 2px solid #ccc;*/
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url("images/searchicon.png");
  background-size: 50%;
  max-height: 35px !important;
  background-position: 10px 8px; 
  background-repeat: no-repeat;
   padding: 10px 15px 10px 15px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

.searchBar[type=text]:focus{
   background-color: white !important;
  width:100px !important;
  margin-left:-65px !important;
}


#pDesk{
   display: none;
}

.pShow{
    display: block !important;
}


#pMobi{
    display: block !important;
    margin-left:0px !important;
}




.dshow p{
    font-size:3.2vw !important;
	
}

.rap{
    
  p{
     font-size:3vw !important;
  }
  
}


#bell{
  margin-top: 0px !important;
  margin-right: 0px !important;
}

#mE{
  margin-right: 0px !important;
}

}