.banner {
  height: 270px;
  background-size: cover;
  /* background-position: center; */
  background-repeat: no-repeat;
  background-image: url(../img/images/banner2.webp);
  position: relative;
  display: flex;
  align-items: flex-end;
  background-position: center;
}

.banner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(220, 53, 69, 0.8);
}

.banner nav {
  display: flex;
  position: relative;
  z-index: 1;
  flex-flow: column;
  padding-bottom: 30px;
}
.banner nav h3 {
  color: white;
  font-size: 30px;
  margin-bottom: 3px;
  font-weight: 700;
  position: relative;
  padding-bottom: 25px;
}

.banner nav h3:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #c90404;
  left: 0;
  max-width: 50px;
  top: auto;
  bottom: 10px;
  margin: auto;
  border-radius: 3px;
}

.breadcrumb {
  font-size: 0.85rem;
  display: flex;
  list-style-type: none;
  flex-flow: wrap;
  margin-bottom: 0;
  padding-left: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 600;
  font-size: 0.7rem;
  color: #ffffffd1;
  margin: 0 10px;
}
.breadcrumb a {
  color: rgba(255, 255, 255, 0.952);
}

.breadcrumb a:hover {
  color: #fff;
}

.breadcrumb-item.active {
  color: white;
}

.text-justify {
  text-align: justify;
}

.inpage {
  padding-top: 4rem;
  padding-bottom: 3rem;
  position: relative;
}
.inpage:after {
  content: "";
  position: absolute;
  background-image: url(../img/images/inhook.png);
  background-size: contain;
  width: 59px;
  height: 165px;
  right: 2rem;
  top: 0;
  z-index: 9;
}
.inmainhead {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
}
.inabt {
  position: sticky;
  top: 6rem;
}
.value-list.in-value-list li {
  flex: 1 0 100%;
  max-width: 100%;
  color: #333;
  font-weight: 400;
}
.value-list.in-value-list li p {
  margin-bottom: 3px;
}

.gb1 img, .gb2 img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.galbox {
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 0.3rem;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.gb1{
      max-height: 165px;
  height: 100%;
}
.gb2{
    max-height: 205px;
}
.galbox::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 30%);
  inset: 0;
  opacity: 0;
  transition: 0.3s;
}
.galbox:hover::before {
  opacity: 1;
}
.galbox span {
  position: absolute;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(220, 53, 69, 0.8);
  padding: 13px;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 80%);
  opacity: 0;
  transition: 0.3s;
}
.galbox:hover span {
  opacity: 1;
}
.galbox p {
  margin-bottom: 0;
  position: absolute;
  z-index: 9;
  bottom: 0;
  background-color: #c90404;
  width: 100%;
  padding: 8px 10px;
  color: black;
  font-size: 0.9rem;
  height: 60px;
  display: flex;
  align-items: center;
  line-height: 18px;
}

.float-right {
  width: 450px;
  float: right;
  margin-left: 30px;
  margin-bottom: 10px;
}
.serviceinimg{
    width:530px;
}
/*---------------------------------------*/
/*::::::::::::::::::CONTACT::::::::::::::*/
/*---------------------------------------*/

