:root{
  --uni-light-colorTheme1:  #1a800d;
  --uni-light-colorTheme2:  #56b36b;
  --uni-light-colorTheme3:  #c8ccc8;
  --uni-light-colorTheme4:  #010501;
  --uni-light-colorTheme5:  white;
  --uni-light-colorTheme6:  #59e746;
  --uni-light-colorTheme7: rgba(255,151,0,1);
  --uni-light-colorTheme8: #666;
  --uni-light-borderColor:  #1a800d;
  --uni-light-font-activeColor:   #1a800d;
  --uni-light-font-clearColor:   white;
  --uni-light-font-darkColor:   #010501;
  --uni-grey-bttn-fontColor: #6c757d;
  --uni-bright-bttn-fontColor: rgba(255,151,0,1);
  --html-default-shady-bgColor: rgb(248, 249, 250);
  --html-default-white-bgColor:white;
  --html-default-dark-bgColor:black;

  --uni-light-fontColor: white;
  --uni-dark-fontColor: black;  
  --uni-vibrant-fontColor: transparent;
  --uni-light-borderStyle: 2px solid white;
  --uni-dark-borderStyle: 2px solid  #a4f502;
  --uni-light-fontStyle: 4px solid white;
  --uni-dark-fontStyle: 4px solid black;  
  --tools-gradient-bgColor: linear-gradient(to bottom, rgba(27, 26, 26, 0.8), rgba(51, 49, 47, 0.8)) !important; /* Radiant linear gradient */
  --tools2-gradient-bgColor: linear-gradient(0deg, #d8dfcb, rgb(245, 236, 236));
  --dark-gradient-bgColor: linear-gradient(to bottom, rgba(14, 13, 13, 0.8), rgba(15, 15, 15, 0.8)) !important; /* Radiant linear gradient */
  


  --pg-bgColor: transparent;
  --pg-gradient-bgColor: linear-gradient(270deg, #a8ee1e, rgb(245, 236, 236));
  --pg-margin: 20px;
  --pg-padding: 20px;
  --pg-h2-fontSize: 45px;
  --pg-h3-fontSize: 30px;
  --pg-h4-fontSize: 16px;
  --pg-h5-fontSize: 12px;

  --ct-pg-main-height: 850px;  
  --ct-pg-leftCol-height: 710px;
  --ct-pg-rightCol-height: 710px;

  --ut-pg-main-height: 1200px;

  --prod-pg-main-height: 1900px;  
  --prod-pg-mainDetail-height: 1200px;  
  --prod-pg-ad-height: 300px;
  --prod-pg-productView-height: auto;  
  --prod-pg-productDetailView-height: auto;  
  --prod-pg-ad-height: 300px;

  --fr-container-padding: 0px;
  --fr-container-width: 0px;
  --fr-input-padding: 0px;
  --fr-label-padding: 0px;
  --fr-bttn-padding: 0px;
  --fr-label-padding: 0px;
  --fr-bttn-color: 0px;
  
  
  --lgn-fr-container-padding: 0px;
  --lgn-fr-container-width: 0px;
  --lgn--fr-input-padding: 0px;
  --lgn-fr-label-padding: 0px;
  --lgn-fr-bttn-padding: 0px;
  --lgn--fr-label-padding: 0px;
  --lgn-fr-bttn-color: 0px;
  
  --sec-image-bgColor: white;
 /** --sec-default-bgColor: linear-gradient(90deg, #a4f502, rgb(250, 244, 244));  **/
  --sec-default-bgColor: transparent;
  --sec-description-bgColor: linear-gradient(0deg, #d8dfcb, rgb(245, 236, 236));
  --sec-detail-bgColor: linear-gradient(360deg, #dfe4d6, rgb(245, 236, 236));
  --sec-padding: 0px;
  --sec-width: 100%;
  --sec-height: 450px;
  --sec-bgColor: transparent;
  --sec-header-fontStyle: 0;
  --sec-background: 0;  
  --sec-margin: 30px 0px;
  --sec-dark-bgColor: black;
  --sec-theme-bgColor: #057220;
  
  --rw-padding: 0px;
  --rw-width: 100%;
  --rw-bgColor: transparent;
  --rw-header-fontStyle: 0;
  --rw-background: 0;
  --rw-margin: 0px;
  --rw-height: 0px;
  
  --footer-padding: 0px;
  --footer-width: 100%;
  --footer-bgColor: transparent;
  --footer-header-fontStyle: 0;
  --footer-background: 0;
  --footer-margin: 0px;
  --footer-height: 0px;
  --footer-light-subBttn-color: white;
  --footer-dark-subBttn-color: black;
  
  --col-padding: 0px;
  --col-width: 100%;
  --col-bgColor: transparent;
  --col-header-fontStyle: 0;
  --col-background: 0;
  --col-margin: 0px;
  --col-height: 0px;
  
  --h1-fontSize: 0px;
  --h1-fontStyle: 'Caveat', cursive;
  --h1-fontColor: var(--uni-light-colorTheme1);
  --h1-padding: 20px;
  --h1-margin:0px;
  --h1-text: 10px solid black;
  
  --h2-fontSize: 0px;
  --h2-fontStyle: 0px;
  --h2-fontColor: blue;
  --h2-padding: 20px;
  --h2-margin:0px;
  --h2-text: 10px solid black;
  
  --h3-fontSize: 0px;
  --h3-fontStyle: 0px;
  --h3-fontColor: blue;
  --h3-padding: 20px;
  --h3-margin:0px;
  --h3-text: 10px solid black;
  
  
  --h4-fontSize: 0px;
  --h4-fontStyle: 'Bebas Neue';
  --h4-fontColor: blue;
  --h4-padding: 20px;
  --h4-margin:0px;
  --h4-text: 10px solid black;
  
  --h5-fontSize: 0px;
  --h5-fontStyle: 0px;
  --h5-fontColor: blue;
  --h5-padding: 20px;
  --h5-margin:0px;
  --h5-textStyle: 10px solid black;

  --pg-bttn-fontColor: white;
  --pg-bttn-hoverFontColor: black;

  --ut-rw-bgColor: white;  
  --bttn-bgColor:  #a4f502;
  }
  @font-face {
      font-family: 'Caveat';
      src: url('/public/resources/Caveat-VariableFont_wght.ttf') format('truetype');
      
    }
    @font-face {
      font-family: 'Bebas Neue';
      src: url('/public/resources/BebasNeue-Regular.ttf') format('truetype');
    }
    @font-face {
      font-family: 'YatraOne';
      src: url('/public/resources/YatraOne-Regular.ttf') format('truetype');
      /* Add additional font formats if needed, like eot, ttf, svg */
    }
    @font-face {
      font-family: 'BlackOpsOne';
      src: url('/public/resources/BlackOpsOne-Regular.ttf') format('truetype');
      /* Add additional font formats if needed, like eot, ttf, svg */
    }
    @font-face {
      font-family: 'Acme';
      src: url('/public/resources/Acme-Regular.ttf') format('truetype');
      /* Add additional font formats if needed, like eot, ttf, svg */
    }  
    @font-face {
      font-family: 'Domine';
      src: url('/public/resources/Domine-VariableFont_wght.ttf') format('truetype');
      /* Add additional font formats if needed, like eot, ttf, svg */
    }
    @font-face {
      font-family: 'Bangers';
      src: url('/public/resources/Bangers-Regular.ttf') format('truetype');
      /* Add additional font formats if needed, like eot, ttf, svg */
    }
/**   **/


/**  Page Loader css **/
.loader-icon {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;  
  z-index: 9997;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
}

.loader-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #333;
  border-top-color: #666;
  animation: loader-spin 1s linear infinite;
  justify-content: center;
  align-items: center;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

.avatarIcon{
  font-size: 2.5rem !important; 
  color: var(--uni-light-colorTheme5) !important;   
}

.avatarIcon:hover{ 
    color: var(--uni-light-colorTheme2) !important;  
}
body{ 
  position: relative; 
  background: black;
/* 
background-color: var(--html-default-dark-bgColor); 
background-image: url('/public/assets/uploads/wall.jpg'); 
 background-repeat: no-repeat; 
 background-size: contain;  */
}
#stars-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1; /* Ensure the canvas is behind other elements */
  pointer-events: none; /* Allow clicks to pass through the canvas */
}
a{
  /* color: var(--uni-light-colorTheme4); */
  text-decoration: none;
  padding-left: 5px;
  padding-right: 5px;
}
.prd-bttn-ribbon button a{
  color: var(--uni-light-colorTheme5);
}
h1{
  color: var(--h1-fontColor);
  font-family: 'BlackOpsOne';
}
h2{
  color: var(--uni-light-font-activeColor);
}
.productDescription form h4{
  font-size: 18px;
}
h5{
  font-family: 'Acme';
  color: var(--uni-light-colorTheme5);
}
h6{
  color: var(--uni-light-font-clearColor);
}
p{
  overflow: hidden;
  font-family: 'Acme';
  color: var(--uni-light-colorTheme5);
}
.row{
  background: transparent !important;
}

.box-shadow{
  box-shadow: 0px 0px 10px 0px rgba(233, 230, 230, 0.918) !important;
}
.box-shadow:hover{
  box-shadow:
  -7px -7px 20px 0px rgba(255, 255, 255, .9),
  -4px -4px 5px 0px rgba(255, 255, 255, .9),
  7px 7px 20px 0px rgba(0, 0, 0, .2),
  4px 4px 5px 0px rgba(0, 0, 0, .3) !important;
transition: all 0.3s ease;
}
.customBlock{
  background: transparent !important;
}
/** Generic CSS classes **/
.default-color{
  color: var(--uni-light-colorTheme4) !important;
}

.row-padding-20{
  padding: 20px !important;
}

.row-margin-20{
  margin: 20px !important;
}
.padding-left-20{
  padding-left: 20px;
}
.padding-left-30{
  padding-left: 50px !important;
}
.padding-right-20{
  padding-right: 20px;
}
.padding-top-10{
  padding-top: 10px;
}
.padding-top-20{
  padding-top: 20px;
}
.padding-bottom-20{
  padding-bottom: 20px;
}
.margin-left-50{
  margin-left: 5px !important;
}
.margin-left-10{
  margin-left: 10px;
}
.margin-left-20{
  margin-left: 20px !important;
}
.margin-left-30{
  margin-left: 30px;
}
.margin-left-30p{
  margin-left: 30%;
}
.margin-left-40p{
  margin-left: 40%;
}
.margin-left-50{
  margin-left: 50%;
}
.margin-right-20{
  margin: 0 20px;
}
.margin-right-50{
  margin-right: 50%;
}
.margin-top-10{
  margin-top: 10px;
}
.margin-top-20{
  margin-top: 20px;
}
.margin-top-30{
  margin-top: 30px;
}
.margin-top-40{
  margin-top: 40px;
}
.margin-top-50{
  margin-top: 50px;
}
.margin-top-100{
  margin-top: 100px;
}
.margin-10{
  margin: 10;
}
.margin-20{
  margin: 20px;
}
.margin-30{
  margin: 30px;
}
.margin-40{
  margin: 40px;
}
.margin-50{
  margin: 50px;
}
.margin-bottom-20{
  margin-bottom: 20px;
}
.margin-bottom-30{
  margin-bottom: 30px;
}
.margin-bottom-40{
  margin-bottom: 40px;
}
.padding-10{
  padding: 10px;
}
.padding-20{
  padding: 20px;
}
.padding-40{
  padding: 40px;
}
.padding-80{
  padding: 80px;
}
.margin-10{
  margin: 10px;
}
.margin-20{
  margin: 20px;
}
.padding-left-30{
  padding-left: 50px !important;
}
.margin-left-20{
  margin-left: 20px !important;
}
.margin-top-5{
  margin-top: 5px !important;
}
.bg-black{
  background: var(--uni-light-colorTheme4) !important;
}
.gridPad{
  padding: 20px 80px;
  margin: 20px 0!important;
  height: 300px;
  width: 50%; 
    background: var(--tools-gradient-bgColor);  
}
.breadcrumb-item {
  font-weight: 700;
  font-family: 'Domine';
  color: var(--uni-light-colorTheme3) !important;
}
.breadcrumb-item a{
  font-weight: 700;
  font-family: 'Domine';
  color: var(--uni-light-colorTheme3) !important;
}
.breadcrumb .active{ 
  color: var(--uni-light-font-activeColor) !important;
}
.topHeading {
font-family: 'YatraOne';
font-weight: 700;
}
.loginHeadingRow{
background: #010501 !important;
}
.loginHeading{
  font-weight: 700;
  font-size: 22px;
  color: var(--uni-light-colorTheme1);
  font-family: 'YatraOne', sans-serif;
}
.loginHeading a:hover{
  color: var(--uni-light-colorTheme7) !important;
transition: all 0.3s ease;
}
.youtubeHeadingRow{
  background: none !important;
  }
  .youtubeHeading{
    font-weight: 700;
    font-size: 22px;
    color: var(--uni-light-colorTheme1);
    font-family: 'YatraOne', sans-serif;
  }
  .youtubeHeading a:hover{
    color: var(--uni-light-colorTheme7) !important;
  transition: all 0.3s ease;
  }
  .youtubeHeadingRow .fa-youtube{
    font-size: 2rem !important; 
  }
  .youtube {
    text-align: center;
    color: #bb0000;
    background: transparent !important;
    display: inline-block;
  }

.topProductHeading{
  font-weight: 700;
  color: var(--uni-light-colorTheme1);
  font-family: 'BlackOpsOne'
}
.default-color{
  color: var(--uni-light-colorTheme4) !important;
}
.centered{
  text-align: center;
}
.dark-container{
  padding:20px 0px;
background: #010501 !important;
color: white;
border: 2px solid rgb(63, 61, 61);
}

.container-centered{
  display: flex;
  justify-content: center;
  align-items: center;
 
}
.login-container-centered{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
/**  Pagination buttons css **/

#pagination{
  justify-items: center !important;
  text-align: center;
  margin: 10px 30% !important;
}

#pagination button{
  border: none !important;
  display: solid;
}
/**  Pagination buttons css **/

.righted{
  text-align: right;
}
/** Generic CSS classes **/

.rightWinged{
  margin-left: 10px;
  margin-right: 150px;
}

.image-style{
  padding-top: 10px; padding-left: 5px;
  padding-right: 5px;
  border-radius:6px;
}

.clr{
  clear: both;
}

.cart-header{
  text-align: center !important;
}
.modal-footer{
  border-top: none !important;
}

.dQuantity{
  width: 70px !important;
  text-align: center;
}

.text-right{
  text-align: right !important;
 
}
.gmap{
  border:1px solid rgb(248, 249, 250); padding:5px; border-radius: 10px; 
  width: 100%; height: 400px;
}

/** Body CSS **/
.pageLogo{
  /**    border-radius: 60px;  **/ 
  height: 100px;
  width: 100px;
}
.appLogo{
/**   border-radius: 40px;    **/
  height: 80px;
  width:80px;
  margin-left: 50px; 
  background: transparent;  
}
.appLogo:hover{
/*  box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.8);  */
  transition: box-shadow 0.2s ease; /* Adding a smooth transition for a better visual effect */
  color: var(--uni-light-colorTheme3) !important;
}
.sideIconToggle{
  margin-right: 300px; 
}

.top-bar{
  background-color: var( --uni-light-colorTheme3);
  height: 5px;
  margin-bottom: 1px;
}

.container{
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
  clear: both;
  background: transparent !important;
}

.navbar{
   background: var(--dark-gradient-bgColor) !important;
  margin-bottom: 2px !important;
  margin-left: 40px !important;
  margin-right: 40px !important;
  border-radius: 5px;
}

.navbar a{
  font-weight: 600; 
  font-size: 20px;
  font-family: 'BlackOpsOne';
  margin: 15px;
  color: var(--uni-light-colorTheme3);
}
.navbar a.active{  
  color: var(--uni-light-colorTheme1) !important;
  font-weight: 800; 
}
.navbar a.active i{  
  color: var(--uni-light-colorTheme1) !important;
  font-weight: 800; 
}
.navbar a:hover{
  color: var(--uni-light-colorTheme1) !important;
  font-weight: 800; 
  transition: box-shadow 2s ease;
}

.navbar li:hover{ 
  /* box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.8); /* Adjust the values for the desired glow effect */
  transition: box-shadow 0.2s ease; /* Adding a smooth transition for a better visual effect */
  color: var(--uni-light-colorTheme3) !important;
  border-radius: 6px;
}
.navbar-toggler{
  color: var(--uni-light-colorTheme5) !important;
  background-color: var(--uni-light-colorTheme5) !important;
  margin-right: 40px !important ;
}
.navbar-toggler-icon{
  color: var(--uni-light-colorTheme5) !important;
  background-color: var(--uni-light-colorTheme5) !important;
}
.navbar-collapse{
  text-align: center !important;
  
}

/** Trending article row **/
.trendingRow{
  max-height: 300px !important;  
  background-color: black;
}
.latestBackground{
  position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
min-height: 300px !important;
background-image: url('/public/assets/uploads/app/latestArticleBanner.jfif');
background-size: cover; background-position: center;
}

.trendingBackground{
  position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
min-height: 300px !important;
background-image: url('/public/assets/uploads/app/trendingArticleBanner.jfif');
background-size: cover; background-position: center;
}


.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0); /* Initially transparent */
transition: background 0.3s ease-in-out;
}
/* Hover effect */
.latestBackground:hover .overlay {
background: rgba(0, 0, 0, 0.8); /* Darker overlay */
}
.trendingBackground:hover .overlay {
background: rgba(0, 0, 0, 0.8); /* Darker overlay */
}

