:root {

    --alpha: #3251a7;

    --beta: #216abd;

    --gamma: #1fa5d8;

    --delta: #3251a7;

}



.fontfamily {

    font-family: 'Montserrat', sans-serif;

    font-family: 'Nunito', sans-serif;

    font-family: 'Poppins', sans-serif;

}



/* reset css start */

html {

    font-size: 14px;

}

body {

    font-family: 'Montserrat', sans-serif;

    font-size: 1rem;

}

a {

    text-decoration: none;

    color: inherit;

}

a:hover {

    color: var(--alpha);

    outline: none;

}

a:focus {

    outline: none;

}

.btn-primary {

    color: #fff;

    background-color: var(--alpha);

    border-color: var(--alpha);

    letter-spacing: 1px;

    font-weight: 500;

    text-transform: uppercase;

}

.btn.btn-primary {

    padding: 15px 20px;

    border-radius: 0;

}

.contact-form .btn.btn-primary {

    width: 180px;

    max-width: 100%; 

}

.btn-check:focus+.btn-primary, .btn-primary:focus, .btn-check:active+.btn-primary:focus, .btn-check:checked+.btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus {

    box-shadow: none;

}

.btn.btn-viewall {

    min-width: 160px;

}

/* header css start */

header .navbar {

    padding: 0;

}

header .navbar-brand {

    padding: 0;

}

.navbar-brand img {

    width: 180px;

    display: block;

}



/* footer css start */

footer {

    background-color: #000;

    color: #d8d8d8;

}

.foot-top {

    padding: 30px 0 0;

}

.foot-top .container:after {

    content: "";

    display: block;

    width: 100%;

    border-bottom: 1px solid rgb(255 255 255 / 15%);

    margin-top: 15px;

}

footer ul {

    list-style: none;

    margin: 0;

    padding: 0;

}

footer li {

    margin-bottom: 8px;

}

footer li:last-child {

    margin-bottom: 0;

}

.foot-logo img {

    width: 150px;

}

.foot-description {

    font-size: 0.9rem;

    max-width: 80%;

    margin-top: 15px;

}

.foot-title {

    text-transform: capitalize;

    font-size: 1.4rem;

    margin: 0 0 15px;

    color: #fff;

}

footer a, .foot-link {

    color: inherit;

    text-decoration: none;

}

footer a:hover, .foot-link:hover {

    color: var(--gamma);

    text-decoration: none;

}

.contanct-details h5 {

    font-size: 1.1rem;

    font-weight: 500;

    margin-bottom: 5px;

}

.contanct-details p, .contanct-details a {

    margin-bottom: 0;

    font-size: 0.8rem;

}

.contact-icon {

    width: 50px;

    min-width: 50px;

    margin-right: 10px;

    /* background-color: rgb(255 255 255 / 10%); */

    height: 50px;

    text-align: center;

    font-size: 20px;

}

footer .foot-social {

    margin-top: 20px;

}

.foot-social li {

    margin: 0 10px 10px 0;

}

.foot-social li:last-child {

    margin: 0 0 10px 0;

}

.foot-social-link {

    display: block;

    width: 36px;

    height: 36px;

    background-color: var(--gamma);

    border-radius: 50%;

    border: 1px solid transparent;

    line-height: 36px;

    text-align: center;

    transition: all 150ms linear;

}

.foot-social-link:hover {

    color: #fff;

    transition: all 150ms linear;

}

.foot-bottom {

    padding: 15px 0;

    font-size: 0.8rem;

}

.foot-bottom a {

    text-transform: capitalize;

    display: inline-block;

    vertical-align: middle;

}

.foot-bottom span {

    display: inline-block;

    width: 1px;

    height: 14px;

    background-color: rgb(255 255 255 / 50%);

    vertical-align: middle;

    margin: 0 12px;

}



/* main css start */

.banner-section.dark {

    padding: 60px 0;

    text-align: center;

    background-color: #050505;

    color: #fff;

}

.banner-section .container {width: 85%;}

.banner-carousel .slide {

    position: relative;

    overflow: hidden;

    padding-top: 300px;

    padding-bottom: 200px;

}

.banner-carousel .pattern-1 {

    position: absolute;

    left: 0px;

    top: 0px;

    width: 493px;

    height: 492px;

    z-index: 2;

    opacity: 0;

    transform: translateX(-500px);

    background-position: center bottom;

    background-repeat: no-repeat;

    background-size: cover;

    transition: all 900ms ease;

    -moz-transition: all 900ms ease;

    -webkit-transition: all 900ms ease;

    -ms-transition: all 900ms ease;

    -o-transition: all 900ms ease;

}

.banner-carousel .active .pattern-1 {

    opacity: 1;

    transform: translateX(0px);

}

