/*----------



Theme Name: kgTech - Responsive HTML5 Template

Theme Version: 1.0



----------*/





/*==========Common CSS Start ==========*/



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    margin: 0;

    font-family: var(--body-font);

    text-rendering: optimizeLegibility !important;

}



body,

html {

    overflow-x: hidden !important;

    scroll-behavior: smooth;

}



:root {

    --primary-color: #43BAFF;

    --dark-color: #464547;

    --white-color: #ffffff;

    --grey-color: #141D38;

    --light-color: #dddddd;

    --box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);

    --input-color: rgb(70 69 71 / 0.7);

    --triangle-shep: polygon(50% 0%, 0% 100%, 100% 100%);

    --body-font: 'Nunito';

    --title-font: 'Montserrat';

}



a {

    background-color: transparent;

    text-decoration: none !important;

    outline: none !important;

}



img {

    max-width: 100%;

    height: auto;

}



ul {

    list-style: none;

    margin: 0;

    padding: 0;

}



.form-element {

    position: relative;

}



.form-element i {

    position: absolute;

    top: 15px;

    right: 20px;

    pointer-events: none;

    color: var(--primary-color);

}



.wpcf7-form-control-wrap {

    display: block;

    margin-bottom: 30px;

    position: relative;

}



.form-input,

.input-text,

.select2-container--default .select2-selection--single .select2-selection__rendered,

select {

    width: 100%;

    height: 54px;

    border: none;

    outline: none !important;

    padding: 0 30px;

    color: #373737;

    background: var(--white-color);

    -webkit-appearance: none;

    border-radius: 0;

}



.form-input.wpcf7-textarea {

    height: 192px;

    resize: none;

    padding: 18px 30px;

    display: block;

}



.submit-btn {

    text-align: right;

}



p {

    font-size: 16px;

    line-height: 32px;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    color: var(--primary-color);

}



.h1-title {

    font-size: 90px;

    line-height: 90px;

    text-transform: uppercase;

    margin-bottom: 33px;

    font-family: var(--title-font);

    color: var(--white-color);

    font-weight: bold;

}



.h2-title {

    font-size: 44px;

    font-weight: bold;

    color: var(--grey-color);

    line-height: 40px;

    margin-bottom: 40px;

    text-transform: uppercase;

    font-family: var(--title-font);

}



.h3-title {

    display: inline-block;

    font-size: 28px;

    line-height: 20px;

    text-transform: uppercase;

    color: var(--white-color);

    font-weight: normal;

    position: relative;

    margin-bottom: 33px;

}



.h4-title {

    font-size: 26px;

    line-height: 36px;

    font-weight: bold;

    margin-bottom: 10px;

    color: var(--grey-color);

    text-transform: uppercase;

}



.wow {

    visibility: hidden;

}



a:hover {

    color: initial;

}



.for-des {

    display: block !important;

}



.for-mob {

    display: none !important;

}



.sec-wp {

    position: relative;

    z-index: 4;

}



.modal-body.overflow-text {

    height: 600px;

    padding: 30px;

}



button.close {

    position: absolute;

    top: 10px;

    right: 10px;

    width: 30px;

    height: 30px;

    background: var(--primary-color);

    opacity: 1 !important;

    text-shadow: none;

    border-radius: 50%;

    z-index: 2;

    color: var(--white-color);

    transition: 0.3s;

    outline: none;

    font-weight: normal;

    display: flex;

    justify-content: center;

    align-items: center;

    padding-top: 3px;

}



button.close:hover {

    background: var(--dark-color);

    color: var(--white-color);

}



.sec-btn,

.form-submit .submit {

    width: 220px;

    height: 54px;

    background: var(--grey-color);

    border: 2px solid var(--grey-color);

    display: inline-flex;

    justify-content: center;

    align-items: center;

    border-radius: 0;

    -webkit-appearance: none;

    font-size: 16px;

    font-weight: bold;

    color: var(--white-color);

    text-transform: uppercase;

    font-weight: bold;

    text-align: center;

    cursor: pointer;

    outline: none !important;

    transition: .3s;

    padding: 0;

    overflow: hidden;

    position: relative;

    z-index: 2;

}



.sec-btn:hover,

.form-submit .submit:hover {

    background: var(--primary-color);

    color: var(--white-color);

    border-color: var(--primary-color);

}



.play-btn {

    width: 100px;

    height: 100px;

    color: var(--white-color);

    background: var(--primary-color);

    border: 2px solid var(--primary-color);

    border-radius: 50%;

    font-size: 30px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-left: 3px;

    box-shadow: var(--box-shadow);

    transition: 0.8s cubic-bezier(0.22, 0.78, 0.45, 1.02);

}



.play-btn::before {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0.8);

    animation: play-btn 1.5s linear infinite;

    border-radius: 50%;

    border: 2px solid var(--primary-color);

    transition: .3s;

}



.play-btn:hover {

    color: var(--white-color);

}



@keyframes play-btn {

    from {

        transform: translate(-50%, -50%) scale(0.8);

    }

    to {

        transform: translate(-50%, -50%) scale(1);

    }

}





/*==========Common CSS End ==========*/





/*==========Fonts Start==========*/



@font-face {

    font-family: 'Nunito';

    src: url('../font/Nunito-Bold.eot');

    src: url('../font/Nunito-Bold.eot?#iefix') format('embedded-opentype'), url('../font/Nunito-Bold.woff2') format('woff2'), url('../font/Nunito-Bold.woff') format('woff'), url('../font/Nunito-Bold.ttf') format('truetype');

    font-weight: bold;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Nunito';

    src: url('../font/Nunito-ExtraBold.eot');

    src: url('../font/Nunito-ExtraBold.eot?#iefix') format('embedded-opentype'), url('../font/Nunito-ExtraBold.woff2') format('woff2'), url('font/Nunito-ExtraBold.woff') format('woff'), url('../font/Nunito-ExtraBold.ttf') format('truetype');

    font-weight: bold;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Montserrat';

    src: url('../font/Montserrat-Bold.eot');

    src: url('../font/Montserrat-Bold.eot?#iefix') format('embedded-opentype'), url('../font/Montserrat-Bold.woff2') format('woff2'), url('../font/Montserrat-Bold.woff') format('woff'), url('../font/Montserrat-Bold.ttf') format('truetype');

    font-weight: bold;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Nunito';

    src: url('../font/Nunito-Regular.eot');

    src: url('../font/Nunito-Regular.eot?#iefix') format('embedded-opentype'), url('../font/Nunito-Regular.woff2') format('woff2'), url('../font/Nunito-Regular.woff') format('woff'), url('../font/Nunito-Regular.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Nunito';

    src: url('../font/Nunito-SemiBold.eot');

    src: url('../font/Nunito-SemiBold.eot?#iefix') format('embedded-opentype'), url('../font/Nunito-SemiBold.woff2') format('woff2'), url('../font/Nunito-SemiBold.woff') format('woff'), url('../font/Nunito-SemiBold.ttf') format('truetype');

    font-weight: 600;

    font-style: normal;

    font-display: swap;

}





/*==========Fonts End==========*/





/*==========Slider Css==========*/



.slick-dots {

    bottom: -65px;

}



.slick-dots li {

    width: 15px;

    height: 15px;

    margin: 0 5px;

}



.slick-dots li button {

    width: 100%;

    height: 100%;

    border: 2px solid var(--grey-color);

    opacity: 0.5;

    padding: 0;

    transition: 0.5s;

}



.slick-dots li button:before {

    display: none;

}



.slick-dots li.slick-active button,

.slick-dots li button:hover {

    border-color: var(--grey-color);

    background: var(--grey-color);

    opacity: 1;

}



.slick-initialized .slick-slide {

    outline: none !important;

}



#sb_instagram #sbi_images .sbi_item.sbi_transition {

    opacity: 1 !important;

    max-height: unset !important;

}



.slick-arrow {

    position: absolute;

    bottom: -60px;

    left: 15px;

    width: 30px;

    height: 30px;

    padding: 0;

    border: none !important;

    background: var(--primary-color);

    outline: none !important;

    color: var(--white-color);

    font-weight: bold;

    font-size: 20px;

    transition: 0.3s;

    z-index: 2;

    display: flex;

    justify-content: center;

    align-items: center;

}



.slide-arrow.next-arrow.slick-arrow {

    margin-left: 50px;

}