.latestBackground h4, .latestBackground p, .trendingBackground h4, .trendingBackground p{
position: relative;
transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
}

.trendingBackground:hover h4, .trendingBackground:hover p, .latestBackground:hover h4, .latestBackground:hover p{
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.8);
  color: #fff; /* Ensure text is more visible */
  display: block !important;
}

/* Default hidden state */
.sub-content {
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  background:  var(--tools-gradient-bgColor);
  border-radius: 5px;

}

/* Slide from left */
.sub-content.from-left {
  transform: translateX(-50px);
}
.sub-content.from-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.sub-content.from-right {
  transform: translateX(50px);
}
.sub-content.from-right.visible {
  opacity: 1;
  transform: translateX(0);
}


/** Jumbotron CSS **/


.jumbotron{
  background: url(/public/assets/uploads/static/homeDecor.webp) no-repeat 10% 0;
  background-size: cover; /* Add this line to make the background image cover the entire container */
  width: 100%;
  height: 500px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease; /* Adding a smooth transition for a better visual effect */
  border-radius: 6px;
}

.jumbotron:hover {
  opacity: 0.7;
  transition: width 2s;  
 }

.jumbotron:hover .jumbotron-content {
  display: block;
  transition: width 2s;  
  color: var(--uni-light-colorTheme6);  
}