.banner-carousel .pattern-2 {

    position: absolute;

    right: 0px;

    bottom: 0px;

    width: 611px;

    height: 633px;

    z-index: 2;

    background-position: right top;

    background-repeat: no-repeat;

    transform: translateX(500px);

    transition: all 900ms ease;

    -moz-transition: all 900ms ease;

    -webkit-transition: all 900ms ease;

    -ms-transition: all 900ms ease;

    -o-transition: all 900ms ease;

}

.banner-carousel .active .pattern-2 {

    transform: translateX(00px);

    -webkit-transition-delay: 300ms;

    -moz-transition-delay: 300ms;

    -ms-transition-delay: 300ms;

    -o-transition-delay: 300ms;

    transition-delay: 300ms;

}

.banner-subtitle {

    position: relative;

    color: #ffffff;

    font-size: 2rem;

    line-height: 1.8em;

    margin-bottom: 16px;

    font-weight: 700;

    opacity: 0;

    transform: scaleY(0);

    transform-origin: top;

    -webkit-transition: all 1000ms ease;

    -moz-transition: all 100ms ease;

    -ms-transition: all 1000ms ease;

    -o-transition: all 1000ms ease;

    transition: all 1000ms ease;

    z-index: 10;

    text-shadow: 0 0 15px rgb(0 0 0 / 50%);

}

.active .banner-subtitle {

    opacity: 1;

    transform: scaleY(1);

    -webkit-transition-delay: 300ms;

    -moz-transition-delay: 300ms;

    -ms-transition-delay: 300ms;

    -o-transition-delay: 300ms;

    transition-delay: 300ms;

}

.banner-title {

    position: relative;

    color: #ffffff;

    font-weight: 700;

    font-size: 4rem;

    line-height: 1.3;

    opacity: 0;

    transform: scaleY(0);

    transform-origin: top;

    -webkit-transition: all 1000ms ease;

    -moz-transition: all 100ms ease;

    -ms-transition: all 1000ms ease;

    -o-transition: all 1000ms ease;

    transition: all 1000ms ease;

    z-index: 10;

    max-width: 75%;

    text-shadow: 0 0 15px rgb(0 0 0 / 50%);

}

.active .banner-title {

    opacity: 1;

    transform: scaleY(1);

    -webkit-transition-delay: 600ms;

    -moz-transition-delay: 600ms;

    -ms-transition-delay: 600ms;

    -o-transition-delay: 600ms;

    transition-delay: 600ms;

}

.banner-carousel p {

    position: relative;

    color: #ffffff;

    font-size: 1.2rem;

    line-height: 1.9em;

    margin-top: 30px;

    margin-bottom: 30px;

    font-weight: 400;

    opacity: 0;

    transform: scaleY(0);

    transform-origin: top;

    -webkit-transition: all 1000ms ease;

    -moz-transition: all 100ms ease;

    -ms-transition: all 1000ms ease;

    -o-transition: all 1000ms ease;

    transition: all 1000ms ease;

    z-index: 10;

}

.banner-carousel .active p {

    opacity: 1;

    transform: scaleY(1);

    -webkit-transition-delay: 900ms;

    -moz-transition-delay: 900ms;

    -ms-transition-delay: 900ms;

    -o-transition-delay: 900ms;

    transition-delay: 900ms;

}

.banner-carousel a {

    margin-top: 15px;

    opacity: 0;

    transform: scaleY(0);

    transform-origin: top;

    -webkit-transition: all 1000ms ease;

    -moz-transition: all 100ms ease;

    -ms-transition: all 1000ms ease;

    -o-transition: all 1000ms ease;

    transition: all 1000ms ease;

    z-index: 10;

    color: #fff;

    text-decoration: none;

    text-transform: capitalize;

    background-color: var(--alpha);

    padding: 10px 20px;

    display: inline-block;

}

.banner-carousel .active a {

    opacity: 1;

    transform: scaleY(1);

    -webkit-transition-delay: 1200ms;

    -moz-transition-delay: 1200ms;

    -ms-transition-delay: 1200ms;

    -o-transition-delay: 1200ms;

    transition-delay: 1200ms;

}

.banner-section .owl-dots {

    position: absolute;

    bottom: 15px;

    width: 100%;

    display: flex;

    display: -ms-flexbox;

    align-items: center;

    -ms-flex-align: center;

    justify-content: center;

    -ms-flex-pack: center;

    z-index: 15;

}

.banner-section .owl-dots .owl-dot {

    margin: 5px;

}

.banner-section .owl-dot span {

    width: 40px;

    height: 5px;

    display: block;

    background-color: #f7f7f7;

}

.banner-section .owl-dot:hover span {

    background-color: #fff;

}

