/* 

    CSS by RDBS (Ardi-bi Systems) https://ardi-bsys.com

*/
:root {
    /*
    --primary: #AB7442;
    */
    --primary: #2bbac8;
    --light: #F5F5F5;
    --dark: #353535;
}


/* ******* -------------------- ******* */

/* Additional Font to match to logo font */
/* Can be use as a normal text or body text of the website */

/* ******* -------------------- ******* */

::placeholder 
{
  color: #ccc ;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder 
{ /* Internet Explorer 10-11 */
 color: #ccc;
}

::-ms-input-placeholder 
{ /* Microsoft Edge */
 color: #ccc;
}

/* ******* -------------------- ******* */

.crd_row
{
  flex-wrap: nowrap;
  /*  margin-top: calc(var(--bs-gutter-y) * 1);*/
  
  padding-right: 38px;
  padding-left: 8px;
  margin-right: calc(var(--bs-gutter-x) / 2);
  /* margin-left: calc(var(--bs-gutter-x) / 2); */
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  /* flex-wrap: wrap; */

}  


/* ******* -------------------- ******* */
.fnt14px
{
	font-family: roboto;
	font-size: 14px;
	font-weight: 300;
    
}

.fnt15px
{
	font-family: roboto;
	font-size: 14px;
	font-weight: 300;
    
}

.fnt16px
{
	font-family: roboto;
	font-size: 16px;
	font-weight: 300;
    
}

.fnt18px
{
	font-family: roboto;
	font-size: 1.1rem;
	font-weight: 300;
  /* color: #86796b; */
  line-height: 25px;
  padding: 5px;
  margin-bottom: 5px;
    
}
.fnt19px
{
	font-family: roboto;
	font-size: 1.1rem;
	font-weight: 300;
  /* color: #86796b; */
  line-height: 25px;
  padding: 5px;
  /* margin-bottom: 5px; */
    
}

.fnt20px
{
	font-family: roboto;
	font-size: 20px;
	font-weight: 300;
    
}

.fnt22px
{
	font-family: roboto;
	font-size: 22px;
	font-weight: 300;
    
}

.fnt24px
{
	font-family: roboto;
	font-size: 24px;
	font-weight: 300;
    
}

.fnt_color
{
    color: #73eefa;
}

.abt{
  text-transform: uppercase;
  font-family: Open Sans;
  /* line-height: 29px; */
  font-size: 18px;
  color:#73eefa;
}

/******************************
 1st Page Card / Window-Display area
********************************/
.border-left{
	border-left: 1px solid #dee2e6 !important;
}

/******************************
 // 1st Page Card / Window-Display area
********************************/

/* ******* -------------------- ******* */

a 
{
    color: var(--primary);
}

h1{
	font-family:"Oswald",sans-serif; ;
}


/* ******* -------------------- ******* */

/* header section  */
.sec_hed{
  font-family: 'Oswald', sans-serif;
  
  padding-top: .1rem;
  margin-bottom: 1px;
}

.btn.btn-primary,
.btn.btn-secondary 
{
    background-color: var(--primary);
}

.text-primary 
{
    color: var(--primary) !important;
}

#bnr img 
{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* ******* -------------------- ******* */

  .tabs 
  {
    position: relative;   
    min-height: 400px; /* This part sucks */
    clear: both;
    margin: 12px 0;
    /*
    display: block;
    clear:both;
    */
  }

  .tab 
  {
    float: left;
    display: block;
  }

    .tab label 
    { 
      padding: 12px 35px 12px 35px; 
      font-size: 19px;
      color: #989898;
      font-family: 'Open Sans', sans-serif;
      font-weight: 400; 
      text-decoration: none;
      text-transform: uppercase;
      border: solid 1px #d5d5d5;
      display: block; 
      transition: all 0.3s ease; 
      border-radius: 1px;
    }
      
  .tab [type=radio] 
  {
    display: none;   
  }

  .tab_content 
  {
    position: absolute;
    left: 0;
    width: 100%;
    /*
    top: 57px;
    left: 0;
    right: 0;
    bottom: 0;
    */
    
    padding: 5px;
    /* display: block;
    clear:both;
    border: 1px solid var(--primary); */
     
  }

  .tab_content img 
  {

    
    height: 90%;
    /* padding-left: 5rem; */
    padding-bottom: 1rem;
   
    /* width: 80%; */
  }

  [type=radio]:checked ~ label 
  {
    background: var(--primary);
    /* border-bottom: 1px solid white; */
    z-index: 2;
    color: white;
    
  }

  [type=radio]:checked ~ label ~ .tab_content 
  {
    z-index: 1;
    
  }

  .tab_content 
  {
      display: none;
  }
  
  .tab input[type="radio"]:checked + label + .tab_content {
      display: block;
  }

  .About_sec {
    margin-bottom: 5rem;
}

.container-xxl {
    margin-top: 4rem;
   
}
.abt_container{
  height :825px;
  background: rgb(241, 237, 237);
}
.product_container{
  height: auto;
  background-color: white
}

.gallery_container{
  height: auto;
  background-color:rgb(241, 237, 237);
}

/* Product div */
* {
  box-sizing: border-box;
  /* padding-right: 10px; */
  /* padding-left: 10px; */
  /* padding-bottom: 8px; */
}

img {
  vertical-align: middle;
  width: 100%;
  
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
  
}

/* Hide the images by default */
.mySlides {
  display: none;
  height: 80%;
  padding-left: auto;
  padding-right: auto;
  text-align:center;
  
}
.p1bg{
    background-color: #00044e;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 10px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
  margin-right:12px;
  
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: #2bbac8;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
        position: relative;
        text-align: center;
        color: white;
        background-color: #1a1915;
        padding: 10px;
        height: 100%;
    }

.caption-container p {
  margin-bottom: 7px;

}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
  text-align: center;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
.column {
  width: 10%; /* Set the width of each column to 10% of the container width */
  padding: 5px; /* Add some padding around the images */
}

/* Adjust the maximum width of the images */
.demo {
  max-width: 100%; /* Set the maximum width of the images to 100% */
  height: auto; /* Maintain aspect ratio */
}
.hidden {
            display: none;
}

    

  /* gallery div */
  .gallery_div
  {
    height: 550px;
    overflow-y: scroll;
    overflow-x: hidden;
    
  }
/* contact div */
.cont_div{
  width: 100%;
  /* padding-right: var(--bs-gutter-x, .75rem);
  padding-left: var(--bs-gutter-x, .75rem); */
  margin-right: auto;
  margin-left: auto;
}





  /* its for backgrond color */
  
/******************************
 1st Page Card / Window-Display area
********************************/

.card {
  position: relative;
  color: #737373;
  background-color: #f7f7f7;    
  border-radius: 8px;
  overflow: hidden;
  margin: 3px 7px ;

  /*
  min-height: 376px ;
  */
  min-height: 250px ;
    -webkit-box-shadow: 10px 12px 16px 3px #bababa;
    -moz-box-shadow: 10px 12px 16px 3px #bababa;
    -o-box-shadow: 10px 12px 16px 3px #bababa;
    -ms-box-shadow: 10px 12px 16px 3px #bababa;
    box-shadow: 10px 12px 16px 3px #bababa;
}

.card-image {
  /* width: 100%; */
  
  height: 250px;
 
  object-fit: cover;
  object-position: center;
}

.card-title {
  position: relative;
  padding: 7px 12px;
  font-size: 1.6em;
  font-weight: 700;
}

.card-title:before {
  content: "";
  position: absolute;
  left: 25px;
  top: 0;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  -webkit-transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1), opacity 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1), opacity 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.card:hover .card-title:before {
  opacity: 0.8;
  transform: scale(0.6);
}

.card-description {
  font-family:  'Open Sans', sans-serif ;
  font-size: 1.2em;
  padding: 5px 12px 7px;
}

.rdb_crd_btn
{
    display: inline-block;
    background: #2c925e;
    padding: 7px 12px 7px ;
    font-size: 1.2em;
    margin: 5px 5px 10px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 7px;
    width: 80% ;
    height: 39px ;
    /*
	font-family: 'Source Sans Pro', sans-serif;
    */
}

.rdb_crd_btn:hover
{
    background: #42b3e5;    
}

.rdb_crd_btn:disabled
{
    background: #b7b7b7;
    width: 48% ;
    height: 34px ;
}
/******************************
 // 1st Page Card / Window-Display area
********************************/

/*gallery div*/
.img_pad
  {
    
    padding-right: 12px;
    padding-left: 12px;
}

section {
  display: block;
}
.section {
  padding: 35px 0;
}

.section:nth-child(even) {
  background: #f5f8fc;
}

.section .section-devider {
  display: block;
  height: 1px;
  margin: 50px 0;
}

.section .section-devider.transparent {
  background-color: transparent;
}

.section.py-sm {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

.section.py-lg {
  padding-top: 140px !important;
  padding-bottom: 140px !important;
}

.section .section-subtitle {
  font-size: calc(13px + (13 - 13) * ((100vw - 320px) / (1200 - 320)));
  font-weight: 500;
  margin-bottom: 0px;
  opacity: .9;
}

.section .section-title {
  font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1200 - 320)));
  padding-bottom: 7px;
  font-weight: 600;
}