.contact .man {
  width: 330px;
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.contact .sec {
  display: flex;
  align-items: center;
  gap: 20px;
}
.contact .sec1,
.contact .sec2 {
  display: flex;
  gap: 20px;
  align-items: center;
}
.contact .sec img {
  width: 30px;
  filter: brightness(0);
  opacity: 0.7;
}
.contact .sec p {
  margin-bottom: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
}
.contact .sec span {
  font-size: 1rem;
  color: #666;
}
.contact .box {
  background-color: #00000005;
  background-image: url(../img/images/our-faqs-bg.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  border-radius: 30px;
  padding: 0 50px;
  padding-bottom: 0;
  max-width: 90%;
  margin: auto;
  /* margin-bottom: 3rem; */
  position: relative;
  overflow: hidden;
  border: 1px solid #00000012;
}

.arr {
  position: absolute;
  bottom: 70%;
  right: 0;
  width: 100px;
  height: 60px;
  animation: ctaarrowmove 3s infinite linear alternate;
}
@keyframes ctaarrowmove {
  50% {
    right: 15%;
  }
}
.contact input,
.contact select,
.contact textarea {
  width: 100%;
  border: 1px solid #0000001a;
  border-radius: 5px;
  padding: 8px 15px;
  font-size: 0.9rem;
  transition: 0.3s;
  color: #333;
}
.contact .mainhead {
  font-size: 2.5rem;
}
.contact input::placeholder,
.contact select::placeholder,
.contact textarea::placeholder {
  color: rgba(0, 0, 0, 0.356);
}
.contact input:focus,
.contact select:focus,
.contact textarea:focus {
  border: 1px solid #c90404;
  outline: none;
}

.contact-head {
  font-size: 1.1rem;
  font-weight: 600;
}
.not-found {
  text-align: center;
}
.not-found .errimg {
  width: 400px;
  margin: auto;
  margin-bottom: 1rem;
}

.not-found h5 {
  font-size: 2rem;
  font-weight: 800;
}

@media (max-width: 575px) {
  .banner {
    height: 250px;
  }
}

/*---------------------------------------*/
/*:::::::::::::::::PROJECTS::::::::::::::*/
/*---------------------------------------*/
.table-responsive{
    overflow-x: auto;
}
.mytable {
    color: #666;
    width: 100%;
    margin-bottom: 1rem;
    border-spacing: 0;
    border-collapse: collapse;
    border-radius: 0.3rem;
    overflow: hidden;
    font-size: .9rem;
}

.mytable thead th {
    font-weight: 500;
    color: #fff;
    background-color: #c90404;
    overflow: hidden;
}

.mytable td,
.mytable th {
    border: 1px solid rgb(11 77 161 / 10%);
    padding: 10px;
    overflow: hidden;
    transition: .3s;
}


.mytable tr {
    transition: .3s;
}

.mytable tr:hover {
    background: rgb(220 234 237 / 50%);
}


/*careers*/

.crsvacncy-full{
   padding: 20px;
    border: 1px solid #c90404a6;
    border-radius: 10px;
    position: relative; 
    display:flex;
    flex-direction: column;
}
.crsvacncy{
    display: flex;
    gap: 20px;
}
.careershed{
    font-size:1.4rem;
    font-weight:600;
    color:#c90404;
}
.crs-hed{
    width:50%;
}
.crs-hed p {
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 10px;
}
.crs-hed h4 {
  font-weight: 600;
  margin-bottom: 3px;
  font-size: 1rem;
}
.crsdes{
    padding-left:25px;
    border-left: 1px solid #00000014;
}
.crsvacncy-full .sliderbtn{
    margin-top: 10px;
    margin-left: auto;
}





/*---------------------------------------*/
/*::::::::::::::::::MODAL::::::::::::::*/
/*---------------------------------------*/
.modal-content{
  border-radius: 50px 20px 50px 20px;
  border: none;
  background: #fff;
  box-shadow: 6px 8px 20px rgb(0 0 0 / 10%);
}
.modal-backdrop{    
  background: #c90404;
  height: calc(100% + 50px);
}

.mymodal .profilecard{
  box-shadow: 5px 6px 20px var(--green10);
  border-radius: 1rem;
  margin-top: -50px;
  background: #fff;
  max-width: 300px;
  width: 100%;
}
.closebtn{
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  border: none;
  background: transparent;
}

.modal-body{
    background: #fff;
    border-radius: 35px 15px 35px 15px;
}

.carerfrm input,
.carerfrm select,
.carerfrm textarea {
  width: 100%;
  border: 1px solid #0000001a;
  border-radius: 5px;
  padding: 8px 15px;
  font-size: 0.9rem;
  transition: 0.3s;
  color: #333;
}
.carerfrm label{
   font-size: 0.9rem; 
   color: #333;
}
.carerfrm input::placeholder,
.carerfrm select::placeholder,
.carerfrm textarea::placeholder {
  color: rgba(0, 0, 0, 0.356);
}
.carerfrm input:focus,
.carerfrm select:focus,
.carerfrm textarea:focus {
  border: 1px solid #c90404;
  outline: none;
}


@media (max-width: 450px){
   .crsvacncy {
    display: flex;
    gap: 10px;
    flex-direction: column;
} 
.crs-hed{
    width:100%;
}
.crsdes {
    padding-left: 0;
    border-left: none;
}
}