.slick-arrow:hover {

    background: var(--dark-color);

}



.slick-dots li:only-child {

    display: none;

}



.slick-dots li:first-child {

    margin-left: 0;

}



.slick-dots li:last-child {

    margin-right: 0;

}





/*==========Slider Css End==========*/





/*==========Overflow CSS==========*/



.overflow-text {

    height: 300px;

}



.overflow-text::-webkit-scrollbar-thumb {

    opacity: 0 !important;

}



.overflow-text::-webkit-scrollbar-track {

    opacity: 0 !important;

}





/*==========Overflow CSS End==========*/





/*==========Header CSS==========*/



.site-header.sticky-head .topbar {

    height: 0;

}



.site-header.sticky-head .topbar-wp {

    opacity: 0;

}



.topbar {

    background: var(--primary-color);

    transition: .3s;

}



.topbar-wp {

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 100%;

    transition: .3s;

}



.social-icon-wp li {

    float: left;

    border-right: 1px solid var(--light-color);

    padding-left: 15px;

    padding-right: 15px;

    cursor: pointer;

    transition: .3s;

}



.social-icon-wp li:first-child {

    padding-left: 15px;

}



.social-icon-wp li a {

    transition: .3s;

    display: flex;

    align-items: center;

    height: 100%;

    padding: 12px 0;

}



.social-icon-wp li:hover {

    background: var(--grey-color);

}



.social-icon-wp li a i {

    color: var(--white-color);

    transition: .3s;

}



.info-wp li {

    float: left;

    border-right: 1px solid var(--white-color);

    padding-left: 15px;

    padding-right: 15px;

}



.info-wp li:first-child {

    border-left: 1px solid var(--white-color);

    padding-left: 12px;

}



.info-wp li:last-child {

    border-right: 0;

}



.info-wp li a {

    color: var(--white-color);

    font-size: 14px;

    font-weight: 600;

    line-height: 40px;

    transition: .3s;

}



.info-wp li a:hover {

    color: var(--grey-color);

}



.info-wp li a i {

    padding-right: 10px;

    transition: .3s;

}



.info-wp li a i.fa-phone {

    transform: rotate(90deg) translate(5px, 0);

}



.site-header {

    position: fixed;

    width: 100%;

    top: 0;

    left: 0;

    background: var(--white-color);

    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.16);

    transition: .3s;

    z-index: 99;

}



.site-header.sticky-head {

    height: 85px;

    border-top: 5px solid var(--grey-color);

}



.site-header.sticky-head .main-navigation .menu li,

.site-header.sticky-head .site-branding {

    height: 80%;

}



.site-header.sticky-head .main-navigation .menu li.menu-item-has-children ul.sub-menu {

    margin: -20px 0 0 0;

}



.site-branding {

    width: 166px;

    height: calc(100% + 30px);

    padding: 25px 0;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .3s;

}



.site-branding::before {

    content: "";

    position: absolute;

    width: 700%;

    height: 100%;

    background: var(--grey-color);

    top: 0;

    right: -50px;

    transform: skew(-30deg);

    z-index: -1;

    transition: .3s;

}



.header-main {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    height: 100%;

    transition: .3s;

}



.main-navigation {

    display: flex;

    transition: .3s;

}



.main-navigation .menu li {

    display: inline-block;

    float: left;

    position: relative;

    margin: 0 20px;

    height: 100%;

    transition: .3s;

}



.main-navigation .menu li:first-child {

    margin-left: 0;

}



.main-navigation .menu li:last-child {

    margin-right: 0;

}



.menu-menu-1-container,

.menu-menu-1-container ul {

    height: 100%;

    transition: .3s;

}



.main-navigation .menu ul ul {

    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);

    float: left;

    position: absolute;

    top: 100%;

    left: -999em;

    z-index: 99999;

}



.main-navigation .menu ul ul ul {

    left: -999em;

    top: 0;

}



.main-navigation .menu ul ul li:hover>ul,

.main-navigation .menu ul ul li.focus>ul {

    left: 100%;

}



.main-navigation .menu ul ul a {

    width: 200px;

}



.main-navigation .menu ul li:hover>ul,

.main-navigation .menu ul li.focus>ul {

    left: auto;

}



.main-navigation .menu li a {

    display: flex;

    transition: .3s;

    position: relative;

    justify-content: center;

    align-items: center;

    color: var(--dark-color);

    text-transform: uppercase;

    height: 100%;

}



.main-navigation .menu li a::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 3px;

    background: var(--primary-color);

    bottom: -1px;

    left: 0;

    opacity: 0;

    transition: .3s;

}



.main-navigation .menu li.active a {

    color: var(--primary-color);

    -webkit-text-stroke: 1px;

}



.main-navigation .menu li.active a::before {

    opacity: 1;

}



.main-navigation .menu li:hover>a {

    color: var(--primary-color);

    -webkit-text-stroke: 1px;

}



.main-navigation .menu li:hover>a::before {

    opacity: 1;

}



.main-navigation .menu li.menu-item-has-children {

    position: relative;

    margin-right: 12px;

}



.main-navigation .menu li.menu-item-has-children ul.sub-menu {

    position: absolute;

    display: none;

    width: 250px;

    height: auto;

    background: var(--white-color);

    z-index: 9;

    top: 100px;

    left: 0;

    margin: 0;

    padding: 9px 0;

    box-shadow: var(--box-shadow);

    transition: .3s;

}



.main-navigation .menu li.menu-item-has-children ul.sub-menu li:hover a {

    color: var(--primary-color);

}



.main-navigation .menu li.menu-item-has-children ul.sub-menu li a::before {

    opacity: 0;

}



.main-navigation .menu li.menu-item-has-children>a {

    padding: 37px 0;

}



.main-navigation .menu li.menu-item-has-children:hover ul.sub-menu {

    opacity: 1;

    display: block;

}



.main-navigation .menu li.menu-item-has-children a {

    padding-right: 20px;

}



.main-navigation .menu li.menu-item-has-children ul.sub-menu li {

    width: 100%;

    border-bottom: 1px solid var(--grey-color);

    margin: 0 0 10px 0;

    padding: 0 15px;

    position: relative;

    display: block;

    text-align: left;

    transition: .3s;

}



.main-navigation .menu li.menu-item-has-children ul.sub-menu li:last-child {

    border-bottom: 0;

    margin-bottom: 0;

}



.main-navigation .menu li.menu-item-has-children ul.sub-menu li:last-child a {

    padding: 0;

}



.main-navigation .menu li.menu-item-has-children ul.sub-menu li a {

    justify-content: flex-start;

    color: var(--dark-color);

    padding: 0 0 6px 0;

    transition: .3s;

}



.main-navigation .menu li.menu-item-has-children ul.sub-menu li a:hover {

    color: var(--primary-color);

    padding-left: 15px;

}



.main-navigation .menu li.menu-item-has-children::before {

    content: "\f078";

    position: absolute;

    color: var(--grey-color);

    top: 50%;

    right: 0;

    margin-top: -13px;

    transform: rotate(0deg);

    font-family: "Font Awesome 5 Free";

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    transition: .3s;

    z-index: 1;

}



.main-navigation .menu li.menu-item-has-children:hover::before {

    color: var(--primary-color);

    transform: rotate(180deg);

    -webkit-text-stroke: 1px;

}



.main-navigation .menu li.menu-item-has-children>a::before,

.main-navigation .menu li.menu-item-has-children:hover>a::before {

    display: none;

}





/*==========Header CSS End==========*/





/*==========Banner CSS==========*/



.main-banner .banner-video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.main-banner .banner-video video {

    width: auto;

}



.main-banner {

    padding: 408px 0 265px 0;

    position: relative;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.main-banner:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: -webkit-linear-gradient(to right, rgba(38, 91, 138, 1) 0%, rgba(19, 46, 69, 0.35) 100%);

    background: -o-linear-gradient(to right, rgba(38, 91, 138, 1) 0%, rgba(19, 46, 69, 0.35) 100%);

    background: -moz-linear-gradient(to right, rgba(38, 91, 138, 1) 0%, rgba(19, 46, 69, 0.35) 100%);

    background: linear-gradient(to right, rgba(38, 91, 138, 1) 0%, rgba(19, 46, 69, 0.35) 100%);

    opacity: 0.6;

}