.jumbotron::after { 
  pointer-events: none; /* Ensure the pseudo-element doesn't interfere with interactions */
  position: relative;
   z-index: 1; /* Place it above the background image */
   transition: opacity 0.8s ease; /* Adding a smooth transition for a better visual effect */
}

.jumbotron:hover::after {
  opacity: 0; /* Make the glossy texture disappear on hover */
  transition: width 2s;  
}

.jumbotron-content{
  color: var(--uni-light-colorTheme1);  
  float: right;
  text-align: center;
  position: relative;
  justify-content: center;
  margin-top:20px;
  padding-top:20px;
  z-index: 2; /* Place the content above the pseudo-element */
display: none;
}

.jumbotron-content h1{
  color: var(--uni-light-colorTheme6);  
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adjust the values for the glow effect */
  margin-top: 100px;
}

.jumbotron-content p{
  color: var(--uni-light-colorTheme5);  
  margin: 0 50px !important;
  font-weight: bold;
  width: 90% !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Adjust the values for the glow effect */
  font-family: 'BlackOpsOne';
}
.customJumbotron{
  background: url(/public/assets/uploads/static/aquascape.jpg) no-repeat 10% 0;
  overflow: hidden;
  transition: background 0.3s ease; /* Adding a smooth transition for a better visual effect */
  background-size: cover;
  background-position: center;
}
.customJumbotron h1{
  color: var(--uni-light-colorTheme7);  
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adjust the values for the glow effect */

}

