/*body { margin: 0; font-family: 'Roboto Bold', 'Roboto', sans-serif;}*/
body{
  background-color: #f2f2f2 !important;
}

.banner-content { 
  top: 0; 
  left: 0;
  margin: 0px !important;
} 

.banner {
  background-image: url(../../images/bsc/smc_banner/mainbanner.png);
  width: 100%;
  height: 100%;
  min-height: 365px !important;
  opacity: 1;
  visibility: inherit;
  z-index: 20;
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: transparent;
  object-fit: contain;
}

.banner_style{
  padding-top: 10px !important; 
  margin-left: 30px !important; 
  margin-top: 0px !important;
}

.logo{
  width: 250px;
  /* position: relative; */
  /* top: 15px; */
  padding-bottom: 20px;    
}

.sub_content{
  margin-left: 55px;
}

.know_btn{
  margin-left:0px !important;
}

.know_btn button{
  background-color: #0D7F4E; 
  color: #FFFFFF; 
  font-weight: 600; 
  padding: 5px 20px; 
  border-radius: 20px; 
  font-size: 18px;
}

.bsc_logo{
  width: 150px;
  bottom: 10px;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: end;
}

.smcbanner{
  background-image: url(../../images/bsc/smc_banner/smcbanner.jpg);
  width: 100%;
  height: 100% !important;
  background-size: 100% 100%;
}

.head{
  display: inline-flex;
}

.custom-paragraph {
 /* font-family: "Roboto", sans-serif;*/
font-weight: 400;
font-style: normal;
font-size: 17px;
color: #000000;
text-align: justify;
text-justify: inter-word;
line-height: 22px;
margin-left: 0px !important;
/* margin-top: 35px !important; */
max-width: 80%; /* Adjust as needed to fit the container width */
word-wrap: break-word; /* Ensures long words break and wrap to the next line */
overflow-wrap: break-word; /* Similar to word-wrap but is more widely supported */
}


.custom-paragraph p{
  margin-bottom: 10px !important;
}

.custom-ml {
  margin-left: 6rem; /* Adjust this value as needed */
}

    /* Reduce spacing between h6 and paragraph */
    h6 {
  margin-bottom: 0rem; /* Adjust this value to control space below h6 */
}


.tabs-container {
  /* margin-top: 5px; */
  display: flex;
  align-items: center;
  width: 92%;
  overflow: hidden;
  position: relative;
   margin-left: 50px !important;
   margin-bottom: 30px;
 
}

.tabs-wrapper {
  /* display: flex; */
  overflow-x: auto;
  scroll-behavior: smooth;
  width: calc(100% - 70px);
  flex-grow: 1;
  -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            height: 100%; /* Make the height 100% of the container */
  
}
.tabs-wrapper::-webkit-scrollbar {
  display: none ;
  width: 0;
  height: 0;
  background: transparent; /* Safari and Chrome */
}

.tabs_item {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 2px;
  /* margin: 0px 35px; */

}

.tabs_item li {
  flex-shrink: 0; /* Prevent wrapping */
}

.tabs_item li a{
  display: block;
 /* padding: 10px 70px; /* Increase padding for bigger tabs */
 padding: 15px 70px;
  white-space: nowrap; /* Prevent wrapping of individual tabs */
  font-size: 22px; /* Increase font size */
  color: #919192;
  text-decoration: none;
  transition: background-color 0.3s ease;
  background-color: white;
  border-right: #f7f6f6;
  border-right: #f7f6f6;
}

.tabs_item li a.active {
  background-color: #009dd9 !important;
  color: white !important;
}

.tabs_item li a:hover {
  /* background-color: #f2f2f2; */
  color:#555;
  border: none !important;
}

.tab_row{
  width: 100%;
  margin-top: 40px;
  /* margin-left: 85px;
  margin-right: 20px; */
  position: relative !important;
}

.scroller  {
  text-align: center;
  cursor: pointer;
 /* display: block; /* Initially hidden */
  padding: 10px;
  white-space: nowrap;
  vertical-align: middle;
  /*background-color: rgba(0, 0, 0, 0.5);;*/
  width: 50px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
  user-select: none; /* Prevent text selection */
  opacity: 1.7; /* Adjust transparency */
  z-index: 10;
  color: 004A92;
}
.scroller i  {
  color: #000;
}
.scroller.disabled {
  cursor: not-allowed;
  opacity: 0.3; /* Reduce opacity to indicate disabled state */
  pointer-events: none; /* Prevent interaction */

}