.banner-btn .sec-btn+.sec-btn {

    margin-left: 27px;

    background: transparent;

    border-color: var(--white-color);

}



.banner-btn .sec-btn+.sec-btn:hover {

    background: var(--grey-color);

    border-color: var(--grey-color);

}



.banner-tet-wp .h3-title::before {

    content: "";

    width: 150px;

    height: 1px;

    right: -170px;

    top: 50%;

    background: var(--white-color);

    position: absolute;

    transform: translate(0, -50%);

}



.main-banner .banner-shep {

    position: relative;

}



.main-banner .banner-shep::before {

    content: "";

    position: absolute;

    top: -361px;

    left: -18px;

    width: 500px;

    height: 400px;

    -webkit-clip-path: var(--triangle-shep);

    clip-path: var(--triangle-shep);

    background: -webkit-linear-gradient(to bottom, rgba(42, 88, 128, 1) 0%, rgba(84, 175, 255, 1) 100%);

    background: -o-linear-gradient(to bottom, rgba(42, 88, 128, 1) 0%, rgba(84, 175, 255, 1) 100%);

    background: -moz-linear-gradient(to bottom, rgba(42, 88, 128, 1) 0%, rgba(84, 175, 255, 1) 100%);

    background: linear-gradient(to bottom, rgba(42, 88, 128, 1) 0%, rgba(84, 175, 255, 1) 100%);

    mix-blend-mode: hard-light;

    transform: rotate(58deg);

}



.main-banner .banner-shep::after {

    content: "";

    position: absolute;

    top: 230px;

    right: -110px;

    width: 500px;

    height: 400px;

    -webkit-clip-path: var(--triangle-shep);

    clip-path: var(--triangle-shep);

    background: -webkit-linear-gradient(to bottom, rgba(84, 175, 255, 1) 0%, rgba(42, 88, 128, 1) 100%);

    background: -o-linear-gradient(to bottom, rgba(84, 175, 255, 1) 0%, rgba(42, 88, 128, 1) 100%);

    background: -moz-linear-gradient(to bottom, rgba(84, 175, 255, 1) 0%, rgba(42, 88, 128, 1) 100%);

    background: linear-gradient(to bottom, rgba(84, 175, 255, 1) 0%, rgba(42, 88, 128, 1) 100%);

    -webkit-backdrop-filter: brightness(1) blur(12px) opacity(1);

    -moz-backdrop-filter: brightness(1) blur(12px) opacity(1);

    backdrop-filter: brightness(1) blur(12px) opacity(1);

    mix-blend-mode: overlay;

}





/*==========Banner CSS End==========*/





/*==========About Us CSS==========*/



.about-us-sec {

    position: relative;

    background: #F0F4F9;

    padding: 140px 0 272px 0;

}



.aboutus-img-wp {

    width: 100%;

    height: 100%;

    position: relative;

}



.aboutus-img-wp::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 550px;

    border: 2px solid var(--grey-color);

    top: 50px;

    right: 50px;

}



.about-us-img {

    background-position: center;

    background-size: cover;

    position: relative;

    height: 550px;

}



.about-us-text-wp {

    padding-top: 55px;

    padding-left: 100px;

}



.about-us-text-wp .h2-title {

    margin-bottom: 25px;

}



.about-us-text-wp .h3-title {

    font-weight: 600;

    color: #373737;

    line-height: 36px;

    text-transform: capitalize;

    margin-bottom: 11px;

}



.about-us-text {

    padding-right: 10px;

}



.about-us-text p {

    color: #646464;

    margin-bottom: 18px;

}



.about-us-list-wp {

    display: flex;

    justify-content: space-between;

    margin-bottom: 21px;

}



.about-design-list h4 {

    font-size: 22px;

    font-weight: 600;

    color: #234969;

    margin-bottom: 7px;

}



.about-design-list li {

    position: relative;

    padding-left: 15px;

    line-height: 32px;

}



.about-design-list li::before {

    content: "";

    position: absolute;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: var(--primary-color);

    top: 50%;

    left: 0;

    transform: translate(0, -50%);

}



.about-us-btn .sec-btn {

    width: 170px;

    height: 50px;

}





/*==========About Us CSS End==========*/





/*==========Info Box CSS==========*/



.info-sec {

    position: relative;

    margin-top: -100px;

}



.info-box-wp {

    display: flex;

    justify-content: center;

    align-items: center;

    background: var(--white-color);

    box-shadow: var(--box-shadow);

    padding: 50px 0;

}



.info-box {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 200px;

    height: 100px;

}



.info-box .info-icon img {

    width: 100%;

    pointer-events: none;

}





/*==========Info Box CSS End==========*/





/*==========Video CSS==========*/



.video-sec {

    position: relative;

    padding-top: 140px;

    z-index: 1;

}



.video-img-wp {

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    height: 550px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

}



.video-img-wp::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 550px;

    top: 0;

    right: calc(100% - 50%);

    background: var(--primary-color);

    -webkit-clip-path: var(--triangle-shep);

    clip-path: var(--triangle-shep);

    mix-blend-mode: multiply;

    transform: rotate(180deg);

    z-index: 1;

}



.video-wp {

    position: relative;

}



.video-wp::before {

    content: "";

    position: absolute;

    width: 133px;

    height: 101px;

    top: -45px;

    right: -70px;

    background-image: url('../images/video-grid.png');

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    z-index: -1;

}



.video-wp::after {

    content: "";

    position: absolute;

    width: 150px;

    height: 150px;

    bottom: -65px;

    right: -77px;

    background: var(--primary-color);

    border-radius: 50%;

    z-index: -1;

}





/*==========Video CSS End==========*/





/*==========Services CSS==========*/



.services-sec {

    position: relative;

    background: #222933;

    margin-top: -184px;

    padding: 322px 0 140px 0;

}



.services-sec::before {

    content: "";

    position: absolute;

    width: 943px;

    height: 396px;

    background-image: url('../images/service-shep-(2).png');

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    top: 0;

    left: 0;

}



.services-sec::after {

    content: "";

    position: absolute;

    width: 1233px;

    height: 725px;

    background-image: url('../images/service-shep-(1).png');

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    bottom: 0;

    right: -100px;

}



.services-sec .sec-wp::before {

    content: "";

    position: absolute;

    width: 153px;

    height: 151px;

    background-image: url('../images/services-dot.png');

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    top: 153px;

    left: -244px;

}



.services-sec .h2-title {

    color: var(--white-color);

    margin-bottom: 68px;

}



.services-img-wp {

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    height: 230px;

}



.service-box-wp {

    background: var(--white-color);

    position: relative;

    height: 100%;

}



.services-text-wp {

    position: relative;

    padding: 33px 30px 51px 30px;

}



.services-text-wp .h4-title {

    font-size: 23px;

}



.services-text {

    padding-right: 10px;

}



.services-text p {

    color: #000;

    margin-bottom: 30px;

}



.services-btn {

    text-align: center;

    background: -webkit-linear-gradient(to bottom, rgba(0, 159, 244, 1) 0%, rgba(1, 102, 235, 1) 100%);

    background: -o-linear-gradient(to bottom, rgba(0, 159, 244, 1) 0%, rgba(1, 102, 235, 1) 100%);

    background: -moz-linear-gradient(to bottom, rgba(0, 159, 244, 1) 0%, rgba(1, 102, 235, 1) 100%);

    background: linear-gradient(to bottom, rgba(0, 159, 244, 1) 0%, rgba(1, 102, 235, 1) 100%);

    padding: 9px 0;

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    text-transform: uppercase;

    font-weight: bold;

    line-height: 32px;

    color: var(--white-color);

    transition: .3s;

}



.services-btn:hover {

    background: linear-gradient(to top, rgba(0, 159, 244, 1) 0%, rgba(1, 102, 235, 1) 100%);

    color: var(--white-color);

}



.services-btn i {

    padding-left: 10px;

}





/*==========Services CSS End==========*/





/*==========Solution CSS==========*/



.solution-sec {

    position: relative;

    padding: 137px 0 0 0;

}



.solution-sec::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 400px;

    background-image: url('../images/svg/waves.svg');

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    top: 0;

    left: 0;

    background-color: var(--primary-color);

    transform: rotate(180deg);

}



.solution-sec .h2-title {

    color: var(--white-color);

    margin-bottom: 25px;

}



