/*
font-family: 'Poppins', sans-serif;
*/
:root {
  --main-color: #F58634;
  --main-dark: #1E1E1E;
  --color-light: #0f1a20;
  --color-second:#484f52;
  --color-primary:#FCEED9;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.eot');
    src: url('../fonts/Poppins-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Poppins-Medium.woff2') format('woff2'),
        url('../fonts/Poppins-Medium.woff') format('woff'),
        url('../fonts/Poppins-Medium.ttf') format('truetype'),
        url('../fonts/Poppins-Medium.svg#Poppins-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraBold.eot');
    src: url('../fonts/Poppins-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Poppins-ExtraBold.woff2') format('woff2'),
        url('../fonts/Poppins-ExtraBold.woff') format('woff'),
        url('../fonts/Poppins-ExtraBold.ttf') format('truetype'),
        url('../fonts/Poppins-ExtraBold.svg#Poppins-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Light.eot');
    src: url('../fonts/Poppins-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Poppins-Light.woff2') format('woff2'),
        url('../fonts/Poppins-Light.woff') format('woff'),
        url('../fonts/Poppins-Light.ttf') format('truetype'),
        url('../fonts/Poppins-Light.svg#Poppins-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.eot');
    src: url('../fonts/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Poppins-Bold.woff2') format('woff2'),
        url('../fonts/Poppins-Bold.woff') format('woff'),
        url('../fonts/Poppins-Bold.ttf') format('truetype'),
        url('../fonts/Poppins-Bold.svg#Poppins-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.eot');
    src: url('../fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Poppins-Regular.woff2') format('woff2'),
        url('../fonts/Poppins-Regular.woff') format('woff'),
        url('../fonts/Poppins-Regular.ttf') format('truetype'),
        url('../fonts/Poppins-Regular.svg#Poppins-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.eot');
    src: url('../fonts/Poppins-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
        url('../fonts/Poppins-SemiBold.woff') format('woff'),
        url('../fonts/Poppins-SemiBold.ttf') format('truetype'),
        url('../fonts/Poppins-SemiBold.svg#Poppins-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


* {margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; -webkit-tap-highlight-color: transparent !important; }
body {margin: 0; padding: 0; background: #fff; font-size: 16px; position: relative; color:var(--main-dark); font-family: 'Poppins', sans-serif; }
a{color: var(--main-dark); }
::-moz-selection {background: #fff; color: var(--main-dark); }
img {border: none !important; outline: none; max-width: 100%; height: auto; }
input {transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; text-decoration: none; outline: none; -webkit-appearance: none; border: none; }
input:focus,
select:focus,
textarea:focus {outline: 0 !important; box-shadow: none !important; opacity: 1; }
.form-control:focus {border-bottom: 1px solid var(--main-dark); background: transparent !important; }
a:hover,
a:focus {outline: none; text-decoration: none; text-decoration: none; }
::placeholder {color: var(--main-dark) !important; opacity: 1; /* Firefox */
}
:-ms-input-placeholder {color: var(--main-dark); opacity: 1; }
::-ms-input-placeholder {color: var(--main-dark); opacity: 1; }
select::-ms-expand {display: none; }
select:focus {outline: none; border: none; }
button:focus {outline: none !important; outline: none !important; }
button {cursor: pointer; transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; text-decoration: none; outline: none; -webkit-appearance: none; border: none; }
textarea {outline: none !important; resize: none; }
ul li,
ol li,
ul,
ol {list-style: none; margin: 0; padding: 0; }
input[type="checkbox"] {-webkit-appearance: checkbox; }
input[type="radio"] {-webkit-appearance: radio; }
html,
body {overflow-x: hidden; width: 100%; max-width: 100%; }
.mobile {display: none; }
.desktop {display: block; }
p {font-size: 16px; line-height: 28px; font-weight: 400; color: var(--color-light); }
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 { margin-bottom: 15px; font-weight: 300; font-weight: normal;}
body h1 {font-size: 60px; line-height: 50px; }
body h2 {font-size: 70px; line-height: 80px; font-weight: bold; }
body h3 {font-size: 44px; line-height: 40px; font-weight: 600; }
body h4 {font-size: 24px; line-height: 30px; }
body h5 {font-size: 20px; line-height: 20px; font-weight: 500; }
body h6 {font-size: 20px; line-height: 20px; font-weight:600; }
body a {text-decoration: none; }
body h3 span {font-weight: normal;}
.text-right {text-align: right; }
.text-center {text-align: center; }
.text-left {text-align: left; }
body{transition: 0.5s all ease; }
.container {max-width: 1730px; width: 100%; padding-left: 20px; padding-right: 20px; margin-inline: auto; }

/*main-banner start*/
.maincolor {color: var(--main-color); }
.main-banner {padding-top: 170px; padding-bottom: 100px; background:linear-gradient(180deg, #FFF5E9 55%, rgba(242, 251, 255, 0) 100%) }
.banner-row {display: flex; flex-wrap: wrap; }
.banner-row > div {width: 50%; }
.banner-row .banner-txt {padding-right: 50px; padding-top: 145px; }
.banner-row .contant-block > p {width: 85%; }
.custom-heading h2 {letter-spacing: 2px; margin-bottom: 19px; }
.custom-heading h2 .ityped.maincolor {font-weight: normal; border-right: 3px solid var(--main-color); padding-right: 10px; font-weight:300; }
.custom-heading h2 .ityped-cursor {display: none; }
.contant-block .custom-heading h5 {display: block; margin-bottom: 10px;color:var(--main-color); }
.contant-block > p {line-height: 32px; letter-spacing: .6px; font-size: 18px; }
.contant-block .btnwrap {margin-top: 34px; }
.custom-btn {
    background: var(--main-color);
    display: inline-block;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 16px;
    font-family: 'DM Sans';
    padding: 16px 24px;
    height: 50px;
    line-height: 50;
    font-weight: 400;
    transition: .3s all;
    border: 0;
    min-width: 150px;
    text-align: center;
}
    .custom-btn .btn-wrap-txt {height: 20px; display: flex; flex-direction: column; overflow: hidden; }
.custom-btn .btn-wrap-txt > span {line-height: 120%; transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d; transition: .6s all; }

.custom-btn:hover .btn-wrap-txt > span {transform: translate3d(0px, -100%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); }


.custom-btn:hover {opacity: .9;}
.bannerimg-wrap {padding: 122px 0 0 12px; max-width: 766px; position: relative; min-width: 766px; min-height: 720px; }
.bannerimg-wrap .ban-animaton {position: absolute; z-index: 1; }
.bannerimg-wrap > img {z-index: 2; position:relative; }
.bannerimg-wrap .ban-animaton.animaton-1 {top: -97px; left: 19%; animation:banneranim1 10s forwards infinite; }
.bannerimg-wrap .ban-animaton.animaton-2 {top: 23px; left: 45%; animation:banneranim2 10s forwards infinite; }
.bannerimg-wrap .ban-animaton.animaton-3 {top: -26px; right: 5%; animation:banneranim3 10s forwards infinite; }
.bannerimg-wrap .ban-animaton.animaton-4 {top: 25%;left: 13%;animation:banneranim4 10s forwards infinite;}
.bannerimg-wrap .ban-animaton.animaton-5 {right: -22px;top: 34%;animation:banneranim5 10s forwards infinite;}
@keyframes banneranim1 {
  0% {transform: translateY(0); }
  25% {transform: translateY(-20px); }
  50% {transform: translateY(-10px); }
  75% {transform: translateY(-20px); }
  100% {transform: translateY(-0px); }
}
@keyframes banneranim2 {
  0% {transform: translateY(0); }
  25% {transform: translateY(20px); }
  50% {transform: translateY(-10px); }
  75% {transform: translateY(20px); }
  100% {transform: translateY(0px); }
}
@keyframes banneranim3 {
  0% {transform: translateY(0); }
  25% {transform: translateY(-20px); }
  50% {transform: translateY(-10px); }
  75% {transform: translateY(-20px); }
  100% {transform: translateY(-0px); }
}
@keyframes banneranim4 {
  0% {transform: translateY(0); }
  25% {transform: translateY(20px); }
  50% {transform: translateY(10px); }
  75% {transform: translateY(20px); }
  100% {transform: translateY(-0px); }
}
@keyframes banneranim5 {
  0% {transform: translateX(0); }
  25% {transform: translateX(30px); }
  50% {transform: translateX(15px); }
  75% {transform: translateX(30px); }
  100% {transform: translateX(-0px); }
}
.ityped-cursor {color: #e78e01; }

/*main-banner end*/

/*about us start*/
.custom-heading h3{margin: 18px 0 34px; }
.aboutus-sec {padding: 0px 0 120px; }
.about-row {display: grid; grid-template-columns: 40% 1fr; grid-gap: 26px; }
.about-row .about-right {align-self: center; }
/*about us end*/

/*services start*/
.services-sec {padding: 120px 0 120px; position: relative;}
.services-sec:before {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(../images/services-shape.svg) no-repeat; background-position: 25px center; z-index: 1; max-width: 2100px; margin: auto; background-size: contain; }
.services-sec .container {position: relative; z-index: 2; }
.services-row {display: grid; grid-template-columns: 32% 1fr; grid-gap: 0 40px; }
.services-row .services-left {align-self: center; }
.services-blocks {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; }
.services-box {background: #fff; box-shadow: 0px 4px 20px rgba(41, 5, 3, 0.05); border-radius: 20px; padding: 30px 30px 55px; transition:.3s all }
.services-box:hover {background: var(--main-dark); }
.services-box:hover p {color: #fceed9; }

.services-box .services-icon {margin-bottom: 20px; }
.services-box > p {margin-bottom: 22px; transition:.3s all; }
.readmore-link a {font-size: 18px; line-height: 20px; font-weight: 600; color: var(--main-color); transition: .3s all; position: absolute; bottom: 30px; left: 30px; }
.readmore-link a svg path,
.services-box h6 {transition: .3s all;}
.readmore-link a:hover,
.services-box:hover .readmore-link a {color: var(--main-color); }
.readmore-link a:hover svg path,
.services-box:hover .readmore-link a svg path{fill: var(--main-color);}
.readmore-link a:hover .more-icon,
.services-box:hover .readmore-link a .more-icon{transform: translateX(5px);}
@keyframes jumpright{0%{transform:translateX(0)}40%{transform:translateX(8px)}100%{transform:translateX(0)}}
.services-box:hover h6 {color: var(--color-primary); }
.readmore-link a > img {display: inline-block; }
.readmore-link a .more-icon img {display: inline-block; }
.readmore-link a .more-icon {display: inline-block; vertical-align: middle; margin-left: 9px; transition:.3s all;  animation:jumpright 4s infinite linear; }
.services-box .services-icon {transition: .3s all; margin-bottom: 22px; width: 80px; height: 80px; background: var(--color-primary); border-radius: 100%; text-align: center; display: grid; justify-content: center; align-items: center; position:relative; }
.services-box .services-icon:after {content: ''; position: absolute; right: -16px; width: 14px; height: 14px; background: var(--color-primary); top: -1px; border-radius: 100%; animation:jumpTwo 4s infinite linear; }
@keyframes jumpTwo{0%{transform:translate3d(0,0,0)}40%{transform:translate3d(0,15px,0)}100%{transform:translate3d(0,0,0)}}
/*services end*/

/*technology start*/
.techno-head {max-width: 940px; margin-inline: auto; margin-bottom: 60px; }
.techno-head p {text-align: center; }
.techno-btns {display: flex; justify-content: center; grid-gap: 0 10px; margin-bottom: 60px; }
.techno-btns > .button {color: #777777; background: transparent; font-size: 20px; line-height: 47px; padding: 0 22px; border-radius: 100px; transition: .3s all; }
.techno-btns > .button.is-checked,
.techno-btns > .button:hover {background: var(--color-primary); color: var(--main-color); }
.techno-grid .technocnt {display: flex; justify-content: center; flex-wrap: wrap; grid-gap: 30px; }
.techno-box .techno-icon {background: var(--color-primary); width: 150px; aspect-ratio: 1; text-align: center; display: grid; justify-content: center; align-items: center; margin-bottom: 20px; border-radius: 10px; }
.techno-box .techno-name {font-weight: 500; font-size: 20px; line-height: 30px; text-align: center; color: var(--main-dark); }
/*technology end*/

/*Why us start*/
.whyus-sec {padding-top: 0; position:relative; z-index:2; }
.whyus-row {display: grid; grid-template-columns: 1fr 32%; grid-gap: 0 40px; }
.whyus-row .whyus-right {text-align: center;align-self: flex-end;}
.whyus-block {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; }
.whyus-sec .techno-head {margin-bottom: 80px; }
.whyus-img {display: inline-block; position: relative; }
.whyus-img .whyusshape1 {position: absolute; top: 25px; left: -10px; animation:whyusshape1 5s forwards infinite; }
.whyus-img .whyusshape2 {position: absolute; top: 20%; right: -20px; animation:whyusshape2 6s forwards infinite; }
.whyus-img .whyusshape3 {position: absolute; top: 46%; left: 37%; animation:whyusshape2 5.5s forwards infinite;}
@keyframes whyusshape1{0%{transform:translate(0,0)}40%{transform:translate(10px,15px)}100%{transform:translate(0,0,0)}}
@keyframes whyusshape2{0%{transform:translate(0,0)}40%{transform:translate(0px,25px)}100%{transform:translate(0,0,0)}}
@keyframes whyusshape2{0%{transform:translate(0,0)}40%{transform:translate(-10px,15px)}100%{transform:translate(0,0,0)}}
/*Why us end*/

/*our team start*/
.outteam-sec {padding-top: 100px; position: relative; z-index: 1; padding-bottom:120px; }
.outteam-sec:before {content: ''; position: absolute; left: 0; right: 0; top: -300px; bottom: 0; background: url(../images/ourteam-shape.svg) no-repeat; background-position: 25px center; z-index: 1; margin: auto; background-size: 100%; background-position: top center; pointer-events: none; }
.outteam-sec .container {position: relative; z-index: 1; }

.ourteam-row {display: flex; flex-wrap: wrap; margin: 0 -15px; justify-content:center; }
.ourteam-row .ourteam-col {width: 25%; padding: 0 15px; }
.ourteam-box {background: #FFFFFF; box-shadow: 0px 4px 20px rgba(41, 5, 3, 0.05); border-radius: 20px; padding: 32px 0 58px; position: relative; text-align: center; }
.ourteam-box .team-position {position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid #DDDDDD; line-height: 57px; background: #fff; text-align: center; color: var(--color-light); letter-spacing: 0.03em; font-size: 18px; font-weight: 400; font-family: 'Poppins'; pointer-events:none }
.ourteam-box .social-connect {display: flex; justify-content: center; grid-gap: 20px; margin-bottom: 33px; }
.ourteam-box .social-connect img {display: block; }
.ourteam-box .social-connect a {opacity: .5; transition: .3s all; }
.ourteam-box .social-connect a:hover {opacity: 1; }
.ourteam-box .team-mail {margin-bottom: 23px; }
.ourteam-box .team-mail a {font-size: 16px; color: var(--color-light); letter-spacing: 0.03em; font-family: 'Poppins'; transition:.3s all; }
.ourteam-box .team-mail a:hover {color: var(--main-color);}
.ourteam-box h6 {margin-bottom: 15px; }
.ourteam-box .team-photo {border-radius: 100%; display: inline-block; overflow: hidden; position: relative; margin-bottom: 20px; aspect-ratio: 1; }
.ourteam-box .team-photo img {display: block; aspect-ratio: 1; box-sizing: border-box; }
.ourteam-box .team-photo .team-border {content: ''; position: absolute; left: 3px; right: 3px; top: 3px; bottom: 3px; border-radius: 100%; border: 2px solid #fff; }


/*testimonial sec*/

.testimonial-sec {overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fffbf5 55%, rgba(242, 251, 255, 0) 100%); padding-bottom:120px; margin-bottom:160px; }
.testimonial-container .client-say {text-align: center; padding: 30px 40px 40px; border-radius: 15px; }
.testimonial-container .owl-item:not(.center) .client-say {filter: blur(3px); }
.testimonial-container .owl-item.center .client-say {background: #fff; box-shadow: 0px 4px 20px rgba(41, 5, 3, 0.05); }
.testimonial-container .owl-item.active .client-say {transform: scale(.8); transition: .4s all; }
.testimonial-container .owl-item.active.center .client-say {transform: scale(1); }
.testimonial-container .owl-stage-outer {overflow: visible; }
.testimonial-container .owl-item {transition: .4s all; opacity: 0; }
.testimonial-container .owl-item.active {opacity: 1; }
.testimonial-sec .owl-nav {position: absolute; bottom: -90px; left: 0; right: 0; text-align: center; }
.testimonial-sec .owl-nav > button span {display: none; }
.testimonial-sec .owl-nav > button {height: 26px; background: url(../images/sliderarrow.svg) no-repeat !important; margin: 0 10px; transition: .3s all; }
.testimonial-sec .owl-nav > button.owl-prev {transform: rotate(180deg); }
.testimonial-sec .owl-nav > button.owl-prev.disabled,
.testimonial-sec .owl-nav > button.owl-next.disabled,
.testimonial-sec .owl-nav > button.owl-prev,
.testimonial-sec .owl-nav > button.owl-next {width: 40px; background-position: center right !important; opacity: .5; }
.testimonial-sec .owl-nav > button.owl-prev:hover,
.testimonial-sec .owl-nav > button.owl-next:hover {width: 60px; opacity: 1; }




.client-say .review-note p {font-size: 16px; line-height: 26px; }
.client-say .review-note {margin-bottom: 30px; }
.client-say .review-bottom .review-star img {width: 100px; margin: auto; }
.client-say .review-bottom .review-star {margin-bottom: 15px; }
.client-say .review-bottom .client-name {font-family: 'Poppins'; font-style: normal; font-weight: 600; font-size: 24px; line-height: 28px; letter-spacing: 0.03em; text-align: center; margin-bottom: 7px; }
.client-say .review-bottom .client-position {color: var(--color-light); font-size: 16px; }

/*footer css*/

footer {background: linear-gradient(167deg, #38414A, #101821); position: relative; }
footer:after {content: ''; background: url(../images/footer-shape.png) no-repeat; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 2; }
.contact-us {padding: 100px 0 0; }
.contact-us .contant-block {margin-bottom: 90px; }
.contact-us .custom-heading h3 {color: #fff; }
.contact-us .contant-block > p {max-width: 950px; margin: auto; text-align: center; color: #969696; }
.contact-div {display: grid; grid-template-columns: 60% 40%; padding-bottom: 100px; }
.contact-div .contact-img img {display: block; margin-left: auto; }
.contact-form {display: flex; flex-wrap: wrap; }
.contact-form > .contact-field:not(.messagefield) {width: 50%; }
.contact-form > .contact-field label {display: block; font-family: 'Poppins'; font-weight: 400; font-size: 18px; line-height: 20px; letter-spacing: 0.03em; color: #FFFFFF; margin-bottom: 15px; }
.contact-form > div {padding: 0 15px; margin-bottom: 50px; }
.contact-form > .contact-field.messagefield {width: 100%; }
.contact-form .contact-field input,.contact-form .contact-field textarea {width: 100%; border: 1px solid #617283; background: transparent; height: 70px; border-radius: 120px; font-size: 18px; padding: 20px 30px; color: #fff; font-weight: normal; font-family: 'Poppins'; }
.contact-form .contact-field textarea {min-height: 180px; border-radius: 40px; display:block; }
.contact-form .contact-field input::placeholder, 
.contact-form .contact-field textarea::placeholder {color: #617283 !important; }
.contact-form > div.submit-btn {margin-bottom: 0; }
.contact-us .container {max-width: 1440px; }
.ft-divader {height: 1px; background:rgba(97,114,131, .50) ; width: calc(100% - 40px); max-width: 1680px; margin: auto; }
.contact-form > div.submit-btn button {padding: 0 55px; }

/*main-footer*/

.main-footer {padding: 160px 0 0; }
.main-footer .ft-row {display: grid;grid-template-columns: 32% 15% 30% 23%;}
.first-col {padding-right: 30px; }
.first-col .ft-logo {margin-bottom: 30px; margin-top: -52px; }
.first-col .ft-logo img {max-height: 80px; }
.first-col > p {max-width: 430px; font-size: 20px; line-height: 34px; margin-bottom: 35px; color: #B9B9B9; }
ul.ft-social {display: flex; flex-wrap: wrap; grid-gap: 25px; }
.main-footer h4 {color: #fff; font-weight: 500; font-family: 'Poppins'; letter-spacing: .3px; margin-bottom: 38px; }
ul.quicklink li {margin-bottom: 20px;}
ul.quicklink a,
.ft-connect li a {color: #B9B9B9; font-size: 20px; line-height: 30px; display: inline-block; }
.ft-connect li address {color: #B9B9B9; font-size: 20px; line-height: 30px; font-style: normal; }
.ft-connect > li .ft-contacticon {position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; }
.ft-connect > li {padding-left: 40px; position: relative; margin-bottom: 35px; }
.ft-connect > li:last-child,
ul.quicklink li:last-child {margin-bottom: 0; }

.newsletter-field {max-width: 400px; width: 100%; position: relative; }
.newsletter-field input {width: 100%; border: 1px solid #617283; background: transparent; height: 70px; border-radius: 100px; padding: 8px 130px 0 25px; color: #617283; }
.newsletter-field input::placeholder {color: #617283 !important; font-size: 18px; }
.newsletter-field .submit-btn {position: absolute; right: 0; height: 70px; width: 120px; border-radius: 100px; color: #101821; background: #617283; font-size: 18px; font-weight: 500; padding: 4px 10px 0; }

.top-ft {padding-bottom: 100px; }
.bottom-ft {padding-bottom: 40px; text-align: center; position: relative; }
.bottom-ft p {color: #B9B9B9; font-size: 18px; line-height: 34px; letter-spacing: .2px; font-weight: 300; }
.bottom-ft:before {content: ''; position: absolute; bottom: 80px; height: 95px; background: url(../images/ft-dot.svg) no-repeat; left: -100%; background-repeat-x: repeat; right: 87%; }

/*=============================Portfolio-Section=====================*/

.portfolio-sec {padding: 180px 0; overflow:hidden; }
.main-portfolio {display: grid; grid-template-columns: 28% 72%; position: relative; align-items:flex-start; }
.portfolio-sec .owl-stage-outer {overflow: visible; }
.portfolio-sec .portfolio-left {position: relative; z-index: 2; padding-right:35px; margin-top:80px; }
.portfolio-sec .portfolio-right {position: relative; z-index: 1; }
.portfolio-sec .portfolio-right .owl-carousel:before {content: ''; position: absolute; left: -50vw; right: 100%; top: 0; bottom: 0; background: #fff; z-index: 2; }
.portfolio-list {padding: 50px; }
.list-one {background-color: #e5e1ff; transition: 0.3s; }
.portfolio-list.list-one:hover {background-color: #453d80; }
.list-two {background-color: #ffe3d9; transition: 0.3s; }
.portfolio-list.list-two:hover {background-color: #fb490b; }
.list-three {background-color: #c5ffb1; transition: 0.3s; }
.portfolio-list.list-three:hover {background-color: #35cf00; }
.list-four {background-color: #e4f2ff; transition: 0.3s; }
.portfolio-list.list-four:hover {background-color: #141e7f; }
.list-five {background-color: #f2f2f2; transition: 0.3s; }
.portfolio-list.list-five:hover {background-color: #1c2222; }
.list-six {background-color: #fef4ef; transition: 0.3s; }
.portfolio-list.list-six:hover {background-color: #f36b1a; }
.list-seven {background-color: #ece9ff; transition: 0.3s; }
.portfolio-list.list-seven:hover {background-color: #4b39b4; }
.project-details {margin-bottom: 25px; }
.project-count {-webkit-text-stroke : 1px #000; color: transparent; font-size: 60px; display: block; margin-top: 15px; font-weight: bold; margin-bottom: 25px; transition: 0.3s; }
.project-name {color: var(--main-dark); font-size: 50px; font-weight: bold; line-height: 60px; transition: 0.3s; }
.portfolio-img img {width: auto; border: 5px solid #fff!important; }
.portfolio-slider .owl-item {height: 100vh; overflow: hidden; }
.portfolio-slider .portfolio-img img {height: 100%; object-fit: cover; transition: all 0.4s; object-position: top; }
.portfolio-list:hover .project-name {color: #fff; }
.portfolio-list:hover .project-count {-webkit-text-stroke : 1px #fff; }
.portfolio-slider .owl-nav {position: absolute;left: -38.8%;text-align: center;z-index: 3;top: 0px;}
.portfolio-slider .owl-nav > button span {display: none; }
.portfolio-slider .owl-nav > button {height: 50px;width: 50px;background-image: url(../images/pslider-icon.svg) !important;margin: 0 20px 0 0;transition: .3s all;background-size: 18px !important;background-position: center !important;background-repeat: no-repeat !important;border-radius: 10px;border: 2px solid var(--main-color) !important;}
.portfolio-slider .owl-nav > button.owl-prev {transform: rotate(180deg); }
.portfolio-slider .owl-nav > button:hover {width: 70px; }
.techno-grid .technocnt {display: none; opacity: 0; transform: translateY(15px); animation: tab_fade 0.4s ease 1 forwards; }
.techno-grid .technocnt.active_tab {display: flex; }
@keyframes tab_fade {
  100% {opacity: 1; transform: none; }
}

form .invalid {border: 1px solid red !important; }
form .error-message {color: red; font-weight: normal; font-size: 15px; display: block; margin:6px 0 0; }
.sucess-message:empty,
form .error-message:empty {display: none; }
.sucess-message {background: #f1fff1; text-align: center; margin: 20px 15px 0; border: 1px solid green; color: green; padding: 12px 0; font-size: 18px; border-radius: 12px; }

/*Contact us page*/

body:not(.home) header {position: relative; background: #fff; padding: 12px 0; }
body:not(.home) footer {background: linear-gradient(167deg, #1c232a, #101821); position: relative; }
body:not(.home) footer:after,
body:not(.home) .ft-divader {display: none;}

.map-section iframe {width: 100%; display: block; height: 500px; }
.contactform-page {margin: 80px 0 120px; }
.contactform-page .custom-heading {margin-bottom: 80px;}
.contactform-page .custom-heading p strong {margin-top: 17px; display: block; }
.contactform-page .contactform-section {background-color: #ffffff; box-shadow: 9px 10px 29px 0px rgba(125, 138.00000000000003, 152, 0.15); padding: 50px 30px 45px; max-width: 970px; margin: auto; }
.contactform-section .contact-form > .contact-field label {color: #1e1e1e; font-size: 15px; margin-bottom: 10px; padding-left:0 !important; }
.contactform-section .contact-form .contact-field input, 
.contactform-section .contact-form .contact-field textarea {border-radius: 10px; border: 1px solid #dddddd; padding: 10px 20px; height: 55px; font-size: 14px; color:var(--main-dark); }
.contactform-section .contact-form .contact-field textarea {padding-top: 14px; }
.contactform-section .contact-form > div {margin-bottom: 24px; }
.contactform-section .contact-form > div.submit-btn button {padding: 0; border-radius: 7px; }
.contactform-section .contact-form > div.submit-btn {width: 100%; text-align: center; margin-bottom:0; }

.gettouch-section {margin: 80px 0 80px; }
.gettouch-section .contant-block {margin-bottom: 50px; }
.gettouch-list {display: flex; flex-wrap: wrap; margin-inline:-15px; }
.gettouch-list > div {width: 33.3%; padding: 0 15px; }
.gettouch-item {text-align: center; }
.gettouch-item h4 {font-weight: 600; font-size: 22px; line-height: 1.5; margin-bottom: 15px; letter-spacing: .8px; }
.gettouch-item p {font-size: 16px; font-weight: 400;line-height: 200%; letter-spacing: 1.2px; margin-bottom: 14px; }
.gettouch-item a {font-size: 15px; letter-spacing: 1px; color:var(--main-color); }
.gettouch-item .contact-icon {margin-bottom: 13px; }