.banner-section .owl-dot.active span {

    background-color: var(--alpha);

}

.banner-section .owl-carousel .owl-nav .owl-prev, .banner-section .owl-carousel .owl-nav .owl-next {

    width: 50px;

    height: 50px;

    border: 2px solid #fff;

    border-radius: 50%;

    position: absolute;

    top: 50%;

    z-index: 15;

    opacity: 0.5;

}

.banner-section .owl-carousel .owl-nav .owl-prev:hover, .banner-section .owl-carousel .owl-nav .owl-next:hover {

    opacity: 1;

}

.banner-section .owl-carousel .owl-nav .owl-prev {left: 15px;}

.banner-section .owl-carousel .owl-nav .owl-next {right: 15px;}

.banner-section .owl-prev:before, .banner-section .owl-next:before, .banner-section .owl-prev:after, .banner-section .owl-next:after {

    content:"";

    position: absolute;

}

.banner-section .owl-prev:before, .banner-section .owl-next:before {

    width: 20px;

    height:2px;

    background-color: #fff;

    left: 13px;

    top: 23px;

}

.banner-section .owl-prev:after, .banner-section .owl-next:after {

    border-top: 4px solid transparent;

    border-bottom: 4px solid transparent;

    top: 20px;

}

.banner-section .owl-prev:after {

    border-right: 8px solid #fff;

    left: 10px;

}

.banner-section .owl-next:after {

    border-left: 8px solid #fff;

    right: 10px;

}

.breadcrumb li {

    padding-right: 20px;

    position: relative;

}

.breadcrumb li:last-child {

    padding-right: 0;

}

.breadcrumb li:after {

    content: "";

    width: 6px;

    height: 6px;

    position: absolute;

    border-top: 1px solid #ffffff;

    border-right: 1px solid #ffffff;

    right: 9px;

    top: 7px;

    transform: rotate(45deg);

}

.breadcrumb li:last-child:after {

    display: none;

}

.breadcrumb span {

    color: #bababa;

}

.breadcrumb a:hover {

    color: var(--gamma);

}

.page-heading {

    font-size: 3.2rem;

    font-weight: 600;

    margin-bottom: 15px;

}

.section {

    padding: 60px 0;

}

.section-header {

    margin-bottom: 30px;

}

.section.about-section {

    padding-bottom: 90px;

}

.section-header.text-center {

    width: 650px;

    margin-left: auto;

    margin-right: auto;

    max-width: 85%;

}

.services-section .section-header {

    margin-bottom: 60px;

}

.sub-header-text {

    text-transform: uppercase;

    font-size: 1rem;

    font-weight: 700;

    font-family: 'Montserrat', sans-serif;

    letter-spacing: 0.5px;

    margin-bottom: 15px;

    position: relative;

    display: inline-block;

    padding-right: 50px;

}

.sub-header-text:after {

    content: "";

    width: 40px;

    position: absolute;

    top: 7px;

    right: 0;

    border-bottom: 2px solid var(--alpha);

}

.section-header .sub-header-text {

    margin-bottom: 10px;

}

.text-center > .sub-header-text::after {

    top: initial;

    bottom: 3px;

    left: calc(50% - 20px);

}

.text-center > .sub-header-text {

    padding-right: 0;

    padding-bottom: 10px;

}

.header-text {

    font-size: 2.6rem;

    font-weight: 700;

    margin: 0 0 20px;

    color: var(--alpha);

}

.header-text.large {

    font-size: 3.2rem;

}

.section-header .header-text {

    margin: 0;

}

.section-header.text-center p {

    margin: 15px 0 0;

}

.dots-svg {

    position: absolute;

    bottom: -45px;

    left: -80px;

    z-index: 15;

}

.banner-area {

    position: relative;

}

.section-contents.p-end {

    padding-right: 20%;

}

.about-section p, .feature p, .service-card p {

    line-height: 1.7;

    margin: 0;

}

.about-section p {

    font-size: 1.2rem;

}

.section.dark {

    background-color: #fffbf5;

}

.services-section .col-sm-6 {

    margin-bottom: 40px;

}

.service-card {

    position: relative;

    background-color: var(--beta);

    padding: 60px 30px;

    overflow: hidden;

    color: #fff;

}

.service-card:after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 40px;

    background-image: linear-gradient(7deg, #fffbf5 50%, var(--beta) calc(50% + 2px));

}

.service-card:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 40px;

    background-image: linear-gradient(7deg,  var(--beta) 50%, #fffbf5 calc(50% + 2px));

}

.service-card a {

    color: inherit;

    text-decoration: none;

}

.service-icon {

    display: block;

    width: 54px;

    height: 54px;

    margin-bottom: 20px;

    /* background-color: #fff;

    border-radius: 8px;

    padding: 10px; */

}