.tab-link li {

    position: relative;

    float: left;

    margin: 0 17px;

}



.tab-link li:first-child {

    margin-left: 0;

}



.tab-link li:last-child {

    margin-right: 0;

}



.tab-link li a {

    position: relative;

    padding: 7px 18px;

    color: var(--white-color);

    transition: .3s;

}



.tab-link li a:hover {

    -webkit-text-stroke: 1px;

}



.tab-link li a::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background: var(--grey-color);

    opacity: 0;

    border-radius: 0 10px 0 10px;

    transition: .3s;

    z-index: -1;

}



.tab-link li a:hover::before {

    opacity: 1;

}



.tab-link li a.active {

    -webkit-text-stroke: 1px;

    border-radius: 0 10px 0 10px;

    transition: .3s;

}



.tab-link li a.active::before {

    opacity: 1;

}



.tab-link {

    display: inline-flex;

    margin-bottom: 64px;

}



.solution-img {

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    height: 280px;

}



.solution-img-wp {

    position: relative;

    width: 100%;

    overflow: hidden;

    margin-bottom: 30px;

    border-radius: 2px;

}



.solution-img-wp .overlay-text {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    transform: translate(-370px, 280px);

    background: rgba(67, 186, 255, 0.4);

    border-radius: 2px;

    transition: .3s;

}



.solution-img-wp:hover .overlay-text,

.solution-img-wp:hover::before {

    transform: translate(0, 0);

}



.solution-img-wp::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    background: rgba(67, 186, 255, 0.6);

    transform: translate(370px, -280px);

    border-radius: 2px;

    top: 0;

    right: 0;

    transition: .3s;

}



.solution-img-wp .overlay-text .add {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    border: 1px solid var(--white-color);

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    top: 30px;

    right: 30px;

}



.solution-img-wp .overlay-text .add i {

    color: var(--white-color);

}



.solution-img-wp .overlay-text .author {

    position: absolute;

    bottom: 23px;

    left: 38px;

}



.solution-img-wp .overlay-text .author h5 {

    font-size: 18px;

    font-weight: bold;

    color: var(--white-color);

    line-height: 20px;

}



.solution-img-wp .overlay-text .author span {

    color: var(--white-color);

}





/*==========Solution CSS End==========*/





/*==========Projects CSS==========*/



.projects-sec {

    position: relative;

    padding: 105px 0 100px 0;

}



.projects-sec .h2-title {

    margin-bottom: 67px;

}



.slider-box-wp,

.slider-box-img-wp {

    overflow: hidden;

}



.slider-box-img {

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    height: 400px;

    position: relative;

    transition: .3s;

}



.slider-box-img::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    background: rgba(12, 41, 53, 0.4);

    top: 0;

    left: 0;

    opacity: 0;

    transition: .3s;

}



.projects-slider-wp .slick-slide {

    opacity: 0.2;

}



.projects-slider-wp .slick-slide.slick-active {

    opacity: 1;

}



.slider-text-wp {

    background: #262051;

    padding: 16px 30px;

    /* margin: -50px 35px 0 35px; */

    margin: 0;

    position: relative;

    overflow: hidden;

}



.slider-text-wp h5 {

    font-size: 22px;

    font-weight: bold;

    line-height: 36px;

    color: var(--white-color);

    margin-bottom: 0;

}



.slider-text-wp span {

    color: var(--white-color);

    line-height: 32px;

}



.slider-text-wp span.half-circle i {

    font-size: 20px;

    color: var(--primary-color);

    position: absolute;

    top: 50%;

    right: 25px;

    transform: translate(0, -50%);

    transition: .3s;

}



.slider-box-wp:hover .slider-box-img {

    transform: scale(1.3);

}



.slider-box-wp:hover .slider-box-img::before {

    opacity: 1;

}



.slider-box-wp:hover .slider-text-wp span.half-circle {

    background: var(--primary-color);

}



.slider-box-wp:hover .slider-text-wp span.half-circle i {

    color: var(--white-color);

}



.projects-slider-wp .slick-list {

    overflow: visible;

}





/*==========Projects CSS End==========*/





/*==========Blog CSS==========*/



.blog-sec {

    position: relative;

    padding: 70px 0 175px 0;

}



.blog-sec::before {

    content: "";

    position: absolute;

    width: 2069px;

    height: 2229px;

    -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

    background: #EBF0FF;

    bottom: -182px;

    left: 254px;

    transform: rotate(48deg);

    z-index: -1;

}



.blog-sec .h2-title {

    margin-bottom: 66px;

}



.plan-img-wp {

    background-position: top;

    background-size: cover;

    background-repeat: no-repeat;

    height: 330px;

}



.blog-slider-wp .slick-list {

    overflow: visible;

}



.blog-slider-wp .slick-slide {

    opacity: 0;

    transition: .3s;

}



.blog-slider-wp .slick-slide.slick-active {

    opacity: 1;

    transition: .3s;

}



.plan-box-wp {

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);

}



.plan-text-wp {

    background: var(--white-color);

    padding: 32px 50px 23px 28px;

}



.plan-text-wp .h4-title {

    margin-bottom: 10px;

    font-size: 18px;

    line-height: 22px;

}



.plan-text p {

    margin-bottom: 14px;

}



.plan-text-wp a {

    text-transform: uppercase;

    line-height: 20px;

    color: var(--primary-color);

    font-weight: 600;

    transition: .3s;

}



.plan-text-wp a:hover {

    color: var(--grey-color);

}



.plan-text-wp a i {

    margin-right: 4px;

}



.plan-text {

    border-bottom: 1px solid var(--light-color);

    margin-bottom: 19px;

}



.category-img {

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    height: 520px;

    position: relative;

    overflow: hidden;

}



.category-img::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background: rgba(39, 39, 39, 0.3);

}



.category-text-wp {

    padding-top: 32px;

}



.category-text-wp .h4-title {

    margin-bottom: 20px;

}



.category-text-wp ul {

    margin-bottom: 29px;

}



.category-text-wp li {

    margin-bottom: 20px;

}



.category-text-wp li:last-child {

    margin-bottom: 0;

}



.category-text-wp li a {

    color: #373737;

    font-size: 20px;

    font-weight: bold;

    line-height: 20px;

    text-transform: uppercase;

    transition: .3s;

}



.category-text-wp li a:hover {

    color: var(--primary-color);

}



.category-text-wp li a span {

    color: var(--grey-color);

    opacity: 0.5;

}



.form-element.search button {

    position: absolute;

    border: none;

    outline: none;

    color: var(--white-color);

    width: 54px;

    height: 54px;

    top: 0;

    right: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;

}



.form-element.search button::before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 100%;

    height: 100%;

    background: var(--primary-color);

}



.form-element.search button i {

    color: var(--white-color);

    top: auto;

    right: auto;

}



.form-element.search .form-input {

    padding: 0 80px 0 30px;

}





/*==========Blog CSS End==========*/





/*==========Footer CSS==========*/



.site-footer {

    background: #222222;

    position: relative;

}



.top-footer {

    padding-top: 134px;

}



.footer-text-wp {

    padding-right: 55px;

}



.footer-logo {

    margin-bottom: 32px;

}



.footer-text p {

    color: var(--white-color);

    margin-bottom: 23px;

}



.footer-btn .sec-btn {

    width: 170px;

    height: 50px;

    background: var(--primary-color);

}



.footer-btn .sec-btn:hover {

    background: transparent;

    border-color: var(--white-color);

}



.footer-navigation {

    display: inline-flex;

    align-items: center;

    flex-direction: column;

    width: 100%;

}



.footer-navigation h3,

.contact-info-wp h3 {

    font-size: 22px;

    font-weight: bold;

    text-transform: uppercase;

    color: var(--white-color);

    line-height: 32px;

    margin-bottom: 26px;

}



.footer-navigation ul {

    padding-left: 35px;

}



.footer-navigation li a {

    color: var(--white-color);

    position: relative;

    text-transform: uppercase;

    transition: .3s;

}



.footer-navigation li a::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 1px;

    background: var(--primary-color);

    bottom: 0;

    left: 0;

    opacity: 0;

    transition: .3s;

}



.footer-navigation li a.active {

    -webkit-text-stroke: 1px;

    color: var(--primary-color);

}



.footer-navigation li a.active::before {

    opacity: 1;

}