.customJumbotron p{
  color: var(--uni-light-colorTheme5);  
  margin: 0 20px !important;
  font-weight: bold;
  width: 90% !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Adjust the values for the glow effect */
  font-family: 'Acme';
}
.motivationJumbotron{
  overflow: hidden;
transition: background 0.3s ease; /* Adding a smooth transition for a better visual effect */
background-size: cover;
background-position: center;

}
.motivationJumbotron h2{
color: var(--uni-light-colorTheme7);  
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adjust the values for the glow effect */

}

.motivationJumbotron p{
color: var(--uni-light-colorTheme5);  
margin: 0 20px !important;
font-weight: bold;
width: 90% !important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Adjust the values for the glow effect */
font-family: 'Acme';
}
.featuredAdsJumbotron {
  position: relative;
    overflow: hidden;
  background-size: cover;
  background-position: center;
}

.featuredAdsJumbotron h3 {
 font-size: 36px !important;
 font-weight: 700;
}
.featuredAdsJumbotron p {
font-size: 24px;
color: rgb(231, 226, 226);

}
.featuredAdsJumbotron:hover h3{
  text-shadow: 
        3px 3px 6px rgba(0, 0, 0, 1),  /* Stronger main shadow */
        1px 1px 2px rgba(0, 0, 0, 0.8),  /* Extra depth */
        -1px -1px 2px rgba(0, 0, 0, 0.6); /* Subtle highlight */
transition: all 0.3s ease;

 }
.featuredAdsJumbotron:hover p{
  text-shadow: 
        3px 3px 6px rgba(0, 0, 0, 1),  /* Stronger main shadow */
        1px 1px 2px rgba(0, 0, 0, 0.8),  /* Extra depth */
        -1px -1px 2px rgba(0, 0, 0, 0.6); /* Subtle highlight */
transition: all 0.3s ease;
color:rgb(241, 169, 11);
 }


.generalAdsJumbotron{
  overflow: hidden;
  /* transition: background 0 ease;   */
 /* Adding a smooth transition for a better visual effect */
background-size: cover;
background-position: center;
}

.destinationJumbotron{
  background: url(/public/assets/uploads/static/destination.jpg) no-repeat 10% 0;
  overflow: hidden;
  transition: background 0.3s ease; /* Adding a smooth transition for a better visual effect */
  background-size: cover;
  background-position: center;
}
.destinationJumbotron h1{
  color: var(--uni-light-colorTheme7);  
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adjust the values for the glow effect */

}

.destinationJumbotron p{
  color: var(--uni-light-colorTheme5);  
  margin: 0 20px !important;
  font-weight: bold;
  width: 90% !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Adjust the values for the glow effect */
  font-family: 'Acme';
}


/* Dark overlay effect */
.destinationJumbotron::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0); /* No darkness initially */
  transition: background 0.3s ease-in-out;
}