.scroller:hover {
  /* background-color:rgb(184, 178, 178); */
 
  transform: scale(1.1);
}

.scroller-left {
  position: absolute;
  left: 0;
  z-index: 1; /* Ensure it's above the tabs */
  background-color:#fff;
  top: 10px !important;
  
}

.scroller-right {
  position: absolute !important;
  right: 0;
  z-index: 1; /* Ensure it's above the tabs */
  background-color:#fff;
  top: 10px !important;

}
#parentContainer {
  overflow-x: auto; /* Enables horizontal scrolling if needed */
  white-space: nowrap; /* Prevents wrapping to next line */
}

#parentContainer .col {
  flex: 0 0 auto; /* Prevents columns from shrinking */
}

.tab-content{
  width: 100%; 
  /* margin-left: 98px !important; */
  position: relative;
}

.scroll_Container {
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  white-space: nowrap;
  width: calc(100% - 70px); /* Adjust width if needed to accommodate arrows */
    /* Hide scroll bar */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none;  /* Internet Explorer 10+ */
      align-items: center; /* Center items vertically */
      margin: 0px !important;
      position: relative;
    width: 92%;
    margin-left: 50px !important;
}

.scroll_Container::-webkit-scrollbar {
/*display: none; /* Safari and Chrome */
width: 0;
height: 0;
background: transparent; 
}

.scroll-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}

.scroll_Container .img_list{
  padding: 0px !important;
  margin-right: 10px;
}
.img_list{
  width: 290px;
  height: 200px;

}
.img_list img{
  width:100%; 
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #d7d7d7;
}

.arrow{
  text-align: center;
  cursor: pointer;
  padding: 10px;
  white-space: nowrap;
  vertical-align: middle;
  /*background-color: rgba(0, 0, 0, 0.5);;*/
  width: 50px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
  user-select: none; /* Prevent text selection */
/* background: rgba(250, 249, 249, 0.5); */
  opacity: 0.7; /* Adjust transparency */
  z-index: 10;
  color: rgb(8, 8, 8);
}
.arrow i{
  color: #000;

}

.arrow:hover {
  /* background-color: rgb(184, 178, 178); */
  transform: scale(1.1);
}

.arrow-left{
  position: absolute;
  left: 0;
  z-index: 1; /* Ensure it's above the tabs */
  background-color:#fff;
  top: 70px;
}

.arrow-right {
  position: absolute;
  right: 0;
  z-index: 1; /* Ensure it's above the tabs */
  background-color:#fff;
  top: 70px;
}
.arrow.disabled {
  cursor: not-allowed;
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events:none;
  
}
.tab-image:hover {
  transform: scale(1.05); /* Slightly zoom on hover */
  cursor: pointer;
}


.custom-button {
  border-width: 0px;
  position: absolute;

  width: 150px;
  height: 45px;
  display: flex;
  /*font-family: "Roboto Bold", "Roboto", sans-serif;*/
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #FFFFFF;
  background-color: rgb(7, 119, 86); /* Adding background color */
  justify-content: center;
 align-items: center;
  top: 100%;
  right:60%;
  border-radius:15px; /* Adding curved edges */ 
  cursor: pointer;

}

.spdesign{
  font-size:25px;
  /* margin-left:45px; */
  border-left:4px solid orange;
  font-weight:bold;
  padding-left:15px;
  position: relative;
  top: 20px; /* Adjust this value as needed to move the element down */

}

* {
  box-sizing: border-box;
}

/* .spbox_design{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 45px;
  margin-bottom: 45px;
} */

.box {
  float: left;
  width: 40%;
  border-radius:10px;
  background-color: #fff;
  position: relative;
  /* padding: 10px !important; */
  margin-left: 47px !important;
  margin-bottom: 30px;
}

.box p{
  padding: 15px;
  margin: 5px 0px !important;
  font-size: 16px;
}

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

