*:focus {
outline: none;
}

body{
    font-family: 'myFont', serif;
}

hr { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.4); }

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }


.hint{font-size:10px; color: #b0b0b8; }
.padding {padding:5px}
.navbar-brand img{width:150px}
.rtl{direction : rtl}
.ltr{direction : ltr}

.overlay{position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 149; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */}

.contant{max-width: 1300px; margin: auto; left: 0px; right: 0px; position: relative;}

#login{position: fixed; width: 100%; height: 100vh; background-color: #fff; z-index: 1000; display: none;}
#login .loginbody{ width: 50%; height: 80%; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; text-align: center; padding: 10px;}
/* ----------------------------------------------------- SLIDE ADS ---------------------------------------*/
.carousel-item {
/*height: 65vh;
max-height: 250px;*/
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.panner-image{
  width: 100%;
  max-width: 1300px;
  display: block;
  height: auto;
  max-height: 273px;
}
/* ----------------------------------------------------- #SLIDE ADS ---------------------------------------*/

.table {width: 100%; display: table; table-layout: fixed; position: relative}
.table .table_row{width: 100%; display: table-row; position: relative}
.table .table_row .table_cell{ display: table-cell; position: relative; vertical-align: middle;}


.items::before { content: ""; display: table; clear: both;}
.items { margin-top: 10px; }
.items::after { content: ""; display: table; clear: both;}

.iBox {
margin-bottom: 24px;
border-radius: 5px;
overflow: hidden;
border: 0.1em solid #eee;
/*background: linear-gradient(white, 94%, rgb(232,232,232));*/
cursor: pointer;
min-height: 350px;
}

.demo-image {
width: 100%;
display: block;
height: auto;
}

.iBox .img{ height: 200px;  overflow: hidden; text-align:center} /*height: 200px; overflow: hidden;*/

.iBox img{max-width:100%; height:100%; vertical-align: middle;}
.iBox .title{min-height: 60px; padding: 5px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);  text-align: right; font-size: 0.9em;}
.iBox .title h1{ font-size: 01.1em;}

.iBox .table_cell .price{font-size: 1.3em; direction: ltr; text-align:center;}
.iBox .table_cell .price .price_name{font-size: 0.8em;}
.iBox .table_cell .priceFrom{color: #acacac; font-size: 0.8em;  vertical-align: bottom; text-align: left; padding-left: 5px;; display: none;}
.iBox .table_cell .priceFrom .price_from_name{font-size: 0.5em;}
.iBox .pricess{width: 100%; position: relative;}
.iBox .vat_include{ float: right; padding: 2px; padding-right: 5px; margin-bottom: 0px;}
.iBox .table_cell .vat_content{vertical-align: bottom;}
.iBox .img .soled{position: absolute; z-index: 10; margin: auto; left: 0; top:5px; background-color: tomato; width: 100%; color: black; display: none;}
.iBox .img .prepaid{position: absolute; z-index: 10; margin: auto; right:0px; top:10px; background-color: gold; color: darkred; font-weight: bold; border-radius: 5px 0px 0px 5px; text-align: center;  font-size: 0.8em; padding: 5px; display: none;}
.iBox .img .offer{position: absolute; z-index: 11; margin: auto; left: 0px; top:20px; background-color: red; width: 35px; height:35px ;color: rgb(255, 255, 255); font-weight: bold; border-radius: 0 5px 5px 0; line-height: 35px; text-align: center; display: none;}
.iBox .img .closeout{position: absolute; z-index: 11; margin: auto; right:0px; top:20px; background-color: red; color: white; font-weight: bold; border-radius: 5px 0 0 5px; text-align: center; font-size: 0.8em; padding: 5px; display: none;}

s, strike{text-decoration:none;position:relative;}
s::before, strike::before {
    top: 50%; /*tweak this to adjust the vertical position if it's off a bit due to your font family */
    background:red; /*this is the color of the line*/
    opacity:.7;
    content: '';
    width: 110%;
    position: absolute;
    height:.1em;
    border-radius:.1em;
    left: -5%;
    white-space:nowrap;
    display: block;
    transform: rotate(-15deg);  
}
s.straight::before, strike.straight::before{transform: rotate(0deg);left:-1%;width:102%;}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  /*overflow-y: hidden;*/
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}


.padge{position: absolute;
width: 1.5em;
height: 1.5em; 
color: #edf4f5; 
background-color: red; 
font-size: 0.8em; 
text-align: center; 
line-height: 1.3em; 
border-radius: 50%; 
margin: auto;
top: -8px;
left : 12px;  
font-weight: bold; 
padding: 3px; 
display: none; }

#bg_items_image { position:absolute; top:-15px; left:0; opacity: 0.5; width:100%; height: 70%; }
#bg_items_image {
  -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}
  