.footer-navigation li a:hover::before {

    opacity: 1;

}



.footer-navigation li a:hover {

    -webkit-text-stroke: 1px;

    color: var(--primary-color);

}



.contact-info-wp h3 {

    margin-bottom: 32px;

}



.footer-navigation li {

    margin-bottom: 16px;

}



.footer-navigation li:last-child {

    margin-bottom: 0;

}



.contact-info-wp li {

    display: block;

    margin-bottom: 23px;

}



.contact-info-wp li:last-child {

    margin-bottom: 0;

}



.contact-info-wp li a {

    display: inline-flex;

    align-items: center;

    height: 100%;

    transition: .3s;

}



.contact-info-wp li a.address-wp {

    display: table;

    width: 100%;

}



.contact-info-wp li a span.address-icon,

.contact-info-wp li a span.address-info {

    display: table-cell;

    vertical-align: middle;

}



.contact-info-wp li a span.contact-icon {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: var(--white-color);

    margin-right: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .3s;

}



.contact-info-wp li a span.contact-icon i {

    font-size: 20px;

    color: var(--primary-color);

    transition: .3s;

}



.contact-info-wp li a span.contact-icon i.fa-phone {

    transform: rotate(90deg);

}



.contact-info-wp li a span.contact-info {

    color: var(--white-color);

    line-height: 20px;

    transition: .3s;

}



.contact-info-wp li a:hover span.contact-info {

    color: var(--primary-color);

}



.top-footer-wp {

    border-bottom: 1px solid var(--white-color);

    padding-bottom: 131px;

}



.footer-bottom {

    padding: 47px 0 47px 0;

}



.copyright-wp {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.copyright-link li,

.copyright-link li a {

    color: var(--white-color);

    line-height: 16px;

    float: left;

    transition: .3s;

}



.copyright-wp .social-icon-wp li {

    border-right: 0;

}



.copyright-wp .social-icon-wp li:hover {

    background: transparent;

}



.copyright-wp .social-icon-wp li:hover a i {

    color: var(--primary-color);

}



.copyright-link li a:hover {

    text-decoration: underline !important;

}



.copyright-link li {

    border-right: 1px solid var(--white-color);

    margin: 0 4px;

    padding-right: 8px;

}



.copyright-link li:last-child {

    border-right: 0;

    margin-right: 0;

    padding-right: 0;

}



.copyright-text p {

    color: var(--white-color);

    line-height: 20px;

    margin-bottom: 0;

}



.copyright-text p a {

    color: var(--white-color);

    text-decoration: underline !important;

    transition: .3s;

}



.copyright-text p a:hover {

    text-decoration: none !important;

}





/*==========Footer CSS End==========*/





/*==========404 CSS==========*/



.error-404 {

    padding: 80px 0;

    text-align: center;

}



.error-404 img {

    width: 35vw;

}





/*==========404 CSS End==========*/





/*==========Cta Btn CSS End==========*/



.sec-btn.cta-btn {

    position: fixed;

    top: 50%;

    right: -83px;

    transform: translate(0, -50%) rotate(-90deg);

    z-index: 98;

}





/*==========Cta Btn CSS End==========*/





/*==========Scroll To Top CSS Start==========*/



.scrolltop {

    width: 60px;

    height: 60px;

    text-align: center;

    background: var(--primary-color);

    font-size: 24px;

    line-height: 52px;

    cursor: pointer;

    transition: 0.3s;

    position: fixed;

    bottom: 43px;

    right: 43px;

    transform: rotate(45deg);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: var(--box-shadow);

    z-index: 98;

}



.scrolltop i {

    color: var(--white-color);

    position: relative;

    transform: rotate(-45deg);

    z-index: 2;

}



.scrolltop:hover {

    background: var(--primary-color);

}



.scrolltop:hover i {

    color: var(--white-color);

}



@keyframes move {

    0% {

        top: 0;

    }

    100% {

        top: 5px;

    }

}





/*==========Responsive Start==========*/





/*--------------------------------------------------------------

# Navigation

--------------------------------------------------------------*/



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

    .menu-toggle {

        display: none;

    }

}



@media (min-width: 1500px) {

    .container {

        max-width: 1200px;

    }

    .main-banner .banner-video video {

        width: 100%;

    }

}



@media(min-width: 2100px) {

    .container {

        max-width: 1400px;

    }

    p,

    body,

    button,

    input,

    select,

    optgroup,

    textarea {

        font-size: 18px;

        line-height: 32px;

    }

    .main-navigation .menu li a {

        font-size: 16px;

    }

    .site-branding {

        width: 140px;

    }

    .h1-title {

        font-size: 90px;

        line-height: 100px;

    }

    .h2-title {

        font-size: 50px;

        line-height: 58px;

    }

    .h3-title {

        font-size: 30px;

        line-height: 40px

    }

    .h4-title {

        font-size: 22px;

        line-height: 30px

    }

    .h5-title {

        font-size: 20px;

        line-height: 30px

    }

    .site-header.sticky-head .main-navigation .menu li,

    .site-header.sticky-head .site-branding {

        height: 75%;

    }

    .footer-bottom-link ul p,

    .footer-bottom-link li,

    .copyright-right-text p,

    .footer-menu ul li a {

        font-size: 14px;

        line-height: 14px;

    }

    .footer-bottom-link {

        margin-bottom: 12px;

    }

    .sec-btn {

        font-size: 18px;

        width: 230px;

    }

    .banner-btn .sec-btn {

        width: 230px;

    }

    .sec-btn.cta-btn {

        right: -86px;

    }

    [data-simplebar=init] {

        padding-right: 11px;

    }

    .main-banner .banner-shep::after {

        top: 266px;

    }

    .video-img-wp::before {

        right: 565px;

    }

    .blog-sec::before {

        left: 550px;

    }

    .category-text-wp li a {

        font-size: 18px;

    }

    .category-text-wp li,

    .category-text-wp .h4-title {

        margin-bottom: 10px;

    }

    .category-text-wp {

        padding-top: 15px;

    }

    .category-img::after {

        left: 190px;

    }

    .main-navigation .menu li.menu-item-has-children::before {

        margin-top: -18px;

    }

}



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

    .container-fluid {

        max-width: 540px;

    }

}



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

    .container-fluid {

        max-width: 720px;

    }

}



@media(max-width: 1699px) {

    .services-sec .sec-wp::before {

        left: -170px;

    }

}



@media(max-width: 1399px) {

    .solution-sec::before {

        width: 115%;

        height: 450px;

    }

    .services-sec .sec-wp::before {

        left: -100px;

    }

}



@media(max-width: 1299px) {

    .about-us-text-wp {

        padding-left: 50px;

    }

    .aboutus-img-wp::before {

        top: 30px;

        right: 30px;

    }

    .services-sec .sec-wp::before {

        left: -70px;

    }

}



@media(max-width: 1199px) {

    .comment-form-author,

    .comment-form-email {

        width: 47%;

    }

    .banner-btn .sec-btn+.sec-btn {

        margin-left: 15px;

    }

    .h1-title {

        font-size: 80px;

        line-height: 80px;

    }

    .main-banner .banner-shep::after {

        top: 215px;

    }

    .about-us-text-wp {

        padding-left: 10px;

    }

    .services-sec .sec-wp::before {

        left: -50px;

    }

    .services-sec::after {

        right: 0;

    }

    .services-text-wp {

        padding: 30px 20px 40px 20px;

    }

    .blog-sec::before {

        width: 2300px;

        height: 1800px;

        left: 0;

        bottom: 0;

    }

    .category-box-wp {

        position: relative;

        height: 100%;

    }

    .search-text {

        position: absolute;

        width: 100%;

        bottom: 0;

    }

    .search-text .wpcf7-form-control-wrap {

        margin-bottom: 0;

    }

    .plan-img-wp {

        height: 300px;

    }

    .plan-text-wp {

        padding: 32px 30px 24px 28px;

    }

    .top-footer-wp {

        padding-bottom: 137px;

    }

}



@media(max-width: 1099px) {

    .aboutus-img-wp::before {

        top: 10px;

        right: 10px;

    }

    .about-us-text-wp {

        padding-left: 0;

    }

    .solution-sec::before {

        width: 100%;

        height: 460px;

    }

}