/* On hover, make the background darker */


/* Ensure text stays above the overlay */
.destinationJumbotron h1, 
.destinationJumbotron p {
  position: relative;
  transition: text-shadow 0.3s ease-in-out;
}

/* Glow effect on hover */
.destinationJumbotron:hover h1,
.destinationJumbotron:hover p {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 
               0 0 20px rgba(255, 255, 255, 0.6),
               0 0 30px rgba(255, 140, 13, 0.6); /* Warm golden glow */
}

/* Optional: Add a smooth pulsing glow animation */
@keyframes glowPulse {
  0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
  50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }
  100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
}

.destinationJumbotron:hover h1,
.destinationJumbotron:hover p {
  animation: glowPulse 1s infinite alternate;
}

/** ai chat jumbotron  */
.aiChatJumbotron{
  background: url(/public/assets/uploads/app/aiassistant.jpg) no-repeat 10% 0;
  overflow: hidden;
  transition: background 0.3s ease; /* Adding a smooth transition for a better visual effect */
  background-size: cover;
  background-position: center;
}
.aiChatJumbotron h1{
  color: var(--uni-light-colorTheme7);  
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adjust the values for the glow effect */

}


/* Dark overlay effect */
.aiChatJumbotron::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0); /* No darkness initially */
  transition: background 0.3s ease-in-out;
}

/* On hover, make the background darker */


/* Ensure text stays above the overlay */
.aiChatJumbotron h1{
  position: relative;
  transition: text-shadow 0.3s ease-in-out;
}

/* Glow effect on hover */
.aiChatJumbotron:hover h1 {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 
               0 0 20px rgba(255, 255, 255, 0.6),
               0 0 30px rgba(255, 140, 13, 0.6); /* Warm golden glow */
}

/* Optional: Add a smooth pulsing glow animation */
@keyframes glowPulse {
  0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
  50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }
  100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
}

.aiChatJumbotron:hover h1{
  animation: glowPulse 1s infinite alternate;
}

.youtubeJumbotron{  
  overflow: hidden;
  transition: background 0.3s ease; /* Adding a smooth transition for a better visual effect */
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.youtubeJumbotron h1{
  color: var(--uni-light-colorTheme7);  
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adjust the values for the glow effect */

}
.youtubeJumbotron #player{
    width: 100%;
    height: 400px; /* Adjust height as needed */
}

.contactPageJumbotron{
  background: url(/public/assets/uploads/static/contactusImg.jpg) no-repeat 10% 0;
  overflow: hidden;
  transition: background 0.3s ease; /* Adding a smooth transition for a better visual effect */
  background-size: cover;
  background-position: center;
  height: 500px;
}
.contactPageJumbotron h1{
  color: var(--uni-light-colorTheme7);  
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adjust the values for the glow effect */

}

.contactPageJumbotron p{
  color: var(--uni-light-colorTheme5);  
  margin: 0 20px !important;
  font-weight: bold;
  width: 70% !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Adjust the values for the glow effect */
  font-family: 'Acme';
}
.contactPageJumbotron:hover h1{
  text-shadow: 
  3px 3px 6px rgba(0, 0, 0, 1),  /* Stronger main shadow */
  1px 1px 2px rgba(0, 0, 0, 0.8),  /* Extra depth */
  -1px -1px 2px rgba(0, 0, 0, 0.6); /* Subtle highlight */
  transition: all 0.3s ease;
}

.contactPageJumbotron:hover p{
  text-shadow: 
  3px 3px 6px rgba(0, 0, 0, 1),  /* Stronger main shadow */
  1px 1px 2px rgba(0, 0, 0, 0.8),  /* Extra depth */
  -1px -1px 2px rgba(0, 0, 0, 0.6); /* Subtle highlight */
  transition: all 0.3s ease;
}




/** **/

/** Contact form css **/
.contact-form-container{
  background:  var(--tools-gradient-bgColor) !important;
  border-radius: 5px;
  padding: 5px;
}

.contact-form-container label, .contact-form-container .form-text{ 
  color: var(--uni-light-colorTheme1);
  padding: 7px 20px;
  font-size: 15px;
  font-weight: 700;
}
.contact-form-container input, .contact-form-container textarea { 
  background: transparent !important;
  color: var(--uni-light-colorTheme5) !important;
  border: 1px solid rgb(100, 99, 99);
  width: 90%;
  margin: auto;
}

/** Contact form css **/
/** Sidebar css **/


#content{
  width:60%;
  float: left;
  overflow: auto;
  transition: width 1s;
  padding: 10px 30px;
}

#sidebar{
  width:40%;
  float: left;
  overflow: auto;
justify-content: space-evenly;
background: none !important;
}

#sidebar .block{
  border-radius: 5px;
   background:  var(--tools-gradient-bgColor) !important;
  overflow:auto;
  padding: 10px 15px;
  margin: 20px 10px 30px 10px;
}
/** sidebar css **/

/** Utility css**/
.tankCalculator{
  background-image: url('/public/assets/uploads/static/tankCalculator.jpg');
  background-size: cover; /* Adjust the background size based on your preference */
  background-position: center; /* Center the background image */
  color: #ffffff; /* Set text color to white or another contrasting color */
  position: relative;
  width:49%;
  margin: 0 5px;
  border-radius: 7px;
  height: 250px;
}
.tankCalculator h1{
  color: var(--uni-light-colorTheme5);
  text-align: center;
  margin: auto;
}

.tankCalculator::before {
  background: rgba(0, 0, 0, 0.6); /* Adjust the alpha value for transparency */
}
.tankCalculator:hover {
  box-shadow:
  -7px -7px 20px 0px rgba(255, 255, 255, .9),
  -4px -4px 5px 0px rgba(255, 255, 255, .9),
  7px 7px 20px 0px rgba(0, 0, 0, .2),
  4px 4px 5px 0px rgba(0, 0, 0, .3);
transition: all 0.3s ease;
}