.service-title, .feature h4 {

    font-size: 1.3rem;

    margin-bottom: 10px;

}

.about-section .feature h4 {

    font-size: 1.2rem;

    margin-bottom: 5px;

}

.readmore-link {

    text-transform: capitalize;

    position: relative;

    padding-right: 30px;

    color: var(--alpha);

    text-decoration: none;

}

.service-card .readmore-link {

    color: inherit;

}

.about-section .readmore-link {

    font-weight: 600;

    text-transform: uppercase;

}

.readmore-link:before {

    content: "";

    width: 16px;

    height: 2px;

    position: absolute;

    background-color: var(--alpha);

    top: 7px;

    right: 8px;

    transition: all 300ms linear;

}

.service-card .readmore-link:before {

    background-color: #fff;

}

.readmore-link:after {

    content: "";

    width: 10px;

    height: 10px;

    position: absolute;

    top: 3px;

    right: 7px;

    border-top: 2px solid var(--alpha);

    border-right: 2px solid var(--alpha);

    transform: rotate(45deg);

    transition: all 300ms linear;

}

.service-card .readmore-link:after {

    border-top-color: #fff;

    border-right-color: #fff;

}

.readmore-link:hover:before, .readmore-link:hover:after {

    margin-right: -6px;

    transition: all 300ms linear;

}

.feature {

    margin-top: 20px;

}

.feature-left {

    width: 64px;

    height: 64px;

    min-width: 64px;

    margin-right: 15px;

    border-radius: 8px;

}

.about-section .feature-left {

    width: 54px;

    height: 54px;

    min-width: 54px;

    background-color: var(--alpha);

    padding: 8px;

}

.about-section .feature p {

    font-size: 1rem;

}

.tech-card {

    width: 26%;

    text-align: center;

    padding: 5% 0;

    background-color: #f7f7f7;

    margin: 3.5% auto;

    border-radius: 12px;

}

.tech-card span {

    width: 48px;

    height: 48px;

    display: block;

    margin: 0 auto 15px;

}

.tech-card h6 {

    font-weight: 600;

    margin: 0;

    font-size: 1.1rem;

    text-transform: uppercase;

    color: #464646;

}

.CTA-section {

    background-image: url(../images/CTA_bg.jpg);

    background-size: 100% auto;

    background-position: center;

    padding: 100px 0;

    position: relative;

}

.CTA-section.bottom {

    background-image: none;

    background-color: var(--alpha);

    padding: 30px 0;

}

.CTA-section:before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgb(0 0 0 / 65%);

}

.CTA-section.bottom:before {display: none;}

.CTA-section .container {position: relative;}

.CTA-section .header-text {

    color: #fff;

    font-size: 2.4rem;

}

.CTA-section p {

    color: #fff;

    margin: 0;

    animation: 0;

}

.CTA-section a {

    background-color: var(--alpha);

    color: #fff;

    display: inline-block;

    padding: 20px 30px;

    text-transform: uppercase;

    text-decoration: none;

    font-weight: 500;

    position: relative;

    overflow: hidden;

    width: 200px;

    max-width: 100%;

    letter-spacing: 1px;

}

.CTA-section a:hover {

    color: #fff;

    background-color: var(--alpha);

}

.CTA-section.bottom a {

    background-color: #fff;

    color: var(--alpha);

    text-align: center;

    padding: 15px 25px;

    width: initial;

    margin-top: 30px;

}

.blog-card {

    background-color: #fff;

    min-height: 100%;

    transition: all 300ms linear;

}

.blog-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 2px 28px 0 rgb(0 0 0 / 30%);

}

.blog-contents {

    padding: 20px;

    background-color: #f3f3f3;

}

.blog-title {

    font-size: 1.4rem;

    margin-bottom: 15px;

    line-height: 1.3;

}

.case-contents {

    height: 84px;

    overflow: hidden;

}

.case-title {

    font-size: 1.4rem;

    text-align: center;

    font-weight: 700;

    margin: 0;

    padding: 20px;

    width: 100%;

    transition: all 200ms linear;

}

.case-title span {

    display: block;

    margin-top: 8px;

    font-size: 0.8rem;

    font-weight: 500;

    color: #767676;

}

.case-card:hover .case-title {

    transform: translateY(-100%);

}

.case-more {

    width: 100%;

    height: 100%;

    transition: all 200ms linear;

}

.case-card:hover .case-more {

    transform: translateY(-100%);

}

.case-more .readmore-link {

    padding: 10px 45px 10px 10px;

    border: 2px solid var(--alpha);

    font-weight: 500;

}

.case-more .readmore-link:hover {

    color: #fff;

    background-color: var(--alpha);

}