@media(max-width: 991px) {

    .for-des {

        display: none !important

    }

    .for-mob {

        display: block !important

    }

    .site-header {

        background: var(--grey-color);

        height: 80px;

        border-bottom: 5px solid var(--primary-color);

    }

    .site-header.sticky-head {

        height: 65px;

        border-top: 0;

    }

    .site-header .container {

        max-width: 100%;

        padding: 0;

        height: 100%;

    }

    .site-header .container .row {

        margin: 0;

        height: 100%;

    }

    .site-header .container .row .col-lg-3 {

        width: auto;

        padding: 0;

        height: 100%;

        position: absolute;

        top: 0;

        left: 50%;

        transform: translate(-50%, 0);

        z-index: 2;

    }

    .site-branding {

        height: 100%;

    }

    .site-branding::before {

        display: none;

    }

    .mob-phone {

        position: absolute;

        top: 50%;

        left: 30px;

        font-size: 25px;

        color: var(--primary-color);

        border: none;

        outline: none !important;

        background: transparent;

        padding: 0;

        transform: translate(0, -50%);

        z-index: 99;

    }

    .mob-phone i {

        transform: rotate(90deg);

    }

    .menu-toggle {

        position: absolute;

        top: 50%;

        right: 30px;

        border: none;

        outline: none !important;

        background: transparent;

        width: 30px;

        padding: 0;

        transform: translate(0, -50%);

        z-index: 100;

    }

    .menu-toggle span {

        display: block;

        width: 100%;

        height: 4px;

        background: var(--primary-color);

        margin-bottom: 5px;

        border-radius: 2px;

        transition: 0.3s;

    }

    .menu-toggle span:last-child {

        margin: 0;

    }

    .toggled .menu-toggle span:nth-child(1) {

        transform: rotate(45deg);

        position: relative;

        top: 9px;

    }

    .toggled .menu-toggle span:nth-child(2) {

        transform: rotate(-45deg);

    }

    .toggled .menu-toggle span:nth-child(3) {

        opacity: 0;

        height: 0;

    }

    .toggled .header-menu {

        transform: translatey(0);

    }

    .header-menu {

        height: 100vh;

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        padding-top: max(8vh, 30px);

        padding-left: max(8vh, 30px);

        z-index: 99;

        transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);

        overflow-y: auto;

        overflow-x: hidden;

        transform: translatey(-100%);

        background: var(--grey-color);

    }

    .site-header.sticky-head .main-navigation .menu li.menu-item-has-children ul.sub-menu {

        margin: 0;

    }

    .site-header.sticky-head .site-branding {

        height: 100%;

    }

    .main-navigation .menu li {

        display: block;

        float: none;

        margin: 0;

        margin-bottom: 3vh;

        transition: .3s;

    }

    .main-navigation .menu li a {

        display: inline-block;

        font-size: max(16px, 2vh);

        padding: 0;

        color: var(--white-color);

    }

    .main-navigation .menu li.menu-item-has-children>a {

        display: none;

    }

    .main-navigation .menu li.menu-item-has-children ul.sub-menu {

        position: static;

        display: block;

        padding: 0;

        width: auto;

        box-shadow: unset;

        margin-top: 3vh;

        background: transparent;

    }

    .main-navigation .menu li.menu-item-has-children {

        margin-right: 0;

    }

    .main-navigation .menu li.menu-item-has-children ul.sub-menu li {

        padding: 0;

        border-bottom: 0;

        margin: 0;

        margin-bottom: 3vh;

        transition: .3s;

    }

    .main-navigation .menu li.menu-item-has-children ul.sub-menu li a {

        padding: 0;

        color: var(--white-color);

    }

    .main-navigation .menu li.menu-item-has-children::before {

        display: none;

    }

    .main-navigation .menu li.menu-item-has-children ul.sub-menu li a::before {

        content: "";

        width: 100%;

        height: 3px;

        background: var(--primary-color);

        top: auto;

        bottom: 0;

    }

    .main-navigation .menu li.menu-item-has-children ul.sub-menu li:hover a::before {

        opacity: 1;

    }

    .main-navigation .menu li.menu-item-has-children ul.sub-menu li:hover a {

        padding-left: 0;

    }

    .menu-menu-1-container,

    .menu-menu-1-container ul {

        height: auto;

        margin-bottom: 7vh;

        transition: .3s;

    }

    .social-icon-wp li {

        border: 2px solid var(--light-color);

        margin: 0 1vh;

    }

    .social-icon-wp li:first-child {

        border-left: 2px solid var(--light-color);

        margin-left: 0;

    }

    .copyright-wp .social-icon-wp li {

        border: 0;

    }

    .copyright-wp .social-icon-wp li:first-child {

        border: 0;

    }

    .social-icon-wp li:last-child {

        margin-right: 0;

    }

    .info-wp li {

        border: 0;

        padding: 0;

        margin-right: 2vh;

        transition: .3s;

    }

    .info-wp li:first-child {

        border-left: 0;

        padding-left: 0;

    }

    .info-wp li:last-child {

        margin-bottom: 0;

        margin-right: 0;

    }

    .copyright-text .social-icon-wp {

        margin-bottom: 0;

    }

    .social-icon-wp {

        display: flex;

        margin-bottom: 8vh;

        transition: .3s;

    }

    .info-wp li a {

        font-size: max(16px, 2vh);

        display: inline-flex;

        align-items: center;

    }

    .info-wp li a span {

        width: 50px;

        height: 50px;

        border-radius: 50%;

        background: var(--white-color);

        display: flex;

        align-items: center;

        justify-content: center;

        margin-right: 2vh;

        transition: .3s;

    }

    .info-wp li a span i {

        font-size: max(16px, 2vh);

        color: var(--primary-color);

        padding-right: 0;

    }

    .info-wp li a i.fa-phone {

        transform: rotate( 90deg) translate(0, 0);

    }

    .mob-triangle-shep {

        width: 500px;

        height: 400px;

        -webkit-clip-path: var(--triangle-shep);

        clip-path: var(--triangle-shep);

        background: linear-gradient(to bottom, rgba(42, 88, 128, 1) 0%, rgba(84, 175, 255, 1) 100%);

        mix-blend-mode: soft-light;

        transform: rotate( 58deg);

        position: absolute;

        right: -30vh;

        bottom: 20vh;

        transition: .3s;

        z-index: -1;

    }

    .scrolltop {

        display: none !important;

    }

    .widget-area {

        margin-top: 50px;

    }

    .main-banner .banner-video {

        display: none;

    }

    .sec-btn.cta-btn {

        top: auto;

        bottom: 0;

        right: auto;

        left: 50%;

        transform: translate(-50%, 0) rotate(0);

        z-index: 98;

        display: none;

    }

    .modal-body.overflow-text {

        padding: 42px 15px 15px 15px !important;

    }

    .main-banner .banner-shep::before {

        top: -425px;

        left: -100px;

    }

    .main-banner .banner-shep::after {

        top: 225px;

    }

    .about-us-sec {

        padding: 80px 0 150px 0;

    }

    .aboutus-img-wp::before {

        top: 40px;

        right: 40px;

    }

    .aboutus-img-wp {

        margin-bottom: 115px;

    }

    .about-us-text-wp {

        padding-top: 0;

    }

    .info-sec {

        margin-top: -70px;

    }

    .info-box-wp {

        padding: 20px 0;

    }

    .info-box {

        width: 120px;

    }

    .services-sec::before {

        width: 100%;

    }

    .service-box-wp {

        height: auto;

        margin-bottom: 30px;

    }

    .services-sec::after {

        width: 100%;

        height: 30%;

    }

    .solution-accordion-list-box {

        margin-bottom: 30px;

    }

    .solution-accordion-list-box h3 {

        font-size: 18px;

        text-transform: uppercase;

        color: var(--white-color);

        background: var(--primary-color);

        margin-bottom: 0;

        padding: 13px 30px;

        position: relative;

        cursor: pointer;

        transition: .3s;

    }

    .solution-accordion-list-box h3 span {

        position: absolute;

        top: 50%;

        right: 30px;

        transform: translate(0, -50%);

        transition: .3s;

    }

    .solution-accordion-list-box .accordion-content {

        display: none;

    }

    .accordion-img-wp {

        background-position: center;

        background-size: cover;

        background-repeat: no-repeat;

        height: 300px;

    }

    .solution-accordion-list-box.active h3 span i {

        transform: rotate( 180deg);

    }

    .solution-accordion-list-box.active .accordion-content {

        display: block;

    }

    .plan-box-wp {

        margin-bottom: 30px;

    }

    .category-img::after {

        width: 100%;

        height: 530px;

        left: calc(100% - 49%);

    }

    .search-text .form-input {

        box-shadow: var(--box-shadow);

    }

    .blog-sec::before {

        width: 1700px;

        height: 2000px;

    }

    .footer-text-wp {

        padding-right: 0;

        margin-bottom: 23px;

    }

    .footer-navigation {

        align-items: flex-start;

        margin-bottom: 0;

    }

    .footer-navigation ul {

        padding-left: 0;

        width: 100%;

    }

    .footer-navigation li {

        width: 50%;

        float: left;

    }

    .contact-info-wp li a.address-wp {

        display: flex;

    }

    .copyright-wp {

        display: inline-block;

    }

    .top-footer-wp {

        padding-bottom: 30px;

    }

    .copyright-link {

        margin-bottom: 30px;

    }

    .solution-sec .h2-title {

        color: var(--grey-color);

    }

    .solution-sec::before {

        display: none;

    }

    .plan-img-wp {

        height: 400px;

    }

    .main-banner {

        padding: 336px 0 255px 0;

    }

    .video-sec {

        padding-top: 80px;

    }

    .services-sec {

        padding: 262px 0 50px 0;

    }

    .solution-sec {

        padding: 75px 0 0 0;

    }

    .blog-sec {

        padding: 10px 0 74px 0;

    }

    .services-sec .h2-title {

        margin-bottom: 38px;

    }

    .tab-link li a {

        color: var(--grey-color);

    }

    .tab-link li a:hover {

        color: var(--white-color);

    }

    .tab-link li a.active {

        color: var(--white-color);

    }

    .solution-img {

        height: 220px;

    }

    .solution-img-wp .overlay-text .author h5 {

        margin-bottom: 4px;

    }

    .solution-img-wp .overlay-text .author {

        left: 25px;

        bottom: 17px;

    }

    .solution-img-wp .overlay-text .add {

        top: 25px;

        right: 25px;

    }

    .services-text-wp {

        padding: 23px 20px 40px 20px;

    }

    .tab-link {

        margin-bottom: 33px;

    }

    .projects-sec {

        padding: 45px 0 90px 0;

    }

    .projects-sec .h2-title {

        margin-bottom: 38px;

    }

    .slick-dots {

        bottom: -55px;

    }

    .blog-sec .h2-title {

        margin-bottom: 36px;

    }

    .blog-slider-wp .slick-dots {

        bottom: -24px;

    }

    .top-footer {

        padding-top: 80px;

    }

    .footer-logo {

        margin-bottom: 20px;

    }

    .footer-text p {

        margin-bottom: 18px;

    }

    .footer-navigation h3,

    .contact-info-wp h3 {

        margin-bottom: 16px;

    }

    .contact-info-wp h3 {

        margin-bottom: 23px;

    }

    .footer-bottom {

        padding: 30px 0 10px 0;

    }

    .plan-text-wp {

        padding: 27px 30px 22px 28px;

    }

    .plan-text-wp .h4-title {

        margin-bottom: 5px;

    }

    .plan-text p {

        margin-bottom: 9px;

    }

    .plan-text {

        margin-bottom: 14px;

    }

}