#volumeCalculator-result-container{
  font-size: 16px !important;  
}

.resultHead{
  text-align: center !important;
  align-items: center !important;
  margin-left: 40% !important;

}

/** **/

.custom-btn { 
  margin: 10px !important;
  width: 150px;
  height: 50px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Domine';
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}


/* 1 */
.btn-1 {
  background: rgb(6,14,131);
  background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
  border: none;
}
.btn-1:hover {
   background: rgb(0,3,255);
background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
}

.btn-7 {
  background: linear-gradient(0deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
  line-height: 42px;
  padding: 0;
  border: none;
}

.btn-7 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.btn-7:before,
.btn-7:after,
.btn-7 span:before,
.btn-7 span:after {
  position: absolute;

  box-shadow:
    -7px -7px 20px 0px rgba(255, 255, 255, .9),
    -4px -4px 5px 0px rgba(255, 255, 255, .9),
    7px 7px 20px 0px rgba(0, 0, 0, .2),
    4px 4px 5px 0px rgba(0, 0, 0, .3);
  transition: all 0.3s ease;
}

.btn-7:before {
  right: 0;
  bottom: 0;
  height: 0%;
  width: 2px;
}

.btn-7:after {
  right: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
}

.btn-7:hover {
  color: rgb(241, 241, 241);
  background: var(--uni-light-colorTheme1);
}

.btn-7:hover:before {
  height: 100%;
}

.btn-7:hover:after {
  width: 100%;
}

.btn-7 span:before,
.btn-7 span:after {
  left: 0;
  top: 0;
  width: 2px;
  height: 0%;
}

.btn-7 span:after {
  height: 2px;
  width: 0%;
}

.btn-7 span:hover:before {
  height: 100%;
}

.btn-7 span:hover:after {
  width: 100%;
}

.btn-15 {
  background: #b621fe;
  border: none;
  z-index: 1;
}
.btn-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background-color: #663dff;
  border-radius: 5px;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
}
.btn-15:hover {
  color: #07f02e;
}
.btn-15:hover:after {
  left: 0;

}
.btn-15:active {
  top: 2px;
}   
/** **/

.btn-3 {
 /** background: linear-gradient(0deg, rgb(9, 214, 36) 0%, rgb(241, 241, 243) 100%);
  **/
  background: var(--uni-light-colorTheme1);
   width: 100px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
  color: var(--uni-light-colorTheme5) !important;
  border-radius: 7px;
}

.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;   
  transition: all 0.3s ease;
}
.btn-3:before {
  height: 0%;
  width: 2px;
}
.btn-3:after {
  width: 0%;
  height: 2px;
}
.btn-3:hover{
  background: linear-gradient(0deg, rgb(5, 114, 19) 0%, rgb(10, 161, 30) 100%);
transition: all 0.3s ease;
color: var(--uni-light-colorTheme5) !important;
}

.mentionsLabel{
  color: var(--uni-light-colorTheme1) !important;
  font-weight: 600;
}



