@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700;800&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600;7..72,700;7..72,800;7..72,900&display=swap');
body{
  overflow-x: hidden;
}
  *{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: 'Karla', sans-serif;
}
body.lock{
  overflow: hidden;
}
.lineClamp{
  display: -webkit-box;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}
.roboto{
  font-family: 'Roboto', sans-serif;
}
.literata{
  font-family: 'Literata', serif;
}
:root {
  --color1: #FB6F00;
  --color2: #022B50;
  --black:#262626;
  --gray:4A4A4A;
  --background:#F5F5F5;
}
.Active {
  color: var(--color1) !important;
}
.container{
  max-width: 1340px !important;
  margin: auto;
}
ul,
li,
a,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  padding: 0px;
  margin: 0px;
  list-style: none;
  text-decoration: none;
}
.sectionHeading {
margin-bottom: 40px;
}
.sectionHeading span.white{
  color: #F3F3F3;
}
.sectionHeading span{
  font-size: 120px;
  margin-bottom: -90px;
  z-index: 1;
  color: #E9E9E9;
}
.sectionHeading p{
color: var(--color1) !important;
width: max-content;
z-index: 2;
}
.sectionHeading h2{
font-size: 40px;
z-index: 2;
}
.sectionHeading p::after{
  display: inline-block;
  width: 45px;
  height: 2px;
  content: "";
  background-color: var(--color1);
  position: absolute;
  bottom: 10px;
  right: -50px;
}
.section-padding {
  padding: 50px 0px;
}
.section-padding-top {
  padding-top:50px;
}
.section-padding-bottom {
  padding-bottom:50px;
}
@media(max-width:768px){
  .section-padding {
    padding: 30px 0px;
  }
  .section-padding-top {
    padding-top: 30px;
  }
  .section-padding-bottom {
    padding-bottom: 30px;
  }
}
.font-12 {
  font-size: 12px;
}
.font-14 {
  font-size: 14px;
}
.font-16 {
  font-size: 16px;
}
.font-18 {
  font-size: 18px;
}
.font-20 {
  font-size: 20px;
}
.font-22 {
  font-size: 22px;
}
.font-24 {
  font-size: 24px;
}
.font-26 {
  font-size: 26px;
}
.font-28 {
  font-size: 28px;
}
.font-30 {
  font-size: 30px;
}
/*  */
/* carasoul dots or nav css start */
.owl-dots{
  margin-top: 30px !important;
} 
.owl-dot span{
transition: all ease .5s !important;
}
.owl-dot.active span{
  background-color: var(--color1) !important;
  width: 30px !important;
 }
 .owl-dot span{
  width: 4px !important;
  height: 4px !important;
  border-radius: 0 !important;
 }
 /* carasoul dots or nav css start */
/* modal */
.modal-header{
  color: black;
  background-color: var(--color1) !important;
}
.modal-header .btn-close{
  background: none;
  opacity: 1;
  box-shadow: none;
}
.modal-dialog{
  padding: 0px 100px;
}
.modal-dialog .modal-content{
border-radius: 10px;
overflow: hidden;
}
.modal-header .btn-close::after{
  content: "\F62A";
  font-family: bootstrap-icons;
  font-size: 30px;
  color: rgb(24, 23, 23);
}
.modal form button{
  padding: 7px 20px;
  background-color: var(--color2);
  color: white;
  border: none;
}
 /* header start */
 #header{
  max-width: 1600px;
  margin: auto;
  position: sticky;
  top: 0;
  z-index: 8;
  background-color: white;
 }
 #header .buttons  div:first-child{
   padding: 22px 20px;
   padding-left: 50px;
  background: rgb(255,255,255);
  background: linear-gradient(117deg, rgba(255,255,255,0) 20%, var(--color1) 20%);
 }
 #header .headTitle span{
  color: var(--color1);
 }
 #header .logo img{
  width: 100px;
 }
#header .navLinks{
  color: var(--black);
  transition: opacity ease .2s;
  opacity: .5;
 }
 #header .navItems{
  padding-block: 22px;
 }
 #header .navItems.Active .navLinks{
  color: var(--color1);
  font-weight: 500;
  opacity: 1;
 }
 #header .navItems:hover .navLinks{
  opacity: 1;
 }
 #header .toggleButton{
transition: all ease .5s;
font-size: 35px;
position: relative;
z-index: 10;
gap: 6px;
/* transform-origin: 50% 50%; */
 }
 #header .toggleButton span{
height: 2px;
width: 24px;
background-color: white;
 }
 #header .toggleButton.rotate{
transform: rotate(135deg) scale(1.2);
 }
 #header .toggleButton.rotate span:nth-child(1){
  display: none !important;
 }
 #header .toggleButton.rotate span:nth-child(3){
  transform: rotate(270deg);
  translate: 0px -8px;
 }
 /* drop down start */
 #header .dropDownMenu{
  transition: bottom ease .3s , opacity ease .3s ;
overflow: hidden;
  left: 0;
  max-height: 1000px;
  background-color: var(--color1);
  bottom: -180px;
position: absolute;
  width: 230px;
  border-bottom-left-radius:4px ;
  border-bottom-right-radius:4px ;
opacity: 0;
transform: scale(0);
}
#header .navItems .dropDownMenu li,
#header .navItems .dropDownMenu li a{
  transition: all ease .3s;
}
#header .navItems .dropDownMenu li a{
  padding: 8px  12px;
}
#header .navItems .dropDownMenu li:hover{
  background-color: white;
}
#header .navItems .dropDownMenu li:hover a{
 color: rgb(48, 46, 46) !important;
}
#header .navItems:hover .dropDownMenu{
  opacity: 1;
  transform: scale(1);
  top: 70px;
  height: max-content;
  max-height: 1000px;
 }
 /* about start */
 #about{
  background-color: var(--background);
 }
 #pageSlide {
height: max-content;
  overflow: hidden;
 }
 #pageSlide h1{
  font-size: 62px;
 }
 #pageSlide .imgContainer{
  position: relative;
 }
 #pageSlide .overlay{
  width: 100%;
  left: 0 ;
  top: 0;
  height: 100%;
  background-color: #0000008f;
  position: absolute;
 }
 #pageSlide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 300px;
vertical-align: top;
 }
 .breadcrumb li{
  color: #bbbbbb !important;
 }
 .breadcrumb li a{
  color: rgb(255, 255, 255);
 }
 .breadcrumb-item+.breadcrumb-item::before {
  color: white !important;
 }
  .backArrow svg{
  transform: rotate(270deg);
 }