@media(max-width: 767px) {

    .comment-form-author,

    .comment-form-email {

        width: 100%;

    }

    .error-404 img {

        width: 50vw;

    }

    .widget-area {

        margin-top: 50px;

    }

    .h1-title {

        font-size: 60px;

        line-height: 60px;

    }

    .h2-title {

        font-size: 40px;

    }

    .main-banner {

        padding: 260px 0 180px 0;

    }

    .main-banner .banner-shep::before {

        top: -274px;

    }

    .main-banner .banner-shep::after {

        top: 75px;

    }

    .about-us-sec {

        padding: 60px 0 131px 0;

    }

    .aboutus-img-wp::before {

        top: 30px;

        right: 30px;

    }

    .info-box {

        width: 90px;

    }

    .video-img-wp::before {

        height: 500px;

    }

    .video-img-wp {

        height: 500px;

    }

    .services-sec {

        padding: 239px 0 31px 0;

    }

    .services-sec .h2-title {

        margin-bottom: 35px;

    }

    .services-text-wp {

        padding: 20px 20px 40px 20px;

    }

    .solution-sec {

        padding: 54px 0 0 0;

    }

    .projects-sec {

        padding: 25px 0 30px 0;

    }

    .projects-sec .h2-title {

        margin-bottom: 34px;

    }

    .blog-sec {

        padding: 50px 0 54px 0;

    }

    .blog-sec .h2-title {

        margin-bottom: 35px;

    }

    .top-footer {

        padding-top: 60px;

    }

    .footer-logo {

        margin-bottom: 19px;

    }

    .footer-text-wp {

        margin-bottom: 23px;

    }

    .footer-navigation {

        margin-bottom: 0;

    }

    .top-footer-wp {

        padding-bottom: 60px;

    }

    .footer-bottom {

        padding: 30px 0 11px 0;

    }

    .copyright-link {

        margin-bottom: 25px;

    }

    .tab-link {

        display: flex;

        justify-content: center;

    }

    .tab-link .nav {

        display: block;

    }

    .tab-link li {

        margin: 0 5px;

    }

    .tab-link li a {

        padding: 7px 10px;

    }

    .aboutus-img-wp {

        margin-bottom: 84px;

    }

    .video-sec {

        padding-top: 60px;

    }

    .blog-slider-wp .slick-slide {

        opacity: 0.5;

        transition: .3s;

    }

    .h3-title {

        margin-bottom: 22px;

    }

    .about-us-text-wp .h2-title {

        margin-bottom: 18px;

    }

    .about-us-text p {

        margin-bottom: 15px;

    }

    .about-us-list-wp {

        margin-bottom: 19px;

    }

    .solution-sec .h2-title {

        margin-bottom: 18px;

    }

}



@media(max-width: 575px) {

    .thank-text {

        padding-top: 80px;

        margin: 20px 0;

    }

    .thank-text:before {

        width: 57px;

        height: 61px;

    }

    .container,

    .container-fluid {

        padding: 0 30px;

    }

    .privacy-content ol,

    .privacy-content ul {

        margin-left: 20px;

    }

    .avatar.photo {

        margin-right: 8px;

        width: 50px;

        height: 50px;

    }

    button.close {

        top: 0px;

        right: 20px;

        font-size: 45px;

    }

    .sec-btn,

    .form-submit .submit {

        width: 200px;

        height: 50px;

    }

    .banner-btn .sec-btn+.sec-btn {

        margin-left: 15px;

        margin-top: 0;

    }

    .h1-title {

        font-size: 50px;

        line-height: 50px;

        margin-bottom: 33px;

    }

    .h2-title {

        font-size: 35px;

        line-height: 35px;

    }

    .h3-title {

        font-size: 23px;

        margin-bottom: 22px;

    }

    .main-banner {

        padding: 160px 0 80px 0;

    }

    .main-banner .banner-shep::after {

        top: 35px;

        right: -260px;

    }

    .about-us-sec {

        padding: 70px 0 112px 0;

    }

    .about-us-img {

        height: 450px;

    }

    .aboutus-img-wp::before {

        top: -30px;

        right: 30px;

        width: 88%;

        height: 510px;

    }

    .aboutus-img-wp {

        margin-bottom: 64px;

    }

    .about-us-text-wp .h2-title {

        margin-bottom: 13px;

    }

    .about-us-text-wp .h3-title {

        margin-bottom: 4px;

    }

    .about-us-text {

        padding-right: 0;

    }

    .about-us-text p {

        margin-bottom: 12px;

    }

    .about-us-list-wp {

        margin-bottom: 19px;

    }

    .info-box-wp {

        display: block;

        padding: 0;

    }

    .info-box {

        width: 100%;

        height: 120px;

        border-bottom: 1px solid var(--light-color);

    }

    .info-box:nth-child(5) {

        border-bottom: 0;

    }

    .video-sec {

        padding-top: 40px;

    }

    .video-img-wp,

    .video-img-wp::before {

        height: 400px;

    }

    .video-wp::before,

    .video-wp::after,

    .services-sec .sec-wp::before {

        display: none;

    }

    .services-sec::before {

        height: 600px;

    }

    .services-sec {

        padding: 220px 0 32px 0px;

    }

    .services-sec .h2-title {

        margin-bottom: 27px;

    }

    .solution-sec {

        padding: 34px 0 0 0;

    }

    .blog-sec {

        padding: 20px 0 26px 0;

    }

    .top-footer {

        padding-top: 40px;

    }

    .slider-box-img {

        height: 350px;

    }

    .category-box-wp {

        height: auto;

        padding-bottom: 47px;

    }

    .plan-img-wp,

    .category-img {

        height: 420px;

    }

    .category-img::after {

        left: calc(100% - 40%);

    }

    .projects-slider-wp .slick-dots {

        bottom: -45px;

    }

    .solution-sec .h2-title {

        margin-bottom: 19px;

    }

    .projects-sec {

        padding: 5px 0 30px 0;

    }

    .top-footer-wp {

        padding-bottom: 40px;

    }

    .services-text-wp {

        padding: 17px 20px 34px 20px;

    }

    .services-text-wp .h4-title {

        margin-bottom: 2px;

    }

    .plan-text-wp {

        padding: 21px 30px 22px 25px;

    }

    .blog-slider-wp .slick-dots {

        bottom: -16px;

    }

    .tab-link li a {

        padding: 7px 6px;

    }

}