.modal_style{
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal_center{
  padding-top: 0px !important;
  padding-left: 20px !important;
  margin: 0px !important;
}

.model_head_style{
  text-align: left;
}

.model_head_style h5{
  font-size: 20px;
  margin-bottom: 0px !important;
}

.model_head_style h6{
  margin: 0px !important;
  font-size: 14px;
}

.model_content{
  text-align: justify;
  /* margin: 0px 20px !important; */
  /* height: 320px; */
}

.model_content p{
  margin-bottom:15px; 
  /* text-align: justify;  */
  /* margin-left:20px; 
  margin-right:20px; */
  line-height: 1.2;
  font-size: 16px;
}

/* Media query */


@media screen and (min-device-width: 350px) and (max-device-width: 450px) { 

  .logo{
    width: 130px;
    position: absolute;
    top: 10px;
  }

}


@media only screen and  (max-width: 700px) {

  .smcbanner{
    background-image: url(../../images/bsc/smc_banner/mobsmcbanner.jpg);
    width: 100%;
    height: 100% !important;
    object-fit: fill;
   }

  .banner_style{
    padding-top: 0px !important;
    padding-left: 15px !important;
    margin: 0px !important;
  }

  .banner{
    min-height: 110px !important;
  }

  h1.head{
    font-size: 14px !important;
    text-wrap: wrap !important;
  }

  .logo{
    width: 130px;
    position: absolute;
    top: 10px;
  }

  .title_main {
    margin-bottom: 2px !important;
    /* font-size: 22px !important; */
  }

  .sub_content{
    margin-top: 8px !important;
    margin-left: 45px;
    width: 80%;
  }

  .sub_content h6{
    font-size: 12px !important;
  }

  .know_btn{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    position: absolute;
    top: 55px;

  }

  .know_btn button{
    background-color: #0D7F4E; 
    color: #FFFFFF; 
    font-weight: 400; 
    padding: 2px 15px; 
    border-radius: 20px; 
    font-size: 12px;
    margin-top: 20px;
  }

  .bsc_logo{
    width: 70px;
    bottom: 25px;
  }

  .box {
    float: left;
    width: 92%;
    height:50%;
    position: relative;
    top:20%;
    border-radius:10px;
  background-color: #ffffff;
  margin-left: 14px !important;
  }

  .box p{
    width:100%;
    font-size: 16px !important;
  }

  .custom-paragraph{
    margin: 0;
    padding: 0;
    line-height:25px;/* Adjust line height for spacing */
    width:600px;
    display: none;
    
  }

  .tabs-container{
    margin-left: 0px !important;
    width: 100%;
  }

  .scroller {
    font-size: 20px;
    display: None !important; /* Show scroll buttons on small screens */

  }
 /* .scroller-left{
    width: 40px;

  }
  .scroller-right{
    width: 40px !important;
  }*/

  .scroll_Container {
    width: 100%;
    margin-left: 0px !important;
  
  }

  .arrow {
    padding: 8px;
    font-size: 20px;
    display: none !important ; /* Show arrows on mobile view */
  }

  /* .arrow-left{ 
    top: 75px;
    width: 40px !important;
    
  }
  .arrow-right{
    top: 75px;
    width: 40px !important;

  } */

  .modal_style{
    margin-bottom: 20px;
    /* display: block;
    align-content: center; */
  }

  .modal_center{
    padding: 0px !important;
    /* padding-left: 20px !important; */
    margin: 0px !important;
  }

  .model_head_style {
    text-align: left;
  }

  .model_head_style h5{
    font-size: 18px;
    margin-bottom: 3px !important;
  }

  .model_head_style h6{
    margin-left: 5px !important;
    font-size: 12px;
    margin-top: 0px !important;
  }

  .tab_row{
    margin-top: 20px;
  }
} 

@media only screen and  (min-width: 1600px) {

  .container {
    max-width: 90% !important;
  } 

  .banner_style {
    padding-top: 35px !important;
    margin-left: 30px !important;
    margin-top: 0px !important;
  }

  .logo {
    width: 230px;
    /* padding-bottom: 40px !important; */
  }

  .sub_content {
    margin-left: 70px;
  }

  .sub_content h1{
    font-size: 30px !important;
  }

  .sub_content h6{
    font-size: 18px !important;
  }

  .custom-paragraph {
    font-size: 16px;
    margin-top: 25px !important;
    line-height: 25px;
    font-weight: 300;
  }

  .know_btn {
    margin-top: 25px !important;
    /* margin-bottom: 8px !important; */
  }

  .know_btn button {
    font-size: 18px;
  }

}

@media only screen and  (min-width: 1900px){

  .container {
    max-width: 90% !important;
  }

  .know_btn {
    margin-top: 60px !important;
    margin-bottom: 25px !important;
  }

}