.case-more .readmore-link:before {

    top: 19px;

    right: 18px;

}

.case-more .readmore-link:after {

    top: 15px;

    right: 17px;

}

.case-more .readmore-link:hover:before  {

    margin-right: 0;

    background-color: #fff;

}

.case-more .readmore-link:hover:after {

    margin-right: 0;

    border-top: 2px solid #fff;

    border-right: 2px solid #fff;

}

.section.clients-section {

    padding: 15px 0;

    background-color: var(--alpha);

}

.cslide {

    padding: 10px 30px;

    height: 100px;

    display: flex;

    display: -ms-flexbox;

    align-items: center;

    -ms-flex-align: center;

    justify-content: center;

    -ms-flex-pack: center;

}

.owl-carousel .cslide img {

    width: auto;

    max-height: 80px;

    max-width: 100%;

    margin: 0 auto;

    opacity: 0.7;

    transition: all 300ms linear;

    border: 0px solid #dcdcdc;

    border-radius: 12px;

    box-shadow: 0 0 20px rgb(0 0 0 / 35%);

}

.owl-carousel .cslide img:hover {

    opacity: 1;

}

.section.map-section {

    padding: 0;

    background-color: #fffbf5;

    height: 500px;

}

.map-section iframe {

    display: block;

    height: 100%;

}

form .form-group {

    margin-bottom: 20px;

}

form label {

    margin-bottom: 5px;

}

.form-control {

    padding: 10px 15px;

    border-radius: 0;

}

.form-control:focus {

    border-color: var(--alpha);

    box-shadow: none;

}

.contact-form .form-control {

    padding-top: 15px;

    padding-bottom: 15px;

}

.contact-form textarea.form-control {

    min-height: 100px;

    height: 250px;

}

label .required {

    color: red;

}

.location {

    margin-bottom: 20px;

}

.location h5 {

    font-size: 1rem;

    font-weight: 600;

    margin-bottom: 15px;

    text-transform: uppercase;

    color: #505050;

}

.location p {

    margin-bottom: 5px;

}

.location-name {

    font-size: 1.2rem;

    font-weight: 600;

    margin-bottom: 15px;

    padding: 10px 15px;

    background-color: var(--gamma);

    display: inline-flex;

    display: -ms-inline-flexbox;

    color: #fff;

} 

.video-cont:before {

    position: absolute;

    content: "";

    background-color: rgb(0 0 0 / 50%);

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}  

.play-btn {

    border: 1px solid #dcdcdc;

    background-color: transparent;

    padding: 0;

    width: 80px;

    height: 80px;

    border-radius: 50%;

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -40px 0 0 -40px;

    z-index: 2;

}

.play-btn:hover {border-color: #fff;}

.play-btn span {

    position: absolute;

    border-left: 14px solid #dcdcdc;

    border-top: 10px solid transparent;

    border-bottom: 10px solid transparent;

    margin: -9px 0 0 -4px;

}

.play-btn:hover span {border-left-color: #fff;}

.team-member {

    padding: 0 15px;

}

.member-image {

    overflow: hidden;

    border-radius: 16px;

    position: relative;

}

.member-image:before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgb(50 81 167 / 40%);

    transition: all 300ms linear;

}

.team-member:hover .member-image:before {

    background-color: rgb(50 81 167 / 10%);

    transition: all 300ms linear;

}

.team-member ul {

    list-style: none;

    padding: 0;

    margin: 0;

    position: absolute;

    bottom: 20px;

    left: 0;

    right: 0;

    z-index: 5;

}

.member-image a {

    width: 30px;

    height: 30px;

    display: block;

    margin: 3px;

    border-radius: 50%;

    background-color: #dcdcdc;

    text-align: center;

    line-height: 30px;

    color: var(--gamma);

    transition: all 150ms linear;

}

.member-image a:hover {

    background-color: var(--gamma);

    color: #fff;

    transition: all 150ms linear;

}

.member-title {

    font-size: 1.25rem;

    margin: 15px 0 5px 0;

    text-transform: capitalize;

    color: #000;

    text-align: center;

}

.member-details p {

    text-align: center;

    font-size: 0.8rem;

    margin: 0;

    color: #969696;

    font-weight: 500;

}

.team-carousel .owl-nav {

    text-align: right;

    margin-top: 20px;

    padding: 0 15px;

}

.team-carousel .owl-nav button {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    margin: 3px;

}

.team-carousel .owl-nav button.owl-next, .team-carousel .owl-nav button.owl-prev {

    color: #fff;

    background-color: var(--alpha);

}

.owl-carousel.testimonial-carousel {

    width: 650px;

    margin: 0 auto;

    max-width: 100%;

}

.testimonial-icon {

    font-size: 60px;

    color: #dcdcdc;

}

.testimonial-card p {

    margin: 10px 0 20px;

    font-size: 1.2rem;

    color: #646464;

}

.testimonial-title {

    margin: 0;

    font-size: 1.25rem;

    font-weight: 600;

    color: var(--alpha);

    text-transform: capitalize;

}

.testimonial-title .small {

    font-weight: 500;

    color: #969696;

    font-size: 0.85rem;

}

.testimonial-carousel .owl-dots {

    margin-top: 30px;

    display: flex;

    display: -ms-flexbox;

    align-items: center;

    -ms-flex-align: center;

    justify-content: center;

    -ms-flex-pack: center;

}

.testimonial-carousel .owl-dots .owl-dot {

    width: 14px;

    height: 14px;

    border: 1px solid #a0a0a0;

    border-radius: 50%;

    margin: 3px;

}

.testimonial-carousel .owl-dots .owl-dot:hover {

    border-color: var(--gamma);

}

.testimonial-carousel .owl-dots .owl-dot.active {

    border-color: var(--gamma);

    background-color: var(--gamma);

}

.sidebar {

    padding-right: 10px;

}

.sidebar-block {

    margin-bottom: 30px;

    padding: 20px;

    background-color: #fbefdd;

    border-radius: 10px;

}

.sidebar-block.contact {

    padding: 40px;

}

.sidebar-title {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--alpha);

    margin: 0 0 20px;

}

