/* .header {
    width: 100%;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5%;
    background-color: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    padding-inline: 20px;
} */




.main_body{
    width: 100%;
    /* background-size: cover;
    background: url(../images/background/body-bg-02.webp) rgba(255, 0, 150, 0.3); */
    /* padding: 10px 20px; */
    /* min-height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat; */
}

.home-welcome{
    background-color: var(--white_color);
    border-radius: 5px;
}
.framework{
    background-color: var(--white_color);
    border-radius: 5px;
}

/* 👉 Header Section  */

.header {
    width: calc(100% - 20px);
    margin: 10px auto 0;
    height: 70px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    z-index: 9;
    transition: .3s ease-in-out;
}
.header.sticky {
  position: fixed;
  margin: 0;
  top: 0px;
  left: 10px;
}
.logo{
    width: 10%;
} 
.logo img{
    width: 100%;
}

.logo_text {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: var(--black_color);
}
.logo_sub_text {
    font-family: 'Comfortaa', sans-serif !important;
    color: var(--primary_color);
    font-size: 20px;
    margin-left: 5px;
    font-weight: 300;
}
.menubar{
    width: 70%;
}
.menubar ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}
.menubar ul li a {
    color: var(--black_color);
    font-size: 14px;
    font-weight: 500;
    transition: .3s linear;
}
.menubar ul li a:hover{
    color: var(--primary_color);
}
.call_to_action{
    width: 15%;
    display: flex;
    justify-content: end;
    gap: 20px;
}
.contact_button {
    padding: 10px 25px;
    letter-spacing: 1px;
    background-color: var(--primary_color);
    color: var(--white_color);
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: .3s linear;
}
.contact_button:hover {
    border-top: solid 2px var(--primary_color);
    background-color: var(--white_color);
    color: var(--primary_color);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.call_header, .email_header{
    display: flex;
    align-items: center;
    gap: 10px;
}
.call_header h2, .call_header h6{
    margin: 0;
    line-height: 22px;
}
.call_header h2 a {
    font-size: 20px;
    font-weight: 700;
    color: var(--black_color);
}
.call_header h6 a{
    font-size: 13px;
    color: var(--black_color);
}
.call_email_icon{
    background-color: var(--primary_color);
    padding: 10px;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.call_header svg{
    width: 28px;
    height: 28px;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(134deg) brightness(105%) contrast(101%);
}

/* 👉 Banner Section  */
.banner{
    height: 380px;
}
.banner_info{
    padding-right: 30px;
}
.banner_info h4 {
    font-size: 20px;
    font-weight: 500;
    color: var(--primary_color);
    margin-bottom: 20px;
}


.banner-slider {
    width: 100%;
    height: 300px;
    overflow: hidden;
}
.banner-slider img {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }

.banner-slider .slick-prev:before, .banner-slider .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: var(--primary_color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.banner-slider .slick-prev, .banner-slider .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    padding: 3px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    border: none;
    outline: none;
    background: rgb(106 100 100 / 25%);
    z-index: 9;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: .3 ease-in-out;
}
.banner-slider .slick-prev {
    left: 26px;
}
.banner-slider .slick-next {
    right: 25px;
}
.banner-slider .slick-prev:hover, .banner-slider .slick-prev:focus, .banner-slider .slick-next:hover, .banner-slider .slick-next:focus {
    outline: none;
    background: rgb(106 100 100 / 25%);
    color: var(--primary_color);
}

/* 👉 Service Card Section  */

.service_card {
    padding: 20px;
    border-radius: 10px;
    height: 110px;
    width: 100%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: baseline;
    text-align: left;
    border-top: solid .5px #eee;
    border-bottom: solid 2px var(--primary_color);
    overflow: hidden;
    transition: .3s ease-in-out;
    cursor: pointer;
    background-color: var(--white_color);
}
.service_card:hover{
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}
.service_card:hover .service_card h6{
    color: var(--primary_color);
    /* transition: linear .3s ease; */
}
.service_card svg {
    filter: invert(82%) sepia(21%) saturate(6022%) hue-rotate(171deg) brightness(96%) contrast(91%);
    width: 25px;
    height: 25px;
    margin-bottom: 10px;
}
.service_card h6 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 0;
    color: var(--black_color);
}
/* .service_card_section .swiper {
    width: 100%;
    height: 100%;
}

.service_card_section .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service_card_section .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service_card_section .swiper-button-next, .service_card_section .swiper-button-prev {
    background-color: white;
    background-color: rgb(255, 255, 255);
    padding: 15px;
    border-radius: 50px;
    width: 10px;
    height: 10px;
    color: #000 !important;
    fill: black !important;
    stroke: black !important;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: .3 ease-in-out;
}
.service_card_section .swiper-button-next:after, .service_card_section .swiper-button-prev:after {
    font-size: 12px !important;
    font-weight: bold;
} */

/* .key-feature-item{
    background-color: var(--lite_white_color);
} */

/* 👉 Footer Section  */

/* .footer-wrap{
 background: url(../images/background/footer-background-01.webp) no-repeat bottom right;
    background-size: cover;
} */
.footer {
    padding: 100px 20px 20px 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5%;
   
    
}
.about_wrap{
    width: 35%;
    position: relative;
    color: #fff;
    text-align: center;
}
.about_wrap .sub-paragraph{
    color: var(--black_color);
    width: 70%;
}
.important_wrap{
    width: 40%;
}
.links_wrap{
    width: 30%;
}
.links_wrap ion-icon {
    padding: 5px;
    color: var(--primary_color);
    font-size: 20px;
    margin-right: 2px;
}

.footer a{
    font-size: 14px;
    line-height: 35px;
    color: var(--black_color);
    transition: .3s linear;
}
.footer a:hover{
    color: var(--primary_color);
    transform: translateY(-5px);
}

.footer h5 {
    font-size: 16px;
    color: var(--primary_color);
    margin-bottom: 40px;
    font-weight: 500;
    letter-spacing: 1px;
}
.footer h6 {
    font-size: 14px;
    color: var(--black_color);
    margin: 5px 0 15px 0;
    font-weight: 500;
    letter-spacing: 1px;
}

.footer_bottom {
    display: flex;
    justify-content: space-between;
    padding-inline: 20px;
    height: 70px;
    background-color: var(--white_color);
    align-items: center;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.footer_bottom img {
    width: 150px;
    padding: 10px;
    background-color: var(--white_color);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.right_wrap{
    display: flex;
    align-items: center;
    gap: 20px;
}
.footer_bottom a{
    font-size: 14px;
    color: var(--black_color);
}
.footer_bottom a span {
    color: var(--primary_color);
}
.footer-wave {
    position: absolute;
    left: 80px;
    bottom: 0px;
    background-color: #f4eaf8;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    z-index: -1;
    animation: bounce 5s linear infinite;
}
.footer-wave-left-child{
    position: absolute;
    left: 0;
    top: 0;
    background-color: #bcd0fa;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    z-index: -1;
    animation: bounce 5s linear infinite;
}
.footer-wave-right-child{
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #a6d8f2;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    z-index: -1;
    animation: bounce 5s linear infinite;
}
.footer-social i {
    width: 35px;
    height: 35px;
    line-height: 36px;
    text-align: center;
    background-color: #f1fbff;
    font-size: 16px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 5px;
    margin: 0 5px;
    transition: .3s linear;
}
/* .footer-social i:hover{

} */
.footer-social .fa-facebook-f{
color: #3b5998;
}
.footer-social .fa-linkedin-in{
color: #0072b1;
}
.footer-social .fa-basketball{
color: #ea4c89;
}
.footer-social .fa-instagram{
color: #d62976;
}

/* 👉 Back to Top  */

.backButton {
    display: none;
    cursor: pointer;
    position: fixed;
    bottom: 70px;
    right: 30px;
    z-index: 99;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    background-color: var(--primary_color);
    color: var(--white_color);
    border: none;
    transition: .3s linear;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.backButton:hover{
    background-color: var(--blue_color);
}

/* 👉 Workflow section  */


.workflow-item{
    width: 25%;
}
.workflow-box-top{
    position: relative;
    height: 50px;
}
.workflow-number{
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--white_color);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    transition: linear .3s;
}
.workflow-liner {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-top: 1px dashed var(--grey_color);
    z-index: -1;
}
.workflow-word{
    text-align: left;
    margin-top: 30px;
    padding-right: 20px;
}
.workflow-item:hover .workflow-number{
    background-color: var(--primary_color);
    color: var(--white_color);
    
}

.objective-circle{
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}
.objective-item{
    width: 49%;
    height: 250px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    margin-bottom: 2%;
    background-color: var(--white_color);
    position: relative;
    padding: 20px;
    border-radius: 5px;
}
.objective-image {
    position: absolute;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
.objective-image img {
    height: 100%;
    object-fit: cover;
}
.objective-item:nth-child(1) .objective-image{
    right: 0;
    bottom: 0;
    border-radius: 100% 0 0 0;
}
.objective-item:nth-child(2) .objective-image{
    left: 0;
    bottom: 0;
    border-radius: 0 100% 0 0;
}
.objective-item:nth-child(3) .objective-image{
    top: 0;
    right: 0;
    border-radius: 0 0 0 100%;
}
.objective-item:nth-child(4) .objective-image{
    top: 0;
    left: 0;
    border-radius: 0 0 100% 0;
}
.objective-word {
    width: 65%;
}
.objective-item:nth-child(even) .objective-word{
    text-align: right;
}
.objective-item:nth-child(even){
    justify-content: flex-end;
}
/* .framework{
     display: flex;
     align-items: center;
     justify-content: center;
} */

.framework-section{
    height: 600px;
    background-image: url(../images/section-images/framework.webp);
    background-size: cover;
    position: relative;
}

.framework-item {
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    background-color: var(--white_color);
    transition: .3s linear;
    position: absolute;
    animation: bounce 5s linear infinite;
}
.framework-item:hover{
    transform:translateY(-5px);
}

.framework-icon{
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /* border-radius: 50%;
    background-color: var(--primary_color);
    color: var(--white_color); */
    margin-right: 10px;
}


.framework-item:nth-child(1) {
    top: 54px;
    left: 100px;
}
.framework-item:nth-child(2){
    top: 160px;
    left: 290px;
}
.framework-item:nth-child(3){
    top: 280px;
    left: 80px;
}
.framework-item:nth-child(4){
    bottom: 70px;
    left: 240px;
}
.framework-item:nth-child(5) {
    top: 65px;
    right: 105px;
}
.framework-item:nth-child(6) {
    bottom: 50px;
    right: 70px;
}
.framework-item:nth-child(7) {
    top: 230px;
    right: 30px;
}
.framework-item:nth-child(8) {
    bottom: 165px;
    right: 195px;
}

.enquiry-line{
    background-color: var(--lite_blue_color);
    /* background-image: url(../images/background/body_background_02.webp); */
    background-size: cover;
}

 /* 👉 Portfolio Section  */



.portfolio-gallery-section {
  
}

.isotope-wrapper {
  width: 100%;
}

.isotope-toolbar {
  text-align: center;
  margin-bottom: 25px;
}
.isotope-toolbar span {
  text-transform: capitalize;
  font-size: 15px;
  font-weight: 500;
  transform: ease-in-out 0.5s;
  cursor: pointer;
}
.isotope-toolbar-btn {
  border: none;
  outline: none;
  padding: 8px 20px;
  background-color: var(--white_color);
  color: var(--primary_color);
  cursor: pointer;
  border-radius: 5px;
}

.isotope-toolbar-btn:hover {
  background-color: var(--blue_color);
  color: var(--white_color);
}

.isotope-toolbar-btn.active {
  background-color: var(--primary_color);
  color: var(--white_color);
}
.isotope-box {
  position: relative;
  width: 100%;
  display: flex;
  gap: 1%;
}
.isotope-item {
  position: relative;
  width: 25%;
}

.portfolio-item {
  background-color: var(--white_color);
  padding: 15px;
  border-radius: 5px;
  /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.portfolio-info {
    padding: 10px;
    text-align: left;
}
.portfolio-image{
    cursor: pointer;
    width: 100%;
    overflow: hidden;
}
.port-image-item {
    transition: ease-in-out 0.4s;
}
/* .portfolio-item:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
} */
.portfolio-item:hover .port-image-item {
    transform: scale(1.1);
}
.show {
  display: block;
}

.modal-background {
    background: rgb(156 158 200 / 87%);
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
}

.showcase img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: auto;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.showcase .close {
  height: 40px;
  width: 40px;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  position: absolute;
  right: 20px;
  top: 10px;
  cursor: pointer;
}


/* 👉 About Us  */

.about-welcome-section{
    width: 100%;
    height: auto;
    /* background: url(../images/background/about-us.webp) no-repeat right;
    background-size: contain; */
}

/* 👉 Contact Us  */

.contact-page-section{
    width: 100%;
    height: auto;
    background: url(../images/background/contact-us.webp) no-repeat;
    background-size: cover;
}
.contact-form{
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 50px 30px 30px 30px;
    background-color: var(--white_color);
}
.contact-form input[type=text],
.contact-form input[type=number],
.contact-form input[type=email]
 {
    width: 100%;
    border: none;
    border-bottom: solid 1px #ccc;
    height: 35px;
    font-size: 14px;
    margin-top: 20px;
    padding: 10px;
}
.contact-form textarea{
    width: 100%;
    border: none;
    border-bottom: solid 1px #ccc;
    height: 120px;
    font-size: 14px;
    margin-top: 20px;
    padding: 10px;
}
.contact-form input[type=submit]{
    border: none;
    margin-top: 20px;
}

/* Terms and Conditions  */

.terms-conditions-section {
    /* background-image: url('../images/background/terms-conditions.webp'); */
    background-image: linear-gradient(45deg, rgb(255 255 255), rgb(252 252 252 / 85%)), url(../images/background/terms-conditions.webp);
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}