@media(max-width: 550px) {

    .info-wp li {

        margin-bottom: 2vh;

    }

    .info-wp li:last-child {

        margin-bottom: 0;

    }

}



@media(max-width: 480px) {

    .banner-tet-wp .h3-title::before {

        display: none;

    }

    .h1-title {

        margin-bottom: 26px;

    }

    .main-banner {

        padding: 165px 0 88px 0;

    }

    .banner-btn {

        padding-right: 80px;

    }

    .banner-btn .sec-btn+.sec-btn {

        margin-left: 0;

        margin-top: 20px;

    }

    .main-banner .banner-shep::after {

        display: none;

    }

    .about-us-sec {

        padding: 40px 0 112px 0;

    }

    .aboutus-img-wp {

        margin-bottom: 34px;

    }

    .about-us-img {

        height: 350px;

    }

    .aboutus-img-wp::before {

        display: none;

    }

    .video-img-wp,

    .video-img-wp::before {

        height: 350px;

    }

    .play-btn {

        width: 80px;

        height: 80px;

        font-size: 24px;

    }

    .play-btn::before {

        width: 100px;

        height: 100px;

    }

    .h2-title {

        font-size: 33px;

        line-height: 33px;

    }

    .h4-title {

        font-size: 22px;

        margin-bottom: 0;

        line-height: 28px;

    }

    .services-text {

        padding-right: 0;

    }

    .plan-text-wp {

        padding: 22px 28px 17px 25px;

    }

    .plan-text-wp .h4-title {

        margin-bottom: 6px;

    }

    .plan-img-wp,

    .category-img {

        height: 350px;

    }

    .category-img::after {

        height: 350px;

        left: calc(100% - 50%);

    }

    .category-text-wp li a {

        font-size: 18px;

    }

    .category-text-wp {

        padding-top: 21px;

    }

    .category-text-wp .h4-title {

        margin-bottom: 10px;

    }

    .category-text-wp li {

        margin-bottom: 8px;

    }

    .search-text .form-input {

        height: 46px;

    }

    .form-element.search {

        height: 46px;

        font-size: 16px;

    }

    .form-element.search button {

        width: 46px;

        height: 46px;

    }

    .category-text-wp ul {

        margin-bottom: 21px;

    }

    .footer-text p {

        margin-bottom: 13px;

    }

    .contact-info-wp li a span.contact-icon {

        width: 40px;

        height: 40px;

    }

    .contact-info-wp li a span.contact-icon i {

        font-size: 16px;

    }

    .footer-navigation h3 {

        font-size: 20px;

        margin-bottom: 10px;

    }

    .contact-info-wp h3 {

        font-size: 20px;

        margin-bottom: 17px;

    }

    .footer-text-wp {

        margin-bottom: 17px;

    }

    .footer-navigation li {

        margin-bottom: 11px;

    }

    .copyright-text p,

    .copyright-link li,

    .copyright-link li a {

        font-size: 14px;

    }

    .copyright-link li,

    .copyright-link li a {

        line-height: 14px;

    }

    .services-sec {

        padding: 220px 0 12px 0px;

    }

    .tab-link {

        margin-bottom: 9px;

    }

    .tab-link .nav {

        width: 100%;

    }

    .tab-link .nav li {

        width: 50%;

        margin: 0;

        margin-bottom: 15px;

    }

    .tab-link li a {

        padding: 7px 10px;

    }

    .solution-sec .h2-title {

        margin-bottom: 13px;

    }

    .projects-sec .h2-title {

        margin-bottom: 25px;

    }

    .footer-logo {

        margin-bottom: 15px;

    }

    .footer-bottom {

        padding: 25px 0 4px 0;

    }

    .copyright-link {

        margin-bottom: 19px;

    }

    .slider-text-wp {

        padding: 16px 0 15px 25px

    }

    .services-text-wp {

        padding: 21px 20px 34px 25px;

    }

}



@media(max-width: 450px) {

    .h3-title {

        margin-bottom: 11px;

    }

    .h1-title {

        font-size: 40px;

        margin-bottom: 25px;

    }

    .slider-text-wp {

        margin: 0;

    }

    .copyright-link {

        margin-bottom: 36px;

    }

    .copyright-link li:first-child {

        float: none;

        border-right: 0;

        margin-bottom: 11px;

    }

}



@media(max-width: 400px) {

    .container,

    .container-fluid {

        padding: 0 15px;

    }

    .menu-toggle {

        right: 15px;

    }

    .header-menu {

        padding-left: max(5vh, 30px);

    }

    .banner-btn .sec-btn+.sec-btn {

        margin: 0;

        margin-top: 15px;

    }

    .mob-phone {

        left: 15px;

    }

    .main-banner {

        padding: 165px 0 86px 0;

    }

    .about-us-img,

    .plan-img-wp,

    .category-img,

    .category-img::after {

        height: 300px;

    }

    .video-img-wp,

    .video-img-wp::before,

    .slider-box-img {

        height: 300px;

    }

    .footer-navigation li {

        float: none;

        width: auto;

    }

    .contact-info-wp li a.address-wp {

        display: table;

    }

    .blog-sec .h2-title {

        margin-bottom: 27px;

    }

    .footer-navigation {

        margin-bottom: 13px;

    }

    .copyright-link li:first-child {

        margin-bottom: 17px;

    }

}



@media(max-width: 350px) {

    .h1-title {

        font-size: 36px;

        line-height: 36px;

    }

    .about-us-list-wp {

        display: block;

        margin-bottom: 14px;

    }

    .about-us-list-wp .about-design-list:first-child {

        margin-bottom: 10px;

    }

    .services-text-wp {

        padding: 15px 10px 40px 10px;

    }

    .solution-accordion-list-box {

        margin-bottom: 20px;

    }

    .h4-title {

        font-size: 20px;

    }

    .slider-text-wp h5 {

        font-size: 20px;

        line-height: 25px;

    }

    .slider-text-wp {

        padding: 16px 16px;

    }

    .plan-text-wp {

        padding: 15px 15px;

    }

    .copyright-link li {

        margin: 0 3px;

        padding-right: 7px;

    }

}



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

    .menu-menu-1-container,

    .menu-menu-1-container ul,

    .social-icon-wp {

        margin-bottom: 5vh;

    }

}



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

    .main-navigation .menu li,

    .main-navigation .menu li.menu-item-has-children ul.sub-menu li {

        margin-bottom: 2vh;

    }

    .main-navigation .menu li.menu-item-has-children ul.sub-menu {

        margin-top: 2vh;

    }

}



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

    .main-navigation .menu li,

    .main-navigation .menu li.menu-item-has-children ul.sub-menu li {

        margin-bottom: 1.5vh;

    }

    .menu-menu-1-container,

    .menu-menu-1-container ul,

    .social-icon-wp {

        margin-bottom: 2vh;

    }

    .info-wp li a span {

        width: 40px;

        height: 40px;

    }

}





/*==========Responsive End==========*/