/* GENERAL STYLES */      
body{
    font-family: 'Mulish', sans-serif;
}

/* font-sizes */
.font-15 {
    font-size: 15px;
}

.font-30 {
    font-size: 30px;
}
    
/* css for buttons */
.font-color-one {
    color: #205B8B;
} 

.font-color-two {
    color: #3C55A5;
}
 
.title-hr {
    color: #60BB80;
    border: solid 1px;
}              

.btn-span2 .fa-long-arrow-right {
    margin-left: -6% !important;
}
      
.btn-main2 {
    color: white;
    font-weight: 600;
    font-size: 17px;
    background: linear-gradient(to left, #46B76D 50%, #205B8B 50%) right;
    background-size: 201%;
    transition: .5s ease-out;
    padding-right: 0px;
    width: 22.4%;
    padding: 7.1px 0px 7.1px 17px !important;
}
   
.btn-main2:hover {
    background-position: left;
    color: white;
}
      
.btn-span2 {
    padding: 10.5px 0px;
    background-color: #205B8B;
    padding: 8.5px 0px 9.5px 0px;
    margin-left: 24px !important;
}

.btn-main3 {
    color: white;
    font-weight: 600;
    font-size: 17px;
    background: linear-gradient(to left, #46B76D 50%, #205B8B 50%) right;
    background-size: 201%;
    transition: .5s ease-out;
    padding-right: 0px;
    width: 63.9%;
    padding: 7.1px 0px 7.1px 17px !important;
}

.btn-main3:hover {
    background-position: left;
    color: white;
}

.btn-main4 {
    color: white;
    font-weight: 600;
    font-size: 17px;
    background: linear-gradient(to left, #46B76D 50%, #205B8B 50%) right;
    background-size: 201%;
    transition: .5s ease-out;
    padding-right: 0px;
    width: 56.9%;
    padding: 7.1px 0px 7.1px 17px !important;
}

.btn-main4:hover {
    background-position: left;
    color: white;
}

.btn-main5 {
    color: white;
    font-weight: 600;
    font-size: 17px;
    background: linear-gradient(to left, #46B76D 50%, #205B8B 50%) right;
    background-size: 201%;
    transition: .5s ease-out;
    padding-right: 0px;
    width: 60.9%;
    padding: 7.1px 0px 7.1px 17px !important;
}

.btn-main5:hover {
    background-position: left;
    color: white;
}

.btn-main6 {
    color: white;
    font-weight: 600;
    font-size: 17px;
    background: linear-gradient(to left, #46B76D 50%, #205B8B 50%) right;
    background-size: 201%;
    transition: .5s ease-out;
    padding-right: 0px;
    width: 57.9%;
    padding: 7.1px 0px 7.1px 17px !important;
}

.btn-main6:hover {
    background-position: left;
    color: white;
}
/* .main-btn {
    color: #205B8B;
    font-weight: 600;
    font-size: 17px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, #D8DDED 50%) right;
    background-size: 201%;
    transition: .5s ease-out;
} */

.main-btn {
    color: #205B8B;
    font-weight: 600;
    font-size: 17px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, #00ba73 50%) right;
    background-size: 201%;
    transition: .5s ease-out;
    border: solid 2px #00b973 !important;
}

.counter-font{
    font-family: 'Oswald', sans-serif;
}

.carousel-caption {
    position: relative;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
    margin-top: -9%;   
    width: 96% !important;
}
/* .main-btn:hover {
    background-position: left;
    color: #125328;
    padding-left: 25px !important;
} */

.main-btn:hover { /* css for button hover */
    background-position: left;
    color: #ffffff;
    padding-left: 25px !important;
}
.span-btn {
    background: #D8DDED;
    padding: 10.5px 0px;
}

.main-btn:hover .span-btn {
    background: #ffffff00;
}

.btn-arrow {
    margin-left: -8px;
}

/* css for buttons */
.slider-span-btn .fa-long-arrow-right {
    margin-left: -16%;
}

/* css for inner pages */
.inner-pages-header-content {
    margin-bottom: 3% ;
}


/* whatsapp chart integration */
.whatsapp-chat {
    position: fixed;
    z-index: 99;
    top: 73% !important;
    left: 94%;
}

.slider-img-22{
    clip-path: polygon(0 0, calc(60% - 5px) 0, calc(60% - 5px) calc(70% - 5px), 0 calc(70% - 5px), 0 calc(70% + 5px), calc(60% - 5px) calc(70% + 5px), calc(60% - 5px) 100%, 0 100%, 0 0, calc(60% + 5px) 0, calc(60% + 5px) calc(33.33% - 5px), 100% calc(33.33% - 5px), 100% calc(33.33% + 5px), calc(60% + 5px) calc(33.33% + 5px), calc(60% + 5px) calc(66.66% - 5px), 100% calc(66.66% - 5px), 100% calc(66.66% + 5px), calc(60% + 5px) calc(66.66% + 5px), calc(60% + 5px) 100%, 100% 100%, 100% 0);

}

/* || HOME PAGE CSS GO HERE SECTION VISE*/

/* Start - Client section css */
.slider-section {
    background: #e7f8ff;
    margin-top: -11%;
}

.sldier-content {
    width: 54% !important;
    position: absolute;
    margin-top: 21% !important;
}

.sldier-content h1 {
    font-size: 50px !important;
}


.slider-main-btn {
    color: white;
    font-weight: 600;
    font-size: 17px;
    background: linear-gradient(to left, #46B76D 50%, #205B8B 50%) right;
    background-size: 201%;
    transition: .5s ease-out;
    padding-right: 0px;
    /* width: 24.5%; */
    padding: 7.3px 1px 7.5px 7px !important;
}

.sldier-content .slider-span-btn {
    margin-right: -4px;
}

.display-projects .slider-span-btn {
    margin-right: -7px;
}

.slider-main-btn:hover {
    background-position: left;
    color: white;
    /* padding-left: 25px !important; */
}

.slider-span-btn{
    padding: 10.5px 0px;
    background-color: #205B8B;
    padding: 9.5px 0px 10.5px 0px;
    margin-left: 24px !important;
}

/* End - Client section css */

/* Start - Header section css */
.client-section-bg {
    background-color: #EBF8FF;
}

  .heading {
    text-align: center;
    font-size: 3.5rem;
    font-weight: bold;
    padding: 5rem 0;
  }

  .counter-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .client-counter {
    font-weight: 800;
    font-size: 41px;
    color: #205B8B;
}

.social-background_01 {
    border: solid 2px #00b973;
    border-radius: 50px;
    padding: 1px 8px;
    box-shadow: 2px 1px 7px #b9b9b9;
}

.social-background_01:hover {
    border: solid 2px #205B8B;
    border-radius: 50px;
    padding: 1px 8px;
    box-shadow: 2px 1px 7px #b9b9b9;
}

.social-background_02 {
    border: solid 2px #00b973;
    border-radius: 50px;
    padding: 2px 5px;
    box-shadow: 2px 1px 7px #b9b9b9;
}

.social-background_02:hover {
    border: solid 2px #205B8B;
    border-radius: 50px;
    padding: 2px 5px;
    box-shadow: 2px 1px 7px #b9b9b9;
}

.social-background_03 {
    border: solid 2px #00b973;
    border-radius: 50px;
    padding: 1px 5px;
    box-shadow: 2px 1px 7px #b9b9b9;
}

.social-background_03:hover {
    border: solid 2px #205B8B;
    border-radius: 50px;
    padding: 1px 5px;
    box-shadow: 2px 1px 7px #b9b9b9;
}

.social-background_04 {
    border: solid 2px #00b973;
    border-radius: 50px;
    padding: 1px 5px;
    box-shadow: 2px 1px 7px #b9b9b9;
}

.social-background_04:hover {
    border: solid 2px #205B8B;
    border-radius: 50px;
    padding: 1px 5px;
    box-shadow: 2px 1px 7px #b9b9b9;
}

/* header nav css */

.icon-color-blue {
    color: #3C55A5;
    font-size: 40px !important;
}

.icon-color-blue:hover {
    color: #000000;
    font-size: 40px !important;
}

ul.nav.toggle-menu {
    position: absolute;
    margin-top: -5%;
    width: 19.9%;
    background-color: #EBF8FF;
    padding: 10px;
    border: solid 1px #d9d9d9;
    margin-left: 55px;
    padding-top: 32px;
}
.menu {
    z-index: 9999999999999 !important;
}
.header-col {
    z-index: 9999 !important;
}

.nav-social-icons {
    font-size: 20px;
    color: #46B76D;
}

@import url("https://fonts.googleapis.com/css?family=Lora&display=swap");

.menu-bar {
  z-index: 2;
}

.menu {
  width: 3.5rem;
  cursor: pointer;
}

.bar {
    width: 66%;
    height: 0.3rem;
    display: block;
    background-color: #3C55A5;
    border-radius: 0.5rem;
    transition: 400ms ease;
}

#bar1 {
  transform: translateY(-0.4rem);
}

#bar3 {
  transform: translateY(0.4rem);
}

.toggle-menu .bar {
   background-color: #3C55A5;
}

.toggle-menu #bar1 {
  transform: translateY(0.3rem) rotate(135deg);
}

.toggle-menu #bar2 {
  transform: rotate(45deg);
  opacity: 0;
}

.toggle-menu #bar3 {
  transform: translateY(-0.4rem) rotate(-135deg);
}

.header-nav {
  margin: 0 2rem;
  list-style: none;
  transition: 400ms ease;
  display: none;
}

.toggle-menu {
  display: block;
}

.menu-bg {
  width: 0;
  height: 0;
  background: radial-gradient(circle, #9e579d, #9e40bf);
  border-radius: 50%;
  z-index: 1;
  transition: 400ms ease;
}

.toggle-menu-bg {
  width: 65rem;
  height: 60rem;
  transform: translate(-60%, -30%);
}

/* non-essential code */
.info {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-size: 2rem;
  color: #9e57aa;
}
/* End - Header section css */

/* Start - About us section css*/
.about-bg {
    background: url(/images/frontend/home/about-us/bg.png);
    background-position: center !important;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover !important;
}
/* End - About us section css */

/* Start - Service section css */
.service-bg {
    background: url(/images/frontend/home/about-us/service-bg.png);
    background-position: center !important;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover !important;
}

/* .service-card-hover:hover {
    background: white !important;
} */

.service-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    min-height: 74px;
}

.service-card-hover {  /* css for bg */
    color: #205B8B;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #ffffff 50%) left;
    background-size: 200%;
    transition: .5s ease-out;
}

.service-card-hover:hover { /* css for bg hover */
    background-position: right;
    box-shadow: 1px 1px 5px #bcbcbc;
}

.service-card-hover:hover .service-title {
    color: #205B8B!important;
}

.service-card-hover:hover .service-content {
    color: #000000 !important;
}

.services-tab {
    background: #205B8B !important;
    width: 19.5%;
    margin-top: 15px !important;
    border-right: solid 1px white !important;
}

.services-tab.active {
    background: #46B76D !important;
    margin-top: 0px !important;
    border: 0px;
}

/* single servces */
.icon-color {
    color: #95D1AA !important;
    font-size: 40px !important;
}

/* End - Service section css */

/* Start - Project section css */
.project-main-img{
    margin-top: -9%;
}

.project-main-img {
    background: url(/images/frontend/home/project/project-img.png);
    background-position: center !important;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover !important;
}

.service-card:hover .service-img {
    transform: rotate(5deg) !important;
    transition: 0.9s;
}

/* .service-card:hover {
    background-position: right;
    box-shadow: 1px 1px 5px #bcbcbc;
    background: #d9ddec;
} */

/* Start - Why ES2 section css */
.why-es2-title {
    color: #205B8B;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.why-es2-content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    min-height: 100px !important;
}

.why-es2-bg {
    background: url(/images/frontend/home/project/why-es2-bg.png);
    background-position: center !important;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover !important;
}

.why-es2-carousel {
    margin-top: -11%;
}

.why-es2-card {
    box-shadow: 0px 0px 6px #bebebe;
    margin-top: 20px;
}

.why-es2-card {
    background: linear-gradient(to left, rgb(255 255 255) 50%, #005c8b 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}

.why-es2-card:hover {
    background-position: left;
    box-shadow: 1px 1px 5px #bcbcbc;
    color: white !important;
}

.why-es2-card:hover .why-es2-title {
    color: #ffffff;
}

.why-es2-indicator.active {
    background-color: #46B76D !important;
    height: 8px !important;
    opacity: 1 !important;
}
.why-es2-indicator {
    background-color: #205B8B !important;
    height: 5px !important;
    opacity: 1 !important;
}
/* End - Why ES2 section css */


/* Start - Footer css */
.footer-bg{
        background: url(/images/frontend/home/footer/footer-bg-2.png);
        background-position: center !important;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover !important;
        clip-path: ellipse(85% 100% at 50% 100%);
}

.subscription-input {
    border-radius: 50px 0px 0px 50px !important;
}

.subscription-submit {
    background: linear-gradient(to left, #639ECA 50%, #51ba72 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
    border-radius: 0px 20px 20px 0px !important;
}

.subscription-submit:hover {
    background-position: left;
    color: white !important;
}

.footer-details-section {
    background: #639ECA;
    opacity: 0.9;
}

.footer-copyright-bg {
    background-color: #215C8B;
}

.footer-section {
    margin-top: -8%;
}

.footer-logo-img {
    position: absolute;
    width: 22% !important;
    left: -9%;
}
/* End - Footer css */
/* HOME PAGE CSS END SECTION VISE*/

/* SERVICES PAGES CSS START */

/* Start - Services Archive page CSS */
.header-banner {
    margin-top: -8%;      
}

.icon-size {
    font-size: 35px !important;
}

.archive-service-card-2 {
    background: url(/images/frontend/service/bg-second.png) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.link-footer-tab:hover li {
    color: #000000 !important;
    font-weight: 900;
}

img.logo-img {
    width: 20% ;
}

p .link-footer-tab:hover {
    color: #000000 !important;
}

.span-text {
    background: #A9DFBC;
    padding: 10.5px 0px;
}

.services-title-height {
    line-height: 42px;
}

.display-services{
    margin-bottom: 10% !important;
}
/* End - Services Archive page CSS */
/* SERVICES PAGES CSS END */


/* PROJECTS PAGES CSS START */
/* Start- Project Archive page CSS */
.project-card.p-3 {
    background-image: linear-gradient(177deg, #EBF8FF, #B4CFF0);
}

.archive-project-card {
    min-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.project-card:hover {
    background-image: linear-gradient(177deg, #096496, #B4CFF0);
    color: white;
}
/* End - Project Archive page CSS */


/* Start - Contact Us Page CSS */

.contact-form-bg {
    background: #3C55A5;
    border-radius: 30px;
}

.contact-form-bg .fa-long-arrow-right {
    margin-left: -5%;
}

.contact-form-bg .slider-span-btn {
    MARGIN-RIGHT: -7%;
}

.sldier-content .slider-span-btn .fa-long-arrow-right {
    margin-left: -4%;
}

/* End - Contact Us page CSS */
button.scroll-top {
    position: fixed;
    z-index: 99;
    top: 84% !important;
    left: 94.2%;
    background: #141414;
    border: none;
    padding: 17px;
    color: white;
    font-size: 19px;
    border-radius: 50px;
}

/* PROJECTS PAGES CSS END */

     
.about-us-bg {
    width: 100%;
    background: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment:fixed;
}
  
.display-blogs{
    width: 100%;
    background-image: url('/images/frontend/home/blog/blog-bg-v2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment:fixed;
}

.view-news-archive .slider-span-btn {
    padding: 10.5px 0px;
    background-color: #205B8B;
    padding: 8.5px 0px 11.5px 0px;
    margin-left: 24px !important;
}

.view-archive .slider-span-btn .fa-long-arrow-right {
    margin-left: -5%;
}

.view-news-archive .slider-span-btn .fa-long-arrow-right {
    margin-left: -5%;
}

.view-news-archive .slider-span-btn {
    padding: 10.5px 0px;
    background-color: #205B8B;
    padding: 9.5px 0px 10.5px 0px;
    margin-left: 24px !important;
}

.about-icon-color {
    color: #51ba72;
    margin-left: 38% ;
}

.abt-section-img {
    width: 90% !important;
}

.blog-arrow-left {
    background: #ffffff00;
    padding: 12px 39px 12px 14px;
    color: black;
    border-radius: 50px;
    font-size: 30px;
    border: solid 1px #b9b9b9;
}

.privacy-link:hover {
    color: #66cc9f !important;
}

.blog-arrow-right {
    background: #ffffff00;
    padding: 13px 37px 12px 20px;;
    color: black;
    border-radius: 50px;
    font-size: 30px;
    border: solid 1px #b9b9b9;
}

.blog-arrow-right:hover {
    background: #005c8b;
    padding: 13px 37px 12px 20px;;
    color: white;
    border-radius: 50px;
    font-size: 30px;
}

.blog-arrow-left.owl-prev:hover{
    background: #005c8b;
    padding: 12px 39px 12px 14px;
    color: white;
    border-radius: 50px;
    font-size: 30px;
}

.project-title {
    min-height: 41px;
}


.scroll {
    cursor: pointer;
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 55px;
    right: -50px;
    border-radius: 100%;
    background-color: #000000;
    border-color: #000000 !important;
    color: rgb(255 255 255);
    text-align: center;
    transition: 500ms;
    z-index: 10;
}

.scroll .icon-bottom {
    font-size: 30px;
}

#jsScroll.visible {
    right: 35px;
    transition: all 400ms;
    transform: rotate(360deg);
    line-height: 45px;
}

/* PROJECT IMG HEIGHT - HOME SECTION */
.project-img {
    min-height: 88px;
    max-height: 88px;
}

/* BLOG IMG HEIGHT - ARCHIVE BLOG */
.all-blog-img {
    min-height: 180px;
    max-height: 180px;
}


/* LATEST BLOG IMG HEIGHT - SINGLE BLOG */
.latest-blog-img {
    min-height: 90px;
    max-height: 90px;
}