.sidebar-block ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.sidebar-block li {

    border-bottom: 1px solid #dcdcdc;

}

.sidebar-block li:first-child {

    border-top: 1px solid #dcdcdc;

}

.sidebar-block li a {

    font-weight: 500;

    display: block;

    padding: 10px 35px 10px 15px;

    position: relative;

}

.sidebar-block li a:before {

    content: "";

    width: 16px;

    height: 2px;

    position: absolute;

    background-color: #565656;

    top: 19px;

    right: 8px;

    transition: all 300ms linear;

}

.sidebar-block li a:after {

    content: "";

    width: 10px;

    height: 10px;

    position: absolute;

    top: 15px;

    right: 7px;

    border-top: 2px solid #565656;

    border-right: 2px solid #565656;

    transform: rotate(45deg);

    transition: all 300ms linear;

}

.sidebar-block li a:hover:before, .sidebar-block li a:hover:after {

    margin-right: -6px;

    transition: all 300ms linear;

}

.sidebar-block .btn.btn-primary {

    padding: 10px 15px;

    min-width: 120px;

}

.sidebar-block.contact .btn.btn-primary {

    display: block;

    margin: 30px auto 0;

    width: 160px;

    max-width: 100%;

}

.services-pg-contents img {

    margin-bottom: 20px;

}

.services-pg-contents img:first-child {

    margin-bottom: 0;

}

.heading {

    font-size: 2rem;

    margin-bottom: 20px;

    margin-top: 30px;

}

.heading.lg {

    font-size: 2.4rem;

}

.heading.sm {

    font-size: 1.5rem;

}

.heading.xs {

    font-size: 1.2rem;

}

.clients-carousel .owl-dots {

    display: none;

}

.partner-card {

    text-align: center;

    margin-bottom: 20px;

}

.partner-card img {

    border-radius: 12px;

    box-shadow: 0 0 20px rgb(0 0 0 / 20%);

}

.partner-title {

    margin: 15px 0 0;

    font-size: 14px;

    text-transform: uppercase;

    font-weight: 600;

    color: var(--alpha);

}

.portfolio-item {

    text-align: center;

    margin-bottom: 20px;

}

.portfolio-item lable {

    font-weight: 600;

    display: block;

    color: var(--alpha);

    margin-bottom: 10px;

    text-transform: capitalize;

    font-size: 16px;

}

.portfolio-item span, .portfolio-item a {

    color: #767676;

    text-transform: capitalize;

}

.portfolio-item a {

    color: var(--gamma);

    font-weight: 500;

}

.portfolio-item a:hover {

    text-decoration: underline;

}

.portfolio-pg-contents p {

    line-height: 1.8;

}