/** **/
/* Cookie Permission Popup Styles */
.cookie-popup {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #080707a9;
  padding: 10px;
  margin: 0 10px;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.cookie-content {
  text-align: left;
  color: #fff;
  font-size: 19px !important;
}
.cookie-content a{
  color: var(--uni-light-colorTheme6);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adjust the values for the glow effect */
}
.cookie-content a:hover{
  color: var(--uni-light-colorTheme6);
  text-shadow: 2px 2px 4px rgba(2, 1, 1, 0.5); /* Adjust the values for the glow effect */
}

.btn-accept {
  display: inline-block;
  background-color: #4caf50;
  color: #fff;
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer; 
 margin:auto;
}

.btn-accept:hover {
  background-color: #45a049;
}
/** New About Us css volume control CSS**/
.aboutUs{
width: 100%;

/**
border-radius: 7px;
background-color: var(--uni-light-colorTheme4) !important;
background: radial-gradient(circle, var(--uni-light-colorTheme6) 10%, var(--uni-light-colorTheme1) 50%, var(--uni-light-colorTheme4) 100%);

**/
}

.gridRow h5 {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    background:  var(--dark-gradient-bgColor);
    border-radius: 5px;
}

.gridRow h5.visible {
  opacity: 1;
  transform: scale(1);
}

.gridRow h1{
  font-weight: 800;
  color: var(--uni-light-colorTheme7);
  }

  .gridRow h5{
      padding: 20px 80px;
    }
/* Default hidden state */
.gridPad {
  opacity: 0;
  transform: translateX(0); /* reset base */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Slide in from left */
.gridPad.from-left {
  transform: translateX(-50px);
}
.gridPad.from-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide in from right */
.gridPad.from-right {
  transform: translateX(50px);
}
.gridPad.from-right.visible {
  opacity: 1;
  transform: translateX(0);
}
    .gridPad h3{
      color: var(--uni-light-colorTheme7);
      font-weight: 600;
    }
    .pickUs .gridPad h3{
      color: var(--uni-light-colorTheme1);
      font-weight: 600;
      position: relative;
      z-index: 2; /* Ensures text is above the overlay */
    }
    .pickUs .gridPad p{
      color: var(--uni-light-colorTheme4);
      font-weight: 600;
      position: relative;
      z-index: 2; /* Ensures text is above the overlay */
    }
      
    .pickUs:hover::before {
      background: rgba(0, 0, 0, 0.5); /* Dark overlay on hover */
    }
    .pickUs:hover .gridPad h3{
      text-shadow: 
      0 0 10px rgba(255, 255, 255, 0.8), /* Brighter white glow */
      0 0 20px rgba(255, 255, 255, 0.9), /* Wider and brighter glow */
      0 0 30px rgba(255, 255, 255, 1); /* Even wider and fully opaque glow */
      transition: all 0.3s ease;
    }
    .pickUs:hover .gridPad p{
      text-shadow: 
      0 0 10px rgba(255, 255, 255, 0.8), /* Brighter white glow */
      0 0 20px rgba(255, 255, 255, 0.9), /* Wider and brighter glow */
      0 0 30px rgba(255, 255, 255, 1); /* Even wider and fully opaque glow */
      transition: all 0.3s ease;
    }
    .grid-audit-multiple{
      background: transparent !important;
    }
    .exploreBttn{
      width: fit-content;
      margin-left: auto; /* Center the button horizontally */
  margin-right: auto; /* Center the button horizontally */
  font-family: 'Domine';
  color: var(--uni-grey-bttn-fontColor);
    }


    .exploreBttn:hover{
      box-shadow:
      -7px -7px 20px 0px rgba(255, 255, 255, .9),
      -4px -4px 5px 0px rgba(255, 255, 255, .9),
      7px 7px 20px 0px rgba(0, 0, 0, .2),
      4px 4px 5px 0px rgba(0, 0, 0, .3);
    transition: all 0.3s ease;
    }
    /* Change color when the button is hovered */
.exploreBttn:hover a {
  color: #f2f3f5 !important; /* New color on hover */
}
    .custom-note{
      width: 70vw !important;
      font-family: 'Caveat';
    }
/** **/

/** music player volume control CSS**/

/** **/
/** radio bttn on custom tank dialog **/

/** radio bttn on custom tank dialog  **/
/** Media Queries **/


  /** Tablet / ipads(portrait and landscape **/
  @media only screen and  (width > 1460) {
    .appLogo{   
      margin-left: 200px;     
    }
    .sideIconToggle{   
      margin-right: 200px;     
    }
    .trendingRow{
      flex-direction: row;
      width: 50% !important;
  }

    .latestBackground{
      position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    min-height: 300px !important;
   background-size: cover; background-position: center;
    }
    
    .trendingBackground{
      position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    min-height: 300px !important;
    background-size: fit-content; background-position: center;
    }
     
   
    }
  @media only screen and  (min-width: 1201px) and (max-width: 1459px) {
    .appLogo{   
      margin-left: 100px;     
    }
    .sideIconToggle{   
      margin-right: 200px;     
    }
    .custom-note{
      text-align: center;
      width: 70vw !important;
    }
    .latestBackground{
      position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    min-height: 300px !important;
   background-size: cover; background-position: center;
    }
    
    .trendingBackground{
      position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    min-height: 300px !important;
    background-size: cover; background-position: center;
    }
     
    }

  @media only screen and (min-width: 961px) and (max-width: 1200px){
    .appLogo{   
      margin-left: 50px;     
    }
    .sideIconToggle{   
      margin-right: 100px;     
    }
    .tankCalculator{
      flex-direction: row;
      width: 100%;
      height: auto;
      padding: 10px 20px  !important;
      margin: 10px auto !important;
    }
    .trendingRow{
      flex-direction: row;
      width: 100% !important;
  }
  .latestBackground{
    position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  min-height: 300px !important;
 background-size: cover; background-position: center;
  }
  
  .trendingBackground{
    position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  min-height: 300px !important;
  background-size: cover; background-position: center;
  }
   
  }
  @media only screen and (min-width: 768px) and (max-width: 960px){
    .appLogo{   
      margin-left: 50px;     
    }
    .sideIconToggle{   
      margin-right: 100px;     
    }
    .navbar-toggler{  
      margin-right: 100px !important;
    }
    #container{
      width: 95%;
    }
    #content{
      width: 100%;
      float: none;
  }
  #sidebar{
      width: 100%;
      float: none;        
  }

  #sidebar .block{
      margin-left: 0;
  }
  .categoryListing{
    float: none;
    width: 100%;
    overflow-x: scroll;
  }
  .navbar-collapse{
    text-align: center !important;
  }
  .gridRow h5{
    padding: 20px 30px !important;
  }
    .gridPad{
      padding: 20px 30px !important;
    }

    .trendingRow{
      flex-direction: row;
      width: 100% !important;
  }
  .latestBackground{
    position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  min-height: 300px !important;
 background-size: cover; background-position: center;
  }
  
  .trendingBackground{
    position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  min-height: 300px !important;
  background-size: fit-content; background-position: center;
  }
   
}

 /** smaller Tablet / ipads(portrait and landscape **/
@media only screen and (min-width: 569px) and (max-width: 767px){
  .appLogo{   
    margin-left: 100px;     
  }
  .sideIconToggle{   
    margin-right: 100px;     
  }  
  .navbar-toggler{  
    margin-right: 100px !important;
  }
    .container{
        width: 100%;
    }
    #content{
      width: 100%;
      float: none;
  }
  #sidebar{
      width: 100%;
      float: none;
  }

  #sidebar .block{
      margin-left: 0;
  } 
  .categoryListing{
    float: none;
    width: 100%;
    overflow-x: scroll;
  }
.dimensionInfo{
  width: 100%;
  float: none;
  margin: auto;
}
.additionalInfo{
  width: 100%;
  float: none;
  margin: auto;
}
.navbar-collapse{
  text-align: center !important;
}
.gridPad{
  flex-direction: row;
  width: 100%;
  height: auto;
}
.dealSection{
  flex-direction: row;
  width: 100%;
  height: auto;
}
.gridRow h5{
  padding: 20px 30px !important;
}
  .gridPad{
    padding: 20px 30px !important;
  }

  .jumbotron-content h1{
    margin-top: 60px;
  }
  
  .jumbotron-content p{    
    padding: 0 30px !important;  
    margin: auto !important; 
  }
  .trendingRow{
    flex-direction: row;
    width: 100% !important;
 
}
.latestBackground{
  position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
min-height: 300px !important;
background-size: cover; background-position: center;
margin: 5px auto !important;
}

.trendingBackground{
  position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
min-height: 300px !important;
background-size: fit-content; background-position: center;
  margin: 5px auto !important;
}
 
}
/** **/