.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}

.color-box{
  position: relative;
  display: inline-block;
  border-radius: 5px;
  cursor: pointer;
}

.color-box .material-symbols-outlined{
  position: absolute;
  margin: auto;
  border: 1px solid black;
  border-radius: 50%;
  color: white;
  background-color: #666;
  font-size: 20px;
  top:-10px;
  right: -10px;
  display: none;
}

.box1, .box2, .box3{
  display: inline-block;
  width: 33%;
  vertical-align: top;
}


/* The grid: Four equal columns that floats next to each other */
.images-column {
  float: left;
  width: 70px;
  padding: 5px;
}

/* Style the images inside the grid */
.images-column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.images-column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.images-row:after {
  
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.images-container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

#alert_message{width: 93%; position: fixed; margin: auto; top: 20px; left: 0; right: 0; padding: 15px; color: white; z-index: 100; border-radius: 5px; font-size: 1.5em; text-align: center; display: none;}

/*.alert{
  position: fixed;
  width: 80%;
  min-height: 100px;
  max-height: 75%;
  border: 3px solid indigo;
  z-index: 150;
  border-radius: 5px;
  background-color: lightcyan;
  margin: auto;
  top: 15%;
  left: 0;
  right: 0;
  display: none;
}
.alert #alert_title{color: lightcyan; text-align: center;}
.alert #alert_body{text-align: center; position: relative; max-height: 600px; overflow: auto;}
.alert button{margin: 3px;}
.alert .red{background-color: tomato; color: lightcyan;}*/

.read_more{
  max-height: 500px;
  overflow: hidden;
  position: relative;
}
.read_more_link
{
  display: none;
  position: absolute;
  margin: auto;
  bottom: 0px;
  height: 130px;
  width: 100%;
  background: linear-gradient(0deg, rgb(255, 255, 255), rgba(0, 0, 255, 0));
}
.read_more_link a{
  position: absolute;
  margin: auto;
  bottom: 5px;
  left: 5px;
}

/* === HEADING STYLE #3 === */
.three h3 {
  font-size: 23px;
  font-weight: 450;
  letter-spacing: 0;
  line-height: 1.5em;
  padding-bottom: 15px;
  position: relative;
  color : #8eb9c0;
}
.three h3:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 5px;
  width: 55px;
  background-color: #8eb9c0;
  
}

.three h3:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  height: 1px;
  width: 95%;
  max-width: 150px;
  background-color: #8eb9c0;
}

#page_no{
  padding: 5px;
  background-color: #666;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 100;
  opacity: 0.4;
}

.tages{
  padding: 5px;
  background-color: #666;
  color: #fff;
  border-radius: 5px;
  margin: 5px;
  font-size: small;
}

.loader{
  display: none;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  animation: spin 2s linear infinite;
  margin-top: 4px;
  margin-right: 47%;
}

.otp-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.otp-input {
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.otp-input:focus {
  outline: none;
  border-color: #4caf50;
}

@keyframes spin {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
  
}

@media (max-width: 1100px) {
  .box1, .box2{
    display: inline-block;
    width: 49%;
    vertical-align: top;
  }

  .box3{width: 100%; display: block;}
}

@media (max-width: 750px) {
  .box1{width: 100%; display: block;}
  .box2{width: 100%; display: block;}
  .box3{width: 100%; display: block;}
}