.portfolio-banner {

    border-radius: 30px;

    overflow: hidden;

    position: relative;

}

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

    .navbar-light .navbar-nav .nav-item {

        margin-right:50px;

        position: relative;

    }

    .navbar-light .navbar-nav .nav-item:last-child {

        margin-right: 0;

    }

    .navbar-expand-lg .navbar-nav .nav-link {

        padding: 24px 2px;

        font-weight: 500;

        font-size: 1.2rem;

        position: relative;

    }

    .navbar-expand-lg .navbar-nav .nav-link:hover, .navbar-expand-lg .navbar-nav .nav-link.active {

        color: var(--alpha);

    }

    .navbar-expand-lg .navbar-nav .nav-link:before {

        content: "";

        position: absolute;

        left: 0;

        bottom: 0;

        width: 0;

        height: 3px;

        background-color: var(--alpha);

        transition: all 300ms linear;

    }

    .navbar-expand-lg .nav-item:hover .nav-link:before, .navbar-expand-lg .nav-item .nav-link.active:before, .navbar-expand-lg .nav-item:hover .nav-link.active:hover:before {

        width: 100%;

        transition: all 300ms linear;

    }

    header .dropdown-menu {

        display: block;

        box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);

        border: 0px solid transparent;

        border-radius: 10px;

        padding: 15px;

        top: 150%;

        margin-top: 0;

        opacity: 0;

        visibility: hidden;

        transition: all 300ms linear;

    }

    header .nav-item:hover .dropdown-menu, header .dropdown-menu.show {

        top: 100%;

        margin-top: 0;

        opacity: 1;

        visibility: visible;

        transition: all 300ms linear;

    }

    header .dropdown-menu li {

        border-bottom: 1px solid rgb(0 0 0 / 5%);

    }

    header .dropdown-menu li:last-child {

        border-bottom: 0px solid rgb(0 0 0 / 5%);

    }

    header .dropdown-item {

        padding: 10px 0;

    }

    header .dropdown-item:hover, header .dropdown-item.active, header .dropdown-item:hover {

        background-color: transparent;

        color: var(--alpha);

    }

    .clients-carousel .owl-nav {display: none;}

}

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

    html {

        font-size: 13px;

    }

    .container {

        max-width: 90%;

    }

    .section-contents.p-end {

        padding-right: 0;

    }

    .CTA-section {

        padding: 60px 0;

    }

    .clients-carousel .owl-dots {

        display: none;

    }

    .clients-carousel .owl-nav {

        text-align: center;

        margin-top: 15px;

    }

    .clients-carousel .owl-nav button {

        margin: 0 8px;

    }

    .clients-carousel .owl-nav button span {

        display: block;

        padding: 5px;

        font-size: 18px;

        color: #f0f0f0;

    }

    header .navbar-collapse {

        position: fixed;

        left: 0;

        top: 0;

        height: 100% !important;

        background-color: #fff;

        width: 280px !important;

        z-index: 99;

        box-shadow: 0 0 15px rgb(0 0 0 / 25%);

        padding: 20px;

    }

    header .navbar-nav {

        margin: 0;

        max-height: 90%;

        overflow: auto;

    }

    header .navbar-collapse .nav-item {

        margin-bottom: 8px;

    }

    header .navbar-collapse .nav-link, header .navbar-light .navbar-collapse .nav-link {

        padding: 10px 15px;

        background-color: #f3f3f3;

        color: #363636;

        font-size: 16px;

        border-radius: 5px;

    }

    header .navbar-collapse .nav-link:hover, header .navbar-light .navbar-collapse .nav-link:hover {

        color: var(--alpha);

    }

    header .navbar-collapse .active .nav-link, header .navbar-light .navbar-collapse .active .nav-link {

        color: #fff;

        background-color: var(--alpha);

    }

    header .dropdown-menu {

        border: 0px solid transparent;

        padding: 0;

        margin: 10px 0;

    }

    header .dropdown-menu[data-bs-popper] {

        margin-top: 10px;

    }

    header .dropdown-menu .dropdown-item {

        font-size: 14px;

        padding: 8px 15px;

    }

    header .dropdown-menu .dropdown-item:hover, header .dropdown-menu .active .dropdown-item {

        color: var(--alpha);

    }

    .navbar-toggler {

        border: 0px solid transparent;

        padding: 0;

        width: 24px;

        height: 20px;

        position: relative;

        border-radius: 0;

    }

    .navbar-toggler:before, .navbar-toggler:after {

        content: "";

        width: 100%;

        height: 2px;

        background-color: #565656;

        left: 0;

        top: 8px;

        position: absolute;

    }

    header .navbar-toggler:focus, .navbar-toggler:focus {

        box-shadow: none;

    }

    .navbar-toggler:before {

        margin-top: -8px;

    }

    .navbar-toggler:after {

        margin-top: 8px;

    }

    .navbar-toggler[aria-expanded="true"]:before {

        margin-top: 0;

        transform: rotate(45deg);

    }

    .navbar-toggler[aria-expanded="true"]:after {

        margin-top: 0;

        transform: rotate(-45deg);

    }

    .navbar-toggler-icon {

        height: 2px;

        width: 100%;

        position: absolute;

        left: 0;

        top: 8px;

        background-color: #565656;

    }

    .navbar-light .navbar-toggler-icon {

        background-image: none;

    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {

        opacity: 0;

    }

}

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

    .banner-carousel .slide {

        padding-top: 150px;

        padding-bottom: 90px;

    }

    .banner-carousel .pattern-1 {

        width: 240px;

        height: 200px;

    }

    .banner-carousel .pattern-2 {

        width: 380px;

        height: 350px;

    }

    .banner-title {

        font-size: 3rem;

    }

    .banner-subtitle {

        font-size: 1.5rem;

    }

    .banner-carousel p {

        font-size: 1rem;

        margin-top: 20px;

        margin-bottom: 20px;

    }

    .header-text {

        font-size: 2.2rem;

    }

    .header-text.large {

        font-size: 2.8rem;

    }

    .CTA-section .header-text {

        font-size: 2rem;

    }

    .page-heading {

        font-size: 2.8rem;

    }

    .about-section p {

        font-size: 1rem;

    }

    .dots-svg {

        left: auto;

        right: 45px;

    }

    .contact-icon {

        width: 30px;

        min-width: 30px;

    }

}

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

    header {

        padding: 10px 0;

    }

    .navbar-brand img {

        width: 140px;

    }

    .section-header.text-center {

        max-width: 100%;

    }

    .banner-carousel .slide {

        padding-top: 80px;

        padding-bottom: 80px;

    }   

    .banner-section .container {

        width: calc(100% - 90px);

        text-align: center;

    }

    .banner-section .owl-carousel .owl-nav .owl-prev, .banner-section .owl-carousel .owl-nav .owl-next {

        width: 30px;

        height: 30px;

    }

    .banner-section .owl-prev:before, .banner-section .owl-next:before {

        width: 12px;

        left: 7px;

        top: 13px;

    }

    .banner-section .owl-prev:after, .banner-section .owl-next:after {

        top: 10px;

    }

    .banner-section .owl-prev:after {

        left: 4px;

    }

    .banner-section .owl-next:after {

        right: 4px;

    }

    .banner-section .owl-dot span {

        width: 30px;

        height: 3px;

    }

    .banner-title {

        max-width: 100%;

    }

    .banner-title {

        font-size: 2.2rem;

    }

    .banner-subtitle {

        font-size: 1.2rem;

    }

    .header-text {

        font-size: 2rem;

    }

    .header-text.large {

        font-size: 2.5rem;

    }

    .service-title, .feature h4 {

        font-size: 1.2rem;

    }

    .tech-card {

        width: 43%;

    }

    .CTA-section {

        padding: 40px 0;

    }

    .btn.btn-primary {

        padding: 10px 15px;

        border-radius: 0;

    }

    .CTA-section.bottom a {

        padding: 10px 20px;

    }

    .banner-section.dark {

        padding: 40px 0;

    }

    .page-heading {

        font-size: 2.5rem;

    }

}

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

    .tech-card {

        width: 75%;

        padding: 10% 0;

    }

    header .navbar-collapse {

        width: 250px !important;

    }

}
.calxy-header{ margin:0px 0px; padding:15px 0px;}