/** smartphone  **/
 /** (portrait and landscape **/

@media only screen and (min-width: 240px) and (max-width: 568px){
  .appLogo{   
    margin-left: 50px;     
  }
 
  .sideIconToggle{   
    margin-right: 0;     
  }  
  .container{
      width: 100%;
  }
  #content{
    width: 100%;
    float: none;
}
#sidebar{
    width: 100%;
    float: none;    
}

#sidebar .block{
    margin-left: 0;
}
.dimensionInfo{
  width: 100%;
  float: none;
  margin: auto;
}
.additionalInfo{
  width: 100%;
  float: none;
  margin: auto;
}
.cookie-popup { 
  height: fit-content;
  width: 95vw;
  margin: 0 10px;
}
.navbar-nav li a{
  justify-content: center;
  text-align: center;
}
.navbar-collapse{
  text-align: center !important; 
}
.navbar-toggler{  
  margin-right: 50px !important;
}

.alert-container{
  width: 220px !important;
  margin-right: 30px !important;   
}
.gridRow h5{
  padding: 20px 30px !important;
}
  .gridPad{
    padding: 20px 30px !important;
  }

  .jumbotron-content h1{
    margin-top: 60px;
  }
  
  .jumbotron-content p{    
    padding: 0 30px !important;  
    margin: auto !important; 
  }
  .align-items-md-stretch {
    flex-direction: column;
  }
  
  .trendingRow, .col-sm-6 {
    width: 100%;
    max-height: none !important;
    padding: 0.5rem !important;
    margin-bottom: 1rem;
  }
  
  .trendingBackground, .latestBackground {
  position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
min-height: 300px !important;
background-size: contain; background-position: center;
background-repeat: no-repeat;
  margin: 5px auto !important;
  background-image: none;
  }
  
  .trendingBackground:last-child, .latestBackground:last-child {
    margin-bottom: 0;
  }
  
  .trendingBackground h4, 
  .trendingBackground p,
  .latestBackground h4, 
  .latestBackground p {
    font-size: 16px !important;
    display: block !important;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }
  
  .trendingBackground:hover h4, 
  .trendingBackground:hover p,
  .latestBackground:hover h4, 
  .latestBackground:hover p {
    opacity: 1;
  }
    
  /* Improve touch targets */
  a[href^="/blogs/"] {
    padding: 0.5rem;
    display: inline-block;
  }

  .contactPageJumbotron{
    padding: 10px !important;
  }
  .featuredAdsJumbotron h3 {
 font-size: 24px !important;
 font-weight: 700;
}
  .featuredAdsJumbotron p {
display: none;
}
}

/**Custom CSS sizes **/
/** Dialog responsive css **/
@media only screen and (min-width: 700px) and (max-width: 718px){
  .customSetupSection{
    flex-direction: column;
  }
  .dimensionInfo{
    flex-direction: row;
    width: 100%;
    float: none;
    justify-content: space-around;

  }
  .additionalInfo{
    flex-direction: column;
    width: 50%;
    float: none;
    justify-content: space-around;
    
  }
  .dimensionInfo .customSpan{
    flex-direction: row;
    width: 100% !important;
    min-width: 250px !important;
    float: none;
    transition: all 0.3s ease;
    margin-right: 15px;
    
  }   
  .additionalInfo .customSpan{
    flex-direction: row;
    width: 100% !important;
    min-width: 250px !important;
    float: none;
    transition: all 0.3s ease;
    margin-right: 15px;
  }  
   
  }
@media only screen and (min-width: 695px) and (max-width: 915px){
.customSetupSection{
  flex-direction: column;
}
.dimensionInfo{
  flex-direction: row;
  width: 100%;
  min-width: 300px;
  float: center;
 
}
.additionalInfo{
  flex-direction: column;
  width: 50%;
  min-width: 300px;
  float: center;

}
.dimensionInfo .customSpan{
  flex-direction: row;
  width: 100% !important;
  min-width: 300px !important;
  float: none;
  transition: all 0.3s ease;
  margin-right: 15px;
}   
.additionalInfo .customSpan{
  flex-direction: row;
  width: 100% !important;
  min-width: 300px !important;
  float: none;
  transition: all 0.3s ease;
  margin-right: 15px;
}  
 
}
@media screen and (min-width: 484px) and (max-width: 694px){
   .gridPad{
    padding: 20px 30px !important;
  }
  .customSetupSection{
    flex-direction: column;
  }
  .dimensionInfo{
    flex-direction: row;
    width: 90% !important;
    float: center;
    justify-content: space-around;
  }
  .dimensionInfo .customSpan{
    flex-direction: row;
    width: 100% !important;
    min-width: 165px !important;
    float: center;
    transition: all 0.3s ease;
    margin-right: 15px;
  }   
  .additionalInfo{
    flex-direction: row;
    width: 90% !important;
    float: center;
    justify-content: space-around;
  }
  .additionalInfo .customSpan{
    flex-direction: row;
    width: 100% !important;
    min-width: 165px !important;
    float: center;
    transition: all 0.3s ease;
    margin-right: 15px;
  }   
  }
@media screen and (width < 483px){
  .gridPad{
    padding: 20px 30px !important;
  }
  .customSetupSection{
    flex-direction: column;
  }
  .dimensionInfo{
    flex-direction: row;
    width: 100% !important;
    float: center;
    justify-content: space-around;

  }
  .dimensionInfo .customSpan{
    flex-direction: row;
    width: 100% !important;
    min-width: 150px !important;
    float: none;
    transition: all 0.3s ease;
 
  }   
  .additionalInfo{
    flex-direction: row;
    width: 90% !important;
    float: none;
    justify-content: space-around;
  }
  .additionalInfo .customSpan{
    flex-direction: row;
    width: 100% !important;
    min-width: 150px !important;
    float: none;
    transition: all 0.3s ease;
    
  }   
  }

/** **/

/** **/