.section .components-section-title {
  font-size: calc(18px + (23 - 18) * ((100vw - 320px) / (1200 - 320)));
  margin-bottom: 15px;
}

@media (min-width: 992px) {
  .section .components-section-title {
    font-size: 23px;
  }
}

@media (min-width: 1021px) {
  .navbar .navbar-brand img {
    
    margin-left: 0rem;
  }
  
  
}


.section .section-secondary-title {
  font-size: 17px;
  opacity: .7;
  margin-bottom: 15px;
}


.section.has-overlay {
  position: relative;
}

.section.has-overlay * {
  position: static;
  z-index: 9;
}

.section.has-overlay:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1;
}

.section.has-img-bg {
  position: relative;
  background: url(../imgs/section.jpg) no-repeat center top fixed;
  background-size: cover;
  color: #fff;
}

.section.has-img-bg * {
  position: relative;
  z-index: 100;
}

.section.has-img-bg:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1;
}


.portfolio-section .filters {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  justify-content: center; /* Center items horizontally */
  margin: 0 auto 5px;
  max-width: 100%;
  overflow-x: auto; /* Enable horizontal scrolling if needed */
  border-color: #2bbac8;
}

.portfolio-section .filters a {
  display: inline-block;
  font-weight: 500;
  color: var(--dark);
  cursor: pointer;
  transition: .5s;
  border-bottom: 2px solid transparent;
  border: 2px solid #66c1eb;
  padding: 5px 10px;
  margin-bottom: 8px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
 border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.portfolio-section .filters a:last-child {
  margin-right: 0; /* Remove margin from the last element */
}

.portfolio-section .filters a:hover {
  color: #2bbac8;
  opacity: .9;
  border-color: #2bbac8;
}

.portfolio-section .filters a.active {
  opacity: 1;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  background: #2bbac8;
  color: #fff;
  border-color: #2bbac8; /* Add border color for active link */
}



.portfolio-section .portfolio-container .portfolio-item {
  position: relative;
  padding-left: 0;
  padding-right: 0;
  margin: 10px -5px;
  overflow: hidden;
  border-radius: 0;
}

.portfolio-section .portfolio-container .portfolio-item .content-holder {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  left: 200%;
  width: 100%;
  height: 100%;
  background: rgba(255, 110, 66, 0.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 15px;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.28s;
  transition: all 0.28s;
}

.portfolio-section .portfolio-container .portfolio-item .content-holder .title {
  font-size: 22px;
  font-weight: 600;
}

.portfolio-section .portfolio-container .portfolio-item .content-holder .subtitle {
  font-weight: 500;
  opacity: 1;
}

.portfolio-section .portfolio-container .portfolio-item:hover .content-holder {
  left: 50%;
  opacity: 1;
  visibility: visible;
}