.topheader{ margin:0px 0px; padding:10px 0px; background:#216abd;}

.topheader ul{ margin: 0px; padding: 0px;  display: flex; flex-wrap: wrap; justify-content: flex-end; list-style-type:none;}
.topheader ul li{ margin: 0px; padding:4px 0px 4px 24px;}
.topheader ul li a{ margin:0px; padding:0px 5px 0px; color:#fff; font-weight:400; font-size: 15px; line-height:18px; text-decoration: none;  position: relative; }
.topheader ul li .fas{ color:#fff !important;}

.banner_inner{ margin:0px; padding:0px; position:relative;}
.banner_inner:before{ margin:0px; padding:0px; position:absolute; content:""; position:absolute; width:100%; height:100%; background:rgba(33,106,189,.7); left:0px; top:0px; z-index:1;}
.banner_inner img{ margin:0px; padding:0px; width:100%; display:block; object-fit:cover; max-height:400px;}
.banner_caption{ margin:0px; padding:0px 15px; width:100%; position:absolute; z-index:9; left:50%; top:50%; transform:translate(-50%,-50%);}
.caption_box{ margin:0px auto; padding:0px; text-align:center;}
.banner_caption h2{ color:#fff; text-transform:uppercase; font-size: 3.2rem; font-weight: 600; margin-bottom: 15px;}

.cases-section .case-card img{ height:300px; object-fit: cover; width: 100%; transition: 0.5s all ease-in-out;}
/*.cases-section .case-card .blog-banner{ width:100%; height:300px; overflow: hidden; margin: 0 auto;}
.cases-section .case-card:hover img {height:300px; overflow: hidden; margin: 0 auto; transform: scale(1.5);}*/