@import url(https://fonts.googleapis.com/css2?family=Lilita+One&family=Magra:wght@400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap);
body {
    padding: 0;
    margin: 0;
	 height: auto;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
	overflow-x: hidden;
}

a {
    text-decoration: none;
    -webkit-transition: .5s;
    transition: .5s;
    color: #fff
}

a:focus,
a:hover {
    color: #fff;
    text-decoration: none
}

#more {
    display: none
}

#demo {
    margin: 15px
}

#marketing {
    margin: 15px
}

#social {
    margin: 15px
}

.smbig {
    max-width: 70% !important
}

.half li {
    width: 45%;
    float: left
}
.list-style{padding-left:50px; color: #fff;margin-bottom: 10px;}
button {
    outline: 0 !important
}

.mobile-view {
    display: none
}
.banner-content{
    padding:0 0 50px 0;
}
.banner-content h1{
    padding:0;
    color:#fff;
}
.banner-content p{
    color:#fff;
    margin-bottom: 5px;
}
.banner-content h4{
    text-align:left;
    margin: 20px 0 5px 0;
    font-size: 20px;
    color: #fff;
}

.modal-body ul {
    margin-left: 25px
}

.modal-body ul li {
    margin-bottom: 10px
}

.box {
    box-shadow: 0 5px 40px 0 rgb(0 0 0 / 11%);
    padding: 15px 15px;
    margin-bottom: 20px;
    min-height: 0;
    width: 100%
}

.purple-box {
    background-color: #813a96 !important
}

.blue-box {
    background-color: #11a4cf !important
}

.blue-box {
    background-color: #11a4cf !important
}

.box i {
    width: 10%;
    float: left;
    margin-top: 9px;
    color: #fff
}

.box span {
    float: right;
    width: 85%;
    color: #fff
}

.box p {
    float: left;
    width: 100%;
    margin-bottom: 5px
}

.spacer {
    width: 100%;
    float: left;
    height: 40px
}

input.default-btn {
    border: 0;
    padding: 5px 15px
}

.download-icon {
    text-align: center;
    padding: 15px
}

.mt-30 {
    margin-top: 30px
}

.purple-box p {
    color: #fff !important
}

.purple-box a {
    color: #fff
}

.purple-box h4 {
    color: #fff;
    text-align: center
}

.blue-box p {
    color: #fff !important
}

.blue-box a {
    color: #fff
}

.blue-box h4 {
    color: #fff
}

p {
    margin-bottom: 15px;
    line-height: 1.5;
    color: #040404;
    font-weight: 400;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    text-align: justify
} 

.modal-header .close {
    background: #000;
    opacity: 9;
    border-radius: 100px;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 0;
    text-shadow: none;
    color: #fff;
    border: 2px solid #fff;
    left: 22px;
    position: absolute;
    right: 6px
}

.dummy {
    margin-bottom: 25px
}

p:last-child {
    margin-bottom: 0
}

.list-3 {
    list-style: none
}

.list-1 {
    margin-left: 20px;
    margin-bottom: 20px
}

.list-1 li {
    line-height: 1.5;
    margin-bottom: 10px
}

.list-2 {
    margin-left: 40px
}

i {
    line-height: normal
}

.logo-list1 img {
    width: 4%;
    margin: 0 20px
}

.logo-list1 img:first-child {
    margin-left: 0
}

.logo-list2 img {
    width: 15%;
    margin: 0 8px
}

.logo-list2 img:first-child {
    margin-left: 0
}

.logo-list3 h4 {
    width: auto;
    margin-left: 120px;
    margin-top: 5px
}

.logo-list3 p {
    width: auto;
    margin-left: 120px;
    margin-top: 5px
}

.logo-list3 img {
    width: 10%;
    margin: 0 0
}

.logo-list3 img:first-child {
    margin-left: 0;
    float: left;
    padding: 10px
}




.logo-list4 {
    width: 100%;
    margin-left: 0;
    margin-top: 5px
}

.logo-list4 h4 {
    width: auto;
    margin-left: 0;
    margin-top: 5px
}

.logo-list4 p {
    width: auto;
    margin-left: 0;
    margin-top: 5px
}

.logo-list4 img {
    width: 10%;
    margin: 0 0
}

.logo-list4 img:first-child {
    margin-left: 0;
    float: none;
    padding: 10px
}

.col-span {
    width: 100%;
    float: left;
    margin: 0 10px
}

.logo-list img:first-child {
    margin-left: 0
}

.logo-list img {
    width: 20%;
    margin: 0 10px
}

.video-modal button.close {
    opacity: .9;
    z-index: 9999;
    font-size: 30px;
    box-shadow: none;
    color: #fff;
    font-weight: 400;
    position: absolute;
    right: -5px;
    background-color: #000;
    border: 2px solid #fff;
    width: 30px;
    height: 30px;
    line-height: 23px;
    border-radius: 50px;
    top: -13px
}

.video-modal .modal-body {
    padding: 0
}

.video-modal .modal-dialog {
    padding: 30px
}

.video-modal .modal-content {
    background: 0 0;
    box-shadow: none;
    border: 0
}

.video-modal .modal-body iframe {
    width: 100%;
    height: 470px
}

.d-table {
    width: 100%;
    height: 100%
}

.d-table-cell {
    vertical-align: middle
}

img {
    max-width: 100%;
    height: auto;
}

.ptb-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.mr-50 {
    margin-right: 50px !important;
}

.ml-30 {
    margin-left: 50px;
}

.pt-100 {
    padding-top: 100px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-100 {
    padding-bottom: 100px;
}

.right-image {
    margin-left: 30px;
}

.pt-70 {
    padding-top: 70px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-50 {
    padding-top: 50px;
}

.pb-70 {
    padding-bottom: 70px;
}

.pb-50 {
    /**padding-bottom: 50px;*/
}

.pb-10 {
    padding-bottom: 10px;
}

.ptb-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.ptb-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #212121;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700
}

.h1:last-child,
.h2:last-child,
.h3:last-child,
.h4:last-child,
.h5:last-child,
.h6:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
    margin-bottom: 0
}

.default-btn {
    display: inline-block;
    padding: 5px 30px;
    background-color: #813a96;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    border-radius: 2px
}

.default-btn:focus,
.default-btn:hover {
    background-color: #4c195b;
    color: #fff
}

.default-btn1 {
    display: inline-block;
    padding: 10px 15px;
    background-color: #813a96;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    border-radius: 2px;
    border: 0
}

.default-btn1:focus,
.default-btn1:hover {
    background-color: #4c195b;
    color: #fff
}



.optional-btn {
    display: inline-block;
    padding: 10px 15px;
    background-color: #813a96;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    border-radius: 2px;
    margin-left: 16px
}

.optional-btn:focus,
.optional-btn:hover {
    background-color: #086ad8;
    color: #fff
	
}

.btn-get-started {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 14px 32px;
    border-radius: 20px;
    transition: .5s;
    line-height: 1;
    color: #fff;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    background: #823b96
}

.btn-get-started:hover {
    background: #df3740
}

.projects-section {
    background-color: #d4a2f7
}

.section-title {
    text-align: center;
    margin-bottom: 40px
}

.section-title h1 {
    font-size: 35px;
    margin: 0 0 20px 0;
    position: relative;
    line-height: 1
}

.white {
    color: #fff
}

.section-title span {
    color: #086ad8
}

.section-title p {
    max-width: 100%;
    margin: auto;
    text-align: Center;
	margin-right:10px;
	margin-left:18px;
		
}

.section-title .bar {
    height: 4px;
    width: 85px;
    background: #813a96;
    margin: 20px auto 30px auto;
    position: relative;
    border-radius: 5px;
    overflow: hidden
}

.section-title .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

@-webkit-keyframes MOVE-BG {
    from {
        -webkit-transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(85px)
    }
}

@keyframes MOVE-BG {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(85px);
        transform: translateX(85px)
    }
}

.default-shape .shape-1 {
    position: absolute;
    right: 10%;
    top: 16%;
    z-index: -1;
    -webkit-animation: animationFramesOne 20s infinite linear;
    animation: animationFramesOne 20s infinite linear;
    z-index: 99
}

.default-shape .shape-2 {
    position: absolute;
    left: 10%;
    top: 25%;
    z-index: 99
}

.default-shape .shape-2 img {
    -webkit-animation-name: rotateMe;
    animation-name: rotateMe;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

.default-shape .shape-3 {
    position: absolute;
    left: 5%;
    bottom: 25%;
    z-index: -1;
    -webkit-animation: animationFramesOne 20s infinite linear;
    animation: animationFramesOne 20s infinite linear;
    z-index: 99
}

.default-shape .shape-4 {
    position: absolute;
    right: 10%;
    bottom: 25%;
    z-index: -1;
    -webkit-animation: animationFramesOne 20s infinite linear;
    animation: animationFramesOne 20s infinite linear;
    z-index: 99
}

.default-shape .shape-5 {
    position: absolute;
    left: 50%;
    top: 10%;
    z-index: -1;
    -webkit-animation: animationFramesOne 20s infinite linear;
    animation: animationFramesOne 20s infinite linear;
    z-index: 99
}

header.mainheader {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .2)
}

header.mainheader .toprow {
    background: #131313 none repeat scroll 0 0;
    display: inline-block;
    vertical-align: top;
    width: 100%
}

header.mainheader .toprow ul {
    float: right;
    margin: 0;
    padding: 0
}

header.mainheader .toprow ul li {
    display: inline-block;
    margin-left: 30px;
    vertical-align: top
}

header.mainheader .toprow ul li em {
    background: rgba(0, 0, 0, 0);
    display: inline-block;
    height: 36px;
    vertical-align: top;
    width: 26px
}

header.mainheader .toprow ul li:nth-child(1n) em {
    background-position: -5px -5px
}

header.mainheader .toprow ul li:nth-child(2n) em {
    background-position: -5px -12px !important
}

header.mainheader .toprow ul li:nth-child(3n) em {
    background-position: -50px -12px !important
}

header.mainheader .toprow ul li a {
    color: #fff;
    font-size: 12px;
    padding: 7px 0 0;
    display: inline-block;
    vertical-align: top
}

header.mainheader .toprow ul li.linkbtn a {
    background: #5f9d39 none repeat scroll 0 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -1px;
    padding: 7px 18px;
    text-transform: uppercase;
    transition: all .5s ease;
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

header.mainheader .toprow ul li.linkbtn a:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #276ea2;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

header.mainheader .toprow ul li.linkbtn a:active,
header.mainheader .toprow ul li.linkbtn a:focus,
header.mainheader .toprow ul li.linkbtn a:hover {
    color: #fff
}

header.mainheader .toprow ul li.linkbtn a:active:before,
header.mainheader .toprow ul li.linkbtn a:focus:before,
header.mainheader .toprow ul li.linkbtn a:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

header.mainheader .bottomrow {
    display: inline-block;
    padding: 14px 0;
    vertical-align: top;
    width: 100%
}

header.mainheader .bottomrow .logo {
    display: inline-block;
    vertical-align: top;
    width: 31%
}

a.blogxlogo {
    border-left: 1px solid #dbdbdb !important;
    display: inline-block;
    margin-left: 18px;
    padding-left: 18px;
    vertical-align: top;
    margin-top: 6px
}

header.mainheader .bottomrow .nav_menu {
    float: right;
    margin-top: 25px
}

header.mainheader .bottomrow .nav_menu ul {
    margin: 0;
    padding: 0
}

header.mainheader .bottomrow .nav_menu>ul>li {
    display: inline-block;
    padding-left: 24px;
    vertical-align: top
}

header.mainheader .bottomrow .nav_menu>ul>li>a {
    color: #5e5e5e;
    font-size: 14px;
    text-transform: uppercase
}

header.mainheader .bottomrow .nav_menu>ul>li:hover>a {
    color: #5f9d38
}

.nav_menu>ul>li>ul {
    display: none;
    position: absolute
}

.nav_menu>ul>li:hover>ul {
    display: block
}

.nav_menu>ul>li>ul>li {
    list-style: none
}

.nav_menu>ul>li>ul>li a {
    font-size: 14px;
    color: #5e5e5e
}

.nav_menu>ul>li>ul>li a:hover {
    color: #5f9d38
}

header.mainheader .menuicon {
    height: 23px;
    display: none;
    float: left;
    margin-top: 2px;
    position: absolute;
    z-index: 1;
    top: 5px;
    left: 15px
}

header.mainheader .menuicon span {
    background: #276ea2;
    height: 4px;
    display: inline-block;
    vertical-align: top;
    width: 30px;
    top: 10px;
    position: relative
}

header.mainheader .menuicon span:after,
header.mainheader .menuicon span:before {
    background-color: #276ea2;
    content: "";
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%
}

header.mainheader .menuicon span:before {
    top: -10px
}

header.mainheader .menuicon span:after {
    bottom: -10px
}

header.mainheader,
header.mainheader .bottomrow,
header.mainheader .bottomrow .logo a img,
header.mainheader.fixed .nav_menumid>ul>li {
    transition: all .5s ease-in
}

header.mainheader {
    position: static;
    z-index: 99;
    top: 0
}

header.mainheader .mainmenurow {
    border-top: solid 1px #e7e9ea;
    display: inline-block;
    vertical-align: top;
    width: 100%
}

header.mainheader .mainmenurow .menuinside>ul {
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    width: 100%
}

header.mainheader .mainmenurow .menuinside>ul>li {
    display: inline-block;
    vertical-align: top;
    width: 10%;
    font-size: 10px;
    font-weight: 600;
    position: relative;
    line-height: 13px;
    color: rgba(0, 0, 0, .6);
    float: left;
    border-left: solid 1px transparent;
    border-right: solid 1px transparent
}

header.mainheader .mainmenurow .menuinside>ul>li>a {
    display: inline-block;
    width: 100%;
    padding: 16px 10px;
    height: 75px;
    vertical-align: middle;
    color: rgba(0, 0, 0, .6);
    transition: all .5s ease-in
}

header.mainheader .mainmenurow .menuinside>ul>li>a>p {
    margin: 0;
    padding: 0;
    transition: all .5s ease-in
}

header.mainheader .mainmenurow .menuinside>ul>li>a>.icon {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    margin-bottom: 4px;
    font-size: 13px;
    color: rgba(0, 0, 0, .7);
    line-height: 15px;
    text-transform: uppercase
}

header.mainheader .mainmenurow .menuinside>ul>li>a>.icon>i {
    display: inline-block;
    vertical-align: top;
    width: 32%
}

header.mainheader .mainmenurow .menuinside>ul>li>a>.icon>em {
    vertical-align: top;
    padding-left: 3px;
    text-align: left;
    display: inline-block;
    font-style: normal;
    padding-top: 6px
}

header.mainheader .mainmenurow .menuinside>ul>li:hover {
    background: #f6f6f6;
    border-left: solid 1px #e7e9ea;
    border-right: solid 1px #e7e9ea
}

header.mainheader .mainmenurow .menuinside>ul>li:hover em {
    color: #216ea3
}

header.mainheader .mainmenurow .menuinside>ul>li.ativeop {
    opacity: .5
}

header.mainheader .mainmenurow .menuinside>ul>li .submenubl {
    position: absolute;
    left: -1px;
    top: 75px;
    background: #f6f6f6;
    width: 224px;
    padding: 20px 22px;
    z-index: 9;
    border: solid 1px #e7e9ea;
    display: inline-block;
    vertical-align: top;
    visibility: hidden;
    opacity: 0;
    transition: all .5s ease-in;
    transform: translateY(100px)
}

header.mainheader .mainmenurow .menuinside>ul>li:hover .submenubl {
    visibility: visible;
    opacity: 1;
    transform: translateY(0)
}

header.mainheader .mainmenurow .menuinside>ul>li .submenubl::before {
    content: "";
    height: 2px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    background: #f6f6f6;
    width: 73%
}

header.mainheader .mainmenurow .menuinside>ul>li .submenubl ul {
    margin: 0;
    padding: 0
}

header.mainheader .mainmenurow .menuinside>ul>li .submenubl ul li {
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    width: 100%
}

header.mainheader .mainmenurow .menuinside>ul>li .submenubl ul li a {
    font-size: 12px;
    color: #000;
    padding: 10px 0;
    display: inline-block;
    vertical-align: top
}

header.mainheader .mainmenurow .menuinside>ul>li .submenubl ul li:hover a {
    color: #216ea3
}

header.mainheader.fixed {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, .5);
    z-index: 99999
}

header.mainheader.fixed .bottomrow .logo a img {
    width: 130px
}

header.mainheader.fixed a.blogxlogo {
    margin-top: 0
}

header.mainheader.fixed .bottomrow .logo a.blogxlogo img {
    width: 51px
}

header.mainheader.fixed .bottomrow {
    padding: 6px 0
}

header.mainheader.fixed .nav_menumid>ul>li {
    font-size: 11px
}

header.mainheader.fixed .mainmenurow .menuinside>ul>li>a {
    padding: 6px 10px;
    height: 56px
}

header.mainheader.fixed .mainmenurow .menuinside>ul>li>a>.icon {
    font-size: 12px
}

header.mainheader.fixed .mainmenurow .menuinside>ul>li>a>p {
    display: none
}

header.mainheader.fixed .mainmenurow .menuinside>ul>li .submenubl {
    top: 55px
}

header.mainheader .toprow {
    height: 30px
}

header.mainheader .toprow ul li {
    line-height: 1;
    height: 30px
}

header.mainheader .toprow ul li em {
    height: 30px
}

header.mainheader {
    padding-top: 0
}

header.mainheader .custom {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2
}

header.mainheader.fixed {
    top: -45px
}

header.mainheader .toprow ul li.email::after,
header.mainheader .toprow ul li.tel::after {
    line-height: 23px !important
}

.innerslidebanner .leftcontent .mainheadertext {
    color: #fff;
    left: 35px;
    position: absolute;
    top: 40px;
    width: 364px
}

.innerslidebanner .leftcontent .mainheadertext .topheading {
    border-bottom: 1px solid #26272b;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 12px
}

.innerslidebanner .leftcontent .mainheadertext .topheading em {
    display: inline-block;
    font-size: 40px;
    font-weight: 700;
    line-height: 38px;
    vertical-align: bottom
}

.innerslidebanner .leftcontent .mainheadertext .topheading .num {
    display: inline-block;
    font-size: 170px;
    font-weight: 700;
    line-height: 124px;
    margin-right: 11px;
    vertical-align: top
}

.innerslidebanner .leftcontent .mainheadertext .topheading .righttext {
    display: inline-block;
    line-height: normal;
    vertical-align: top
}

.innerslidebanner .leftcontent .mainheadertext .topheading .righttext span {
    display: block
}

.innerslidebanner .leftcontent .mainheadertext .btheading {
    display: inline-block;
    text-transform: uppercase;
    vertical-align: top;
    width: 100%;
    margin: 0 0 15px
}

.innerslidebanner .leftcontent .mainheadertext .btheading span {
    display: inline-block;
    width: 100%;
    line-height: 1
}

.innerslidebanner .leftcontent .mainheadertext a.btntext {
    background: #fff none repeat scroll 0 0;
    color: #0d0d0d;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    margin-top: 12px;
    margin-right: 15px;
    min-width: 168px;
    padding: 9px 10px;
    text-align: center;
    vertical-align: top;
    transition: all .5s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.innerslidebanner .leftcontent .mainheadertext a.btntext:last-child {
    margin-right: 0
}

.innerslidebanner .leftcontent .mainheadertext a.btntext:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #5f9d38;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.innerslidebanner .leftcontent .mainheadertext a.btntext:hover {
    color: #fff
}

.innerslidebanner .leftcontent .mainheadertext a.btntext:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

header.mainheader .toprow ul li:nth-child(1n) em {
    background-position: inherit
}

header.mainheader .toprow ul li:nth-child(2n) em {
    background-position: -5px -12px !important
}

header.mainheader .toprow ul li:nth-child(3n) em {
    background-position: -51px -12px !important
}

header.mainheader .toprow ul li:nth-child(4n) em {
    background-position: -91px -5px !important
}

.container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto
}

.topnav {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    max-width: auto
}

.topnav a {
    float: left;
    display: block;
    color: #212121;
    text-align: left;
    padding: 10px;
    margin-left: 5px;
    text-decoration: none;
    font-size: 16px;
    -webkit-box-shadow: 0 10px 30px rgb(0 0 0 / 7%);
    box-shadow: 0 10px 30px rgb(0 0 0 / 7%);
    border-radius: 10px;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #f5d1ff
}

.topnav a span {
    float: left;
    display: block;
    text-align: center
}

.topnav a span img {
    text-align: left;
    width: 34px;
    margin-top: 8px
}

.topnav a i {
    float: left
}

.topnav a img {
    float: left
}

.topnav a:hover {
    background-color: #f5d1ff;
    color: #212121
}

.topnav a.active {
    color: #212121;
    background-color: #fff;
    border: 1px solid #f5d1ff
}

.topnav .icon {
    display: none
}

@media screen and (max-width:600px) {
    .topnav {
        overflow: hidden;
        display: inherit;
        justify-content: center;
        align-items: center;
        margin-top: 5px
    }
    .topnav a span {
        float: left;
        display: block;
        text-align: center;
        padding-left: 20px
    }
    .topnav.responsive {
        position: relative
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0
    }
    .topnav a {
        width: -moz-available
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left
    }
}

@media screen and (max-width:991px) {
    .topnav a:not(:first-child) {
        display: none
    }
    .topnav a.icon {
        float: right;
        display: block;
        margin-top: 0;
        width: auto
    }
}

@media screen and (max-width:991px) {
    .topnav.responsive {
        position: relative
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left
    }
}

@media screen and (max-width:360px) {
    .topnav a:not(:first-child) {
        display: none
    }
    .topnav a.icon {
        float: right;
        color: #813a96;
        display: block;
        margin-top: -50px;
        margin-right: 10px
    }
    .topnav a:hover {
        background-color: #fff;
        color: #813a96
    }
}

@media screen and (max-width:375px) {
    .topnav a:not(:first-child) {
        display: none
    }
    .topnav a.icon {
        float: right;
        color: #813a96;
        display: block;
        margin-top: -50px;
        margin-right: 10px
    }
    .topnav a:hover {
        background-color: #fff;
        color: #813a96
    }
    .banner-content h1{
        padding:0;
        color:#fff;
        font-size: 25px;
    }
    .list-style {
        padding-left: 20px;
         color:#fff;
        margin-bottom: 10px;
        font-size: 12px;
    }
    .fcf-label:not(:last-child) {
        margin-bottom: 0.1em;
    }
    .fcf-label {
        display: block;
        font-size: 12px;
    }
    .banner-content {
        padding: 0 0 20px 0;
    }
}

@media screen and (max-width:414px) {
    .topnav a:not(:first-child) {
        display: none
    }
    .topnav a.icon {
        float: right;
        color: #813a96;
        display: block;
        margin-top: 10px;
        margin-right: 10px
    }
    .topnav a:hover {
        background-color: #fff;
        color: #813a96
    }
}

@media screen and (max-width:1144px) {
    .topnav a:not(:first-child) {
        display: none
    }
    .topnav a.icon {
        float: right;
        color: #813a96;
        display: block
    }
    .topnav a:hover {
        background-color: #fff;
        color: #813a96
    }
}

@media screen and (max-width:1144px) {
    .topnav.responsive {
        position: relative;
        display: block;
        float: none
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
        margin-top: 0
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
        height: 55px
    }
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 999999
}

.preloader .preloader {
    width: 50px;
    height: 50px;
    display: inline-block;
    padding: 0;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px
}

.preloader .preloader span {
    background-repeat: no-repeat
}

.fria-responsive-nav {
    display: none
}

.fria-nav {
    padding-top: 0
}

.fria-nav .navbar {
    -webkit-transition: .5s;
    transition: .5s;
    padding-right: 0;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0
}

.fria-nav .navbar ul {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0
}

.fria-nav .navbar .navbar-brand {
    width: 15%
}

.fria-nav .navbar .navbar-nav {
    margin-left: auto
}

.fria-nav .navbar .navbar-nav .nav-item {
    position: relative;
    padding: 0
}

.fria-nav .navbar .navbar-nav .nav-item span {
    display: block;
    font-size: 12px;
    color: #918ac5
}

.fria-nav .navbar .navbar-nav .nav-item a {
    font-size: 14px;
    color: #fff;
    text-transform: capitalize;
    padding-left: 0;
    padding-right: 0;
    padding-top: 25px;
    padding-bottom: 25px;
    font-weight: 500;
    margin-left: 14px;
    margin-right: 14px
}

.fria-nav.home-four .navbar .navbar-nav .nav-item a {
    color: #fff !important
}

.fria-nav .navbar .navbar-nav .nav-item a:focus,
.fria-nav .navbar .navbar-nav .nav-item a:hover {
    color: #fff !important;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s
}

.fria-nav .navbar .navbar-nav .nav-item a.active {
    color: #fff !important;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s
}

.navbar-two .fria-nav .navbar .navbar-nav .nav-item a.active {
    color: #fff !important;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s
}

.navbar-one .fria-nav .navbar .navbar-nav .nav-item a.active {
    color: #fff !important;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s
}

.fria-nav .navbar .navbar-nav .nav-item a i {
    font-size: 16px;
    position: relative;
    top: 2px;
    display: inline-block;
    margin-left: 10px;
    margin-right: 0
}

.fria-nav .navbar .navbar-nav .nav-item:last-child a {
    margin-right: 0
}

.fria-nav .navbar .navbar-nav .nav-item:first-child a {
    margin-left: 0
}

.fria-nav .navbar .navbar-nav .nav-item.active a,
.fria-nav .navbar .navbar-nav .nav-item:hover a {
    -webkit-transition: .5s;
    transition: .5s;
    color: #fff
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu {
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);
    background: #e4c9ff;
    position: absolute;
    border: none;
    top: 80px;
    left: 0;
    width: 250px;
    z-index: 99;
    display: block;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    margin-top: 20px;
    padding-top: 20px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 20px
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
    text-transform: capitalize;
    padding: 8px 15px;
    margin: 0;
    position: relative;
    color: #212121 !important;
    font-size: 15.5px;
    font-weight: 400
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover {
    color: #813a96 !important;
    letter-spacing: 1px
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active::before,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus::before,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover::before {
    display: none
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
    left: -255px;
    top: 0;
    opacity: 0;
    visibility: hidden
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
    color: #212121
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover {
    color: #813a96
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
    left: 220px;
    top: 0;
    opacity: 0;
    visibility: hidden
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
    color: #212121
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover {
    color: #813a96
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
    left: -250px;
    top: 0;
    opacity: 0;
    visibility: hidden
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
    color: #212121
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover {
    color: #813a96
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
    left: -250px;
    top: 0;
    opacity: 0;
    visibility: hidden
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
    color: #212121
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover {
    color: #813a96
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
    left: -250px;
    top: 0;
    opacity: 0;
    visibility: hidden
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
    color: #212121
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover {
    color: #813a96
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
    left: -250px;
    top: 0;
    opacity: 0;
    visibility: hidden
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
    color: #212121
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover {
    color: #813a96
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
    color: #813a96
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    top: -15px
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
    color: #813a96
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    top: -15px
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
    color: #813a96
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    top: -15px
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
    color: #813a96
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    top: -15px
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li.active a {
    color: #813a96
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    top: -15px
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li.active a {
    color: #813a96
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    top: -15px
}

.fria-nav .navbar .navbar-nav .nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    top: 100%;
    margin-top: 0
}

.fria-nav .navbar .others-options {
    margin-left: 100px
}

.fria-nav .navbar .others-options .option-item {
    color: #212121;
    display: inline-block;
    position: relative;
    line-height: 1
}

.fria-nav .navbar .others-options .option-item .search-btn {
    cursor: pointer;
    -webkit-transition: .5s;
    transition: .5s;
    color: #212121;
    font-size: 20px;
    font-weight: 600
}

.fria-nav .navbar .others-options .option-item .close-btn {
    cursor: pointer;
    display: none;
    -webkit-transition: .5s;
    transition: .5s;
    width: 20px;
    color: #212121;
    font-size: 18px
}

.fria-nav .navbar .others-options .option-item .close-btn.active {
    display: block
}

.fria-nav .navbar .others-options .burger-menu {
    width: 35px;
    height: auto;
    background-color: transparent;
    margin-left: 20px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: 1px
}

.fria-nav .navbar .others-options .burger-menu span {
    display: block;
    width: 35px;
    height: 3px;
    background: #fff;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 30px;
    margin-left: auto;
    margin-bottom: 4px
}

.fria-nav .navbar .others-options .burger-menu span:nth-child(3) {
    margin-bottom: 0;
    width: 28px;
    margin-left: auto
}

.fria-nav .navbar .others-options .burger-menu:hover span {
    background: #813a96
}

.fria-nav .navbar .others-options .burger-menu:hover span:nth-child(3) {
    width: 35px
}

.fria-nav .navbar .others-options .default-btn {
    margin-left: 20px
}

.fria-nav .nav-btn {
    margin-left: 30px
}

.navbar-area.navbar-two {
    position: inherit;
    z-index: 12;
    width: 100%;
    top: 55px
}

.navbar-area.is-sticky .top-link {
    display: none
}

.top-link {
    text-align: right;
    width: 100%;
    display: block;
    list-style: none
}

.top-link li {
    display: inline-block;
    margin: 5px 15px;
    font-size: 13px
}

.top-link li a {
    color: #fff
}

.navbar-light .navbar-nav .nav-link {
    margin: 2px 0 0 2px;
    border-radius: 10px;
}

.navbar-light .navbar-nav .nav-link span {
    font-size: 12px;
    text-align: center;
    display: flex;
    padding: 0;
}

.navbar-light .navbar-nav .nav-link img {
    margin: 0 5px 0 0;
    width: 25px;
}
@media only screen and (min-width:1024px){
    .navbar-light .navbar-nav .nav-link span {
        font-size: 12px;
        text-align:center;
        display:list-item;
        padding:0 5px;
    }
    .navbar-light .navbar-nav .nav-link img {
        margin: 0 5px 0 0;
        width: 22px;
    }
    .navbar-light .navbar-nav .nav-link{padding-right:.2rem;padding-left:.2rem}
    
}

.navbg {
    background-color: #f5d1ff;
}

.navbar-light .navbar-nav .nav-link.active {
    color: #212121;
    background-color: #fff;
    border: 1px solid #f5d1ff;
    margin: 2px 0 0 2px;
    border-radius: 10px;
}

.navbar-area.navbar-two .fria-nav .navbar .others-options {
    margin-left: 0
}

.navbar-area.navbar-two .fria-nav .navbar .others-options .default-btn {
    margin-left: 20px;
    background-color: #212121
}

.navbar-area.navbar-two .fria-nav .navbar .others-options .default-btn:hover {
    background-color: #086ad8
}

.navbar-area.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 12;
   /* -webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, .09);
    box-shadow: 0 2px 28px 0 rgba(0, 0, 0, .09);**/
    /* background-color: #ffffff !important; */
    -webkit-animation: .5s ease-in-out 0s normal none 1 running fadeInDown;
    animation: .5s ease-in-out 0s normal none 1 running fadeInDown
}

.stickylogo {
    display: none
}

.navbar-area.is-sticky .fria-nav {
    padding-top: 0
}

.fria-nav.home-four .navbar .others-options .burger-menu span {
    background-color: #fff
}

.navbar-area.is-sticky .fria-nav .navbar .navbar-brand.mobile {
    display: none
}

.navbar-area.is-sticky .sticky {
    display: block
}

.sticky {
    display: none
}

.navbar-area.is-sticky .fria-nav .navbar .navbar-nav .nav-item a {
    color: #fff !important
}

.navbar-area.is-sticky .fria-nav .navbar .navbar-nav .nav-item .dropdown-menu a {
    color: #333 !important
}

.navbar-area.is-sticky .fria-nav .navbar .navbar-nav .nav-item a.active,
.navbar-area.is-sticky .fria-nav .navbar .navbar-nav .nav-item a:focus,
.navbar-area.is-sticky .fria-nav .navbar .navbar-nav .nav-item a:hover {
    color: #fff
}

.navbar-area.is-sticky .fria-nav .navbar .others-options .option-item {
    color: #fff
}

.navbar-area.is-sticky .fria-nav .navbar .others-options .option-item .search-btn {
    color: #212121
}

.navbar-area.is-sticky .fria-nav .navbar .others-options .option-item .close-btn {
    color: #212121
}

.navbar-area.is-sticky .fria-nav .navbar .others-options .burger-menu span {
    background: #fff
}

.navbar-area.is-sticky .fria-nav .navbar .others-options .burger-menu:hover span {
    background: #461853
}

.search-overlay {
    display: none
}

.search-overlay.search-popup {
    position: absolute;
    top: 100%;
    width: 300px;
    right: 0;
    background: #fff;
    z-index: 2;
    padding: 20px;
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);
    margin-top: 25px
}

.search-overlay.search-popup .search-form {
    position: relative
}

.search-overlay.search-popup .search-form .search-input {
    display: block;
    width: 100%;
    height: 50px;
    line-height: initial;
    border: 1px solid #eee;
    color: #212121;
    outline: 0;
    -webkit-transition: .5s;
    transition: .5s;
    padding-top: 4px;
    padding-left: 10px
}

.search-overlay.search-popup .search-form .search-input:focus {
    border-color: #086ad8
}

.search-overlay.search-popup .search-form .search-button {
    position: absolute;
    right: 0;
    top: 0;
    height: 50px;
    background: 0 0;
    border: none;
    width: 50px;
    outline: 0;
    color: #666;
    -webkit-transition: .5s;
    transition: .5s;
    padding: 0
}

.search-overlay.search-popup .search-form .search-button:focus,
.search-overlay.search-popup .search-form .search-button:hover {
    color: #086ad8
}

.sidebar-modal {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    overflow: hidden
}

.sidebar-modal .sidebar-modal-inner {
    position: absolute;
    right: -100%;
    top: 0;
    width: 30%;
    overflow-y: scroll;
    height: 100%;
    background-color: #fff;
    -webkit-transition: .7s;
    transition: .7s;
    z-index: 1;
    padding-top: 30px;
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 30px
}

.sidebar-modal .sidebar-modal-inner .close-btn {
    display: inline-block;
    position: absolute;
    right: 35px;
    top: 20px;
    font-size: 20px;
    -webkit-transition: .5s;
    transition: .5s;
    color: #212121;
    opacity: .66;
    cursor: pointer
}

.sidebar-modal .sidebar-modal-inner .close-btn:hover {
    opacity: 1
}

.sidebar-modal .sidebar-about-area {
    margin-bottom: 40px
}

.sidebar-modal .sidebar-about-area .title h2 {
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif
}

.sidebar-modal .sidebar-about-area .title p {
    margin-top: 15px;
    font-size: 15px
}

.sidebar-modal .sidebar-contact-feed {
    margin-bottom: 40px
}

.sidebar-modal .sidebar-contact-feed h2 {
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif
}

.sidebar-modal .sidebar-contact-feed .contact-form form .form-group {
    margin-bottom: 15px
}

.sidebar-modal .sidebar-contact-feed .contact-form form .form-control {
    height: 35px;
    padding: 0 15px;
    line-height: initial;
    color: #212121;
    background-color: transparent;
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    -webkit-transition: .5s;
    transition: .5s;
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
    font-size: 14px;
    font-weight: 400
}

.sidebar-modal .sidebar-contact-feed .contact-form form .form-control:focus {
    border-color: #086ad8
}

.sidebar-modal .sidebar-contact-feed .contact-form form .form-control::-webkit-input-placeholder {
    color: #666
}

.sidebar-modal .sidebar-contact-feed .contact-form form .form-control:-ms-input-placeholder {
    color: #666
}

.sidebar-modal .sidebar-contact-feed .contact-form form .form-control::-ms-input-placeholder {
    color: #666
}

.sidebar-modal .sidebar-contact-feed .contact-form form .form-control::placeholder {
    color: #666
}

.sidebar-modal .sidebar-contact-feed .contact-form form textarea.form-control {
    height: auto !important;
    padding-top: 15px
}

.sidebar-modal .sidebar-contact-feed .contact-form .send-btn {
    margin-top: 10px
}

.sidebar-modal .sidebar-contact-feed .contact-form .with-errors ul {
    padding-left: 0;
    list-style-type: none;
    margin-top: 5px;
    margin-bottom: 0
}

.sidebar-modal .sidebar-contact-feed .contact-form .with-errors ul li {
    color: red
}

.sidebar-modal .sidebar-contact-feed .contact-form #msgSubmit {
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 500
}

.sidebar-modal .sidebar-contact-feed .contact-form #msgSubmit.text-danger {
    margin-top: 20px !important;
    font-family: 'Noto Sans JP', sans-serif
}

.sidebar-modal .sidebar-contact-feed .contact-form .send-btn .send-btn-one {
    display: inline-block;
    padding: 10px 25px;
    background-color: #813a96;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    border-radius: 2px;
    -webkit-transition: .5s;
    transition: .5s;
    border: none
}

.sidebar-modal .sidebar-contact-feed .contact-form .send-btn .send-btn-one:hover {
    background-color: #461853;
    color: #fff
}

.sidebar-modal .sidebar-contact-area .contact-info {
    text-align: center;
    padding-top: 15px
}

.sidebar-modal .sidebar-contact-area .contact-info div {
    font-size: 13px;
    line-height: 25px
}

.sidebar-modal .sidebar-contact-area .contact-info .contact-info-content h2 {
    margin-bottom: 0;
    text-transform: lowercase;
    font-size: 20px;
    font-family: 'Noto Sans JP', sans-serif
}

.sidebar-modal .sidebar-contact-area .contact-info .contact-info-content h2 a {
    display: inline-block;
    color: #086ad8
}

.sidebar-modal .sidebar-contact-area .contact-info .contact-info-content h2 a:hover {
    color: #212121
}

.sidebar-modal .sidebar-contact-area .contact-info .contact-info-content h2 a:not(:first-child) {
    color: #212121
}

.sidebar-modal .sidebar-contact-area .contact-info .contact-info-content h2 a:not(:first-child):hover {
    color: #086ad8
}

.sidebar-modal .sidebar-contact-area .contact-info .contact-info-content h2 span {
    display: block;
    color: #666;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600
}

.sidebar-modal .sidebar-contact-area .contact-info .contact-info-content .social {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 20px
}

.sidebar-modal .sidebar-contact-area .contact-info .contact-info-content .social li {
    display: inline-block;
    margin: 0 1px;
    padding-left: 0
}

.sidebar-modal .sidebar-contact-area .contact-info .contact-info-content .social li a {
    width: 35px;
    height: 35px;
    line-height: 34px;
    border: 1px solid #dadada;
    border-radius: 50%;
    color: #aba5a5;
    display: block
}

.sidebar-modal .sidebar-contact-area .contact-info .contact-info-content .social li a i {
    font-size: 14px
}

.sidebar-modal .sidebar-contact-area .contact-info .contact-info-content .social li a:hover {
    color: #fff;
    border-color: #086ad8;
    background-color: #086ad8
}

.sidebar-modal.active {
    opacity: 1;
    visibility: visible
}

.sidebar-modal.active .sidebar-modal-inner {
    right: 0
}

@media only screen and (max-width:991px) {
    .fria-responsive-nav {
        display: block
    }
    .fria-responsive-nav .fria-responsive-menu {
        position: relative
    }
    .fria-responsive-nav .fria-responsive-menu.mean-container .mean-nav ul {
        font-size: 15px
    }
    .fria-responsive-nav .fria-responsive-menu.mean-container .mean-nav ul li a.active {
        color: #086ad8
    }
    .fria-responsive-nav .fria-responsive-menu.mean-container .mean-nav ul li a i {
        display: none
    }
    .fria-responsive-nav .fria-responsive-menu.mean-container .mean-nav ul li li a {
        font-size: 14px
    }
    .fria-responsive-nav .fria-responsive-menu.mean-container .navbar-nav {
        overflow-y: scroll;
        height: 336px;
        -webkit-box-shadow: 0 7px 13px 0 rgba(0, 0, 0, .1);
        box-shadow: 0 7px 13px 0 rgba(0, 0, 0, .1)
    }
    .fria-responsive-nav .mean-container a.meanmenu-reveal {
        color: #212121
    }
    .fria-responsive-nav .mean-container a.meanmenu-reveal span {
        background: #ffffff
    }
    .navbar-area.is-sticky .fria-responsive-nav .mean-container a.meanmenu-reveal span {
        background: #fff
    }
    .fria-responsive-nav .mean-container .others-options {
        display: none
    }
    .fria-responsive-nav .logo {
        position: relative;
        width: 100%;
    }
    .navbar-area {
        background-color: #813a96;
        padding-top: 15px;
        padding-bottom: 15px
    }
    .fria-nav {
        display: none
    }
}

.main-banner-area {
    position: relative;
    overflow: hidden
}

.home-sliders .home-item {
    position: relative;
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1
}

.home-sliders .home-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .2
}

.home-sliders .home-item.item-bg1 {
    background-image: url(../img/slide/Background.png);
    height: 900px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.home-sliders .home-item.item-bg2 {
    background-image: url(../img/Depictingrademark1.png);
    height: 900px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.home-sliders .home-item.item-bg3 {
    background-image: url(../img/PlatformofInformationStorage1.png);
    background-color: #ccc;
    height: 900px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.home-sliders .home-item.item-bg4 {
    background-image: url(../img/ServiceOperations1.png);
    background-color: #ccc;
    height: 900px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.home-sliders .home-item.item-bg5 {
    background-image: url(../img/EvolvingIntelligence1.png);
    background-color: #ccc;
    height: 900px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.home-sliders .home-item.item-bg6 {
    background-image: url(../img/TradingManifesto.png);
    height: 900px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.home-sliders .home-item .main-banner-content {
    position: relative;
    max-width: 100%;
    text-align: center
}

.home-sliders .home-item .main-banner-content h1 {
    font-size: 70px;
    color: #fff;
    margin: 5px 0 15px 0
}

.home-sliders .home-item .main-banner-content h2 {
    font-size: 25px;
    color: #fff
}

.home-sliders .home-item .main-banner-content p {
    color: #fff;
    margin-bottom: 0
}

.home-sliders .home-item .main-banner-content .banner-btn {
    margin-top: 30px
}

.home-sliders .home-item .main-banner-content .banner-btn .default-btn:hover {
    -webkit-box-shadow: unset;
    box-shadow: unset
}

.home-sliders .banner-image {
    position: absolute;
    top: 120px;
    right: -40px;
    text-align: right
}

.home-sliders .banner-image img {
    max-width: 80%;
    text-align: center
}

.home-sliders .banner-image .banner-img {
    position: absolute;
    top: 70px;
    right: 0;
    text-align: right;
    max-width: 550px
}

.home-sliders.owl-theme .owl-nav {
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s
}

.home-sliders.owl-theme .owl-nav [class*=owl-] {
    position: absolute;
    left: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #fff;
    font-size: 25px;
    margin: 0;
    padding: 0;
    background: #212121;
    border-radius: 2px;
    width: 55px;
    height: 55px;
    -webkit-transition: .5s;
    transition: .5s;
    border: none
}

.home-sliders.owl-theme .owl-nav [class*=owl-] i {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.home-sliders.owl-theme .owl-nav [class*=owl-].owl-next {
    left: auto;
    right: 20px
}

.home-sliders.owl-theme .owl-nav [class*=owl-]:hover {
    background-color: #086ad8;
    color: #fff
}

.home-sliders.owl-theme .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25px
}

.home-sliders.owl-theme .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 0 5px;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 0;
    -webkit-transform: scale(.9);
    transform: scale(.9)
}

.owl-dots:nth-child(14707) button.owl-dot::before {
    content: "test";
    color: #ffff
}

.home-sliders.owl-theme .owl-dots .owl-dot.active span,
.home-sliders.owl-theme .owl-dots .owl-dot:hover span {
    border: 2px solid #813a96
}

.home-sliders.owl-theme .owl-dots .owl-dot.active span {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.home-sliders.owl-theme:hover .owl-nav {
    opacity: 1;
    visibility: visible
}

.features-content {
    text-align: center;
    padding: 15px
}

.features-content .icon i {
    display: inline-block;
    height: 70px;
    width: 70px;
    line-height: 70px;
    background-color: #f9e6ff;
    color: #813a96;
    text-align: center;
    border-radius: 50px;
    font-size: 35px;
    margin-bottom: 15px
}

.features-content .icon.left-icon i {
    padding-left: 5px
}

.features-content h3 {
    font-size: 25px;
    margin: 16px 0 8px 0
}

.creative-content h1 {
    font-size: 35px;
    margin-bottom: 20px;
    position: relative
}

.creative-content h1::before {
    content: "";
    position: absolute
}

.creative-content h3 {
    font-size: 40px;
    margin-bottom: 10px;
    position: relative
}

.creative-content h3::before {
    content: "";
    position: absolute
}

.creative-content span {
    color: #813a96
}

.creative-content .bar {
    height: 4px;
    width: 85px;
    background: #813a96;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 30px
}

.creative-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.skill-bar {
    margin-top: 30px;
    font-family: 'Noto Sans JP', sans-serif
}

.skill-bar .progress-title-holder {
    position: relative;
    margin-bottom: 10px
}

.skill-bar .progress-title {
    font-size: 18px;
    font-weight: 600;
    color: #212121
}

.skill-bar .progress-number-wrapper {
    width: 100%;
    z-index: 10;
    font-size: 11px;
    line-height: 24px;
    height: 24px;
    letter-spacing: 0;
    font-weight: 600;
    font-style: normal;
    text-transform: none;
    color: #fff
}

.skill-bar .progress-number-mark {
    position: absolute;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 16px;
    color: #212121;
    font-weight: 500
}

.skill-bar .progress-content-outter {
    height: 6px;
    background-color: #e4e4e4;
    border-radius: 4px
}

.skill-bar .progress-content {
    height: 6px;
    background: -webkit-gradient(linear, left top, right top, from(#bcf2f5), color-stop(#b0eaf7), color-stop(#a9e0f9), color-stop(#a7d6f9), to(#abcbf6));
    background: linear-gradient(to right, #bcf2f5, #b0eaf7, #a9e0f9, #a7d6f9, #abcbf6);
    border-radius: 4px;
    width: 0%
}

.creative-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 650px
}

.creative-image img {
    display: none
}

.creative-video {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 210px;
    margin: auto
}

.creative-video .video-btn {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 60px;
    background-color: #fff;
    border-radius: 50%;
    color: #086ad8;
    position: relative;
    z-index: 1
}

.creative-video .video-btn i {
    font-size: 35px;
    position: relative;
    top: 5px;
    left: 4px
}

.creative-video .video-btn::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid #fff;
    -webkit-animation: ripple 2s linear 1s infinite;
    animation: ripple 2s linear 1s infinite
}

.creative-video .video-btn::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid #fff;
    -webkit-animation: ripple 2s linear infinite;
    animation: ripple 2s linear infinite
}

.creative-video .video-btn .video-content .video-btn:focus,
.creative-video .video-btn:hover {
    background-color: #086ad8;
    color: #fff
}

@-webkit-keyframes ripple {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    75% {
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}

@keyframes ripple {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    75% {
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}

.services {
    padding: 20px 0px;
    background: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0 2px 48px 0 rgba(0, 0, 0, .08);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s
}

.services:hover .icon:before {
    transform: rotate(45deg)
}

.services .icon {
    float: left;
    width: 100px;
    position: relative;
    text-align: center;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center
}

.services .icon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: #f6e5fb;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    transform: rotate(0);
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s
}

.services .icon img {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 50%
}

.services .text {
    float: left;
    width: calc(100% - 166px);
    padding-left: 20px
}

.services .text .services-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #0f2944;
    margin-bottom: 15px;
    letter-spacing: .8px
}

.services .text p {
    margin-bottom: 0 !important;
    font-weight: 200;
    font-size: 13px;
    text-align: justify;
    color: #6f8ba4;
    line-height: 20px !important;
    letter-spacing: .5px !important
}

@media (max-width:991px) {
    .services {
        display: block;
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
    }
    .services .icon {
        width: 100% !important;
        margin-bottom: 30px
    }
    .services .icon img {
        width: 25%
    }
    .services .icon:before {
        left: 0;
        right: 0;
        margin: auto
    }
    .services .text {
        width: 100% !important;
        padding: 0
    }
}

@media (max-width:767px) {
    .services .icon img {
        width: 25%
    }
}

.services-section {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.services-section .content {
    top: -60px;
    opacity: 1
}

.services-section .content .purple {
    background-color: #2c1a5d
}

.services-section .right .content {
    right: 60px
}

.services-section.bg-color {
    background-color: #fbfbfc;
    border-bottom: 1px solid #f3f3f3
}

.services-section.bg-background {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat
}

.services-shape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -9
}

.feature-box p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    color: #666;
    margin-top: 15px;
    text-align: center
}

.grid-border [class^=col-]:before {
    height: 100%;
    top: 0;
    left: -1px;
    border-left: 1px solid rgba(0, 0, 0, .05);
    content: '';
    position: absolute
}

.grid-border {
    border-top: 1px solid rgba(0, 0, 0, .05)
}

.grid-border [class^=col-]:after {
    width: 100%;
    height: 0;
    top: auto;
    left: 0;
    bottom: -1px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    content: '';
    position: absolute
}

.service-three__single {
    padding: 40px 10px 20px 10px;
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    position: relative;
    min-height: 235px;
    background: #fff;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.service-three__single:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease;
    -webkit-box-shadow: 0 50px 120px 0 rgba(26, 46, 85, .1);
    box-shadow: 0 50px 120px 0 rgba(26, 46, 85, .1)
}

.service-three__icon {
    width: 100%;
    text-align: center;
    margin-bottom: 15px
}

img.image-icont-width {
    width: 30px
}

.learn-content .learn-list-1 {
    padding-left: 0;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    position: relative
}

.learn-list-2 {
    margin-bottom: 0 !important
}

.service-three__icon img {
    max-width: 53px
}

.nicon {
    margin-bottom: 0
}

.nicon img {
    max-width: 80px !important
}

.feature-box.fbox-center.fbox-small .fbox-icon {
    height: 64px
}

.fbox-icon i {
    font-size: 55px;
    color: #813a96 !important
}

.col-padding {
    padding: 30px 60px
}

.technical .col-padding {
    padding: 10px 60px
}

.feature-box.fbox-center.fbox-small {
    padding-left: 0 !important;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    text-align: center
}

.single-box {
    text-align: center;
    margin-bottom: 30px;
    background-color: #fff;
    padding: 20px;
    border-radius: 0 50px;
    position: relative;
    z-index: 1;
    -webkit-transition: .5s;
    transition: .5s;
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    min-height: 100px;
    min-width: 150px
}

.single-box .icon {
    -webkit-transition: .5s;
    transition: .5s
}

.single-box .icon i {
    display: inline-block;
    height: 70px;
    width: 90px;
    line-height: 70px;
    background-color: #f0f7fd;
    text-align: center;
    font-size: 40px;
    color: #086ad8;
    border-radius: 30px 5px 30px 5px;
    -webkit-transition: .5s;
    transition: .5s;
    margin-bottom: 10px
}

.single-box .icon i.bg-deb0fe {
    background-color: #deb0fe;
    color: #fff
}

.single-box .icon i.bg-79e8e2 {
    background-color: #79e8e2;
    color: #fff
}

.single-box .icon i.bg-fcc774 {
    background-color: #fcc774;
    color: #fff
}

.single-box .icon i.bg-84b7fd {
    background-color: #84b7fd;
    color: #fff
}

.single-box .icon i.bg-fe929f {
    background-color: #fe929f;
    color: #fff
}

.single-box .icon i.bg-e879be {
    background-color: #e879be;
    color: #fff
}

.single-box .icon.bg-deb0fe {
    background-color: #deb0fe;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block
}

.single-box .icon.bg-deb0fe img {
    max-width: 50%
}

.single-box .icon.bg-79e8e2 {
    background-color: #79e8e2;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block
}

.single-box .icon.bg-79e8e2 img {
    max-width: 45%
}

.single-box .icon.bg-fcc774 {
    background-color: #fcc774;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block
}

.single-box .icon.bg-fcc774 img {
    max-width: 50%
}

.single-box .icon.bg-84b7fd {
    background-color: #84b7fd;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block
}

.single-box .icon.bg-84b7fd img {
    max-width: 50%
}

.single-box .icon.bg-fe929f {
    background-color: #fe929f;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block
}

.single-box .icon.bg-fe929f img {
    max-width: 45%
}

.single-box .icon.bg-2ab546 {
    background-color: #2ab546;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block
}

.single-box .icon.bg-2ab546 img {
    max-width: 45%
}

.single-box .icon.bg-2e1342 {
    background-color: #2e1342;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block
}

.single-box .icon.bg-2e1342 img {
    max-width: 50%
}

.single-box h3 {
    font-size: 18px;
    margin: 20px 0 10px 0;
    -webkit-transition: .5s;
    transition: .5s
}

.single-box p {
    margin-bottom: 20px;
    -webkit-transition: .5s;
    transition: .5s;
    text-align: justify
}

.single-box .read-btn {
    display: inline-block;
    margin-top: 12px;
    font-weight: 600;
    font-size: 15px
}

.single-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 0%;
    background: #00b0ee;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 0 50px
}

.single-box::before a {
    color: #fff !important
}

.single-box:hover {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
}

.single-box:hover::before {
    height: 100%;
}

.single-box:hover h3 {
    color: #fff;
}

.single-box:hover p {
    color: #fff;
}

.single-box:hover .read-btn {
    color: #fff;
}

.single-box:hover a {
    color: #fff;
}

.single-services {
    text-align: center;
    margin: 10px;
    background-color: #fff;
    padding: 30px 10px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    -webkit-transition: .5s;
    transition: .5s;
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    min-height: auto;
}

.single-services .icon {
    -webkit-transition: .5s;
    transition: .5s
}


.single-services .icon i {
    display: inline-block;
    height: 90px;
    width: 90px;
    line-height: 85px;
    background-color: #f0f7fd;
    text-align: center;
    font-size: 55px;
    color: #086ad8;
    border-radius: 30px 5px 30px 5px;
    -webkit-transition: .5s;
    transition: .5s;
    margin-bottom: 10px
}

.single-services .icon i.bg-deb0fe {
    background-color: #deb0fe;
    color: #fff
}

.single-services .icon i.bg-79e8e2 {
    background-color: #79e8e2;
    color: #fff
}

.single-services .icon i.bg-fcc774 {
    background-color: #fcc774;
    color: #fff
}

.single-services .icon i.bg-84b7fd {
    background-color: #84b7fd;
    color: #fff
}

.single-services .icon i.bg-fe929f {
    background-color: #fe929f;
    color: #fff
}

.single-services .icon i.bg-79e8e2 {
    background-color: #79e8e2;
    color: #fff
}

.online-public-forum {
    background-size: 50px;
    background-position-x: center;
    background-position-y: center
}

.google-cloud {
    background-image: url(../img/google-cloud.png);
    background-repeat: no-repeat;
    background-size: 31px;
    height: 30px;
    width: 30px;
    margin-right: 10px
}

.aws-cloud {
    background-image: url(../img/aws-cloud.png);
    background-repeat: no-repeat;
    background-size: 31px;
    height: 30px;
    width: 30px;
    margin-right: 10px
}

.azure-cloud {
    background-image: url(../img/microsoft-cloud.png);
    background-repeat: no-repeat;
    background-size: 31px;
    height: 30px;
    width: 30px;
    margin-right: 10px
}

.oracle-cloud {
    background-image: url(../img/oracle-cloud.png);
    background-repeat: no-repeat;
    background-size: 31px;
    height: 30px;
    width: 30px;
    margin-right: 10px
}

.cloud {
    background-image: url(../img/cloud1.png);
    background-repeat: no-repeat;
    background-size: 30px;
    height: 30px;
    width: 30px;
    margin-right: 10px
}

.email-marketing {
    background-image: url(../img/email-marketing.png);
    background-repeat: no-repeat;
    background-size: 50px;
    background-position-x: center;
    background-position-y: center
}

.communication-marketing {
    background-image: url(../img/communication-marketing.png);
    background-repeat: no-repeat;
    background-size: 50px;
    background-position-x: center;
    background-position-y: center
}

.sme-smo-content {
    background-image: url(../img/sme-smo-content.png);
    background-repeat: no-repeat;
    background-size: 50px;
    background-position-x: center;
    background-position-y: center
}

.google-adwords {
    background-image: url(../img/google-adwords.png);
    background-repeat: no-repeat;
    background-size: 50px;
    background-position-x: center;
    background-position-y: center
}

.web-auditing {
    background-image: url(../img/web-auditing.png);
    background-repeat: no-repeat;
    background-size: 50px;
    background-position-x: center;
    background-position-y: center
}

.single-services .icon.bg-deb0fe {
    background-color: #deb0fe;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block
}

.single-services .icon.bg-deb0fe img {
    max-width: 50%
}

.single-services .icon.bg-79e8e2 {
    background-color: #79e8e2;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block
}

.single-services .icon.bg-79e8e2 img {
    max-width: 45%
}

.single-services .icon.bg-fcc774 {
    background-color: #fcc774;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block
}

.single-services .icon.bg-fcc774 img {
    max-width: 50%
}

.single-services .icon.bg-84b7fd {
    background-color: #84b7fd;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block
}

.single-services .icon.bg-84b7fd img {
    max-width: 50%
}

.single-services .icon.bg-fe929f {
    background-color: #fe929f;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block
}

.single-services .icon.bg-fe929f img {
    max-width: 45%
}

.single-services .icon.bg-2ab546 {
    background-color: #2ab546;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block;
}

.single-services .icon.bg-2ab546 img {
    max-width: 45%;
}

.social-btns .btn,
.social-btns .btn .fa-brands,
.social-btns .btn:before {
    -webkit-transition: all .35s;
    transition: all .35s;
    -webkit-transition-timing-function: cubic-bezier(.31, -.105, .43, 1.59);
    transition-timing-function: cubic-bezier(.31, -.105, .43, 1.59);
}

.social-btns .btn:before {
    top: 90%;
    left: -110%;
}

.social-btns .btn .fa-brands {
    -webkit-transform: scale(.8);
    transform: scale(.8);
}

.social-btns .btn.facebook:before {
    background-color: #3b5998;
}

.social-btns .btn.facebook .fa-brands {
    color: #3b5998;
}

.social-btns .btn.twitter:before {
    background-color: #3cf;
}

.social-btns .btn.twitter .fa-brands {
    color: #3cf;
}

.social-btns .btn.google:before {
    background-color: #dc4a38;
}

.social-btns .btn.google .fa-brands {
    color: #dc4a38;
}

.social-btns .btn.instagram:before {
    background-color: #98409a;
}

.social-btns .btn.instagram .fa-brands {
    color: #98409a;
}

.social-btns .btn.linkedin:before {
    background-color: #1e76be;
}

.social-btns .btn.linkedin .fa-brands {
    color: #1e76be;
}

.social-btns .btn.youtube:before {
    background-color: #ec1a23;
}

.social-btns .btn.youtube .fa-brands {
    color: #ec1a23
}

.social-btns .btn.vimeo:before {
    background-color: #27b3e3;
}

.social-btns .btn.vimeo .fa-brands {
    color: #27b3e3;
}

.social-btns .btn.map:before {
    background-color: #18bd09;
}

.social-btns .btn.map .fas {
    color: #000000;
}

.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
    top: -10%;
    left: -10%
}

.social-btns .btn:focus .fa-brands,
.social-btns .btn:hover .fa-brands {
    color: #fff;
    -webkit-transform: scale(.7);
    transform: scale(.7)
}

.social-btns .btn.map:focus .fas,
.social-btns .btn.map:hover .fas {
    color: #fff;
    -webkit-transform: scale(.7);
    transform: scale(.7)
}

.single-footer-widget {
    margin-bottom: 10px
}

.single-footer-widget .social-btns {
    text-align: left
}

.social-btns {
    margin: 10px 0 0;
    font-size: 0;
    text-align: left
}

.social-btns .btn {
    display: inline-block;
    background-color: #fff;
    width: 35px;
    height: 35px;
    line-height: 30px;
    margin: 0 9px 0 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 28%;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .1);
    opacity: .99;
    padding: 0;
    border: 1px solid #eaeaea
}

.social-btns .btn:before {
    content: '';
    width: 120%;
    height: 120%;
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.social-btns .btn .fa-brands {
    font-size: 23px;
    vertical-align: middle
}

.single-services .icon.bg-2e1342 {
    background-color: #2e1342;
    color: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    display: inline-block
}

.single-services .icon.bg-2e1342 img {
    max-width: 50%
}

.single-services h3 {
    font-size: 16px;
    margin-top: 10px;
    -webkit-transition: .5s;
    transition: .5s
}

.single-services p {
    margin-bottom: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.single-services .read-btn {
    display: inline-block;
    margin-top: 12px;
    font-weight: 600;
    font-size: 15px
}

.single-services::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 0%;
    background: #00b0ee;
    border-radius: 0;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 10px
}

.single-services::before a {
    color: #fff !important
}

.single-services:hover {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11)
}

.single-services:hover::before {
    height: 100%
}

.single-services:hover h3 {
    color: #fff
}

.single-services:hover p {
    color: #fff
}

.single-services:hover .read-btn {
    color: #fff
}

.single-services:hover a {
    color: #fff
}

.single-services-two {
    text-align: center;
    margin-bottom: 30px;
    background-color: #fff;
    padding: 30px;
    border-radius: 80px;
    position: relative;
    z-index: 1;
    -webkit-transition: .5s;
    transition: .5s;
    border: 1px dashed #c77efb
}

.single-services-two .icon i {
    color: #c77efb;
    font-size: 50px;
    -webkit-transition: .5s;
    transition: .5s
}

.single-services-two h3 {
    font-size: 25px;
    margin: 10px 0 10px 0;
    -webkit-transition: .5s;
    transition: .5s
}

.single-services-two p {
    margin-bottom: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.single-services-two .read-btn {
    display: inline-block;
    margin-top: 12px;
    font-weight: 600;
    font-size: 15px
}

.single-services-two::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 0%;
    background: #c77efb;
    border-radius: 0;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 10px
}

.single-services-two:hover {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11)
}

.single-services-two:hover::before {
    height: 100%
}

.single-services-two:hover h3 {
    color: #fff
}

.single-services-two:hover p {
    color: #fff
}

.single-services-two:hover .read-btn {
    color: #fff
}

.single-services-two:hover .icon i {
    color: #fff
}

.single-services-two.bg-fc9ba7 {
    border: 1px dashed #fc9ba7
}

.single-services-two.bg-fc9ba7 .icon i {
    color: #fc9ba7
}

.single-services-two.bg-fc9ba7::before {
    background: #fc9ba7
}

.single-services-two.bg-fc9ba7:hover {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11)
}

.single-services-two.bg-fc9ba7:hover::before {
    height: 100%
}

.single-services-two.bg-fc9ba7:hover .icon i {
    color: #fff
}

.single-services-two.bg-2cdcf7 {
    border: 1px dashed #2cdcf7
}

.single-services-two.bg-2cdcf7 .icon i {
    color: #2cdcf7
}

.single-services-two.bg-2cdcf7::before {
    background: #2cdcf7
}

.single-services-two.bg-2cdcf7:hover {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11)
}

.single-services-two.bg-2cdcf7:hover::before {
    height: 100%
}

.single-services-two.bg-2cdcf7:hover .icon i {
    color: #fff
}

.single-services-two.bg-009af0 {
    border: 1px dashed #009af0
}

.single-services-two.bg-009af0 .icon i {
    color: #009af0
}

.single-services-two.bg-009af0::before {
    background: #009af0
}

.single-services-two.bg-009af0:hover {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11)
}

.single-services-two.bg-009af0:hover::before {
    height: 100%
}

.single-services-two.bg-009af0:hover .icon i {
    color: #fff
}

.single-services-two.bg-f4d62c {
    border: 1px dashed #f4d62c
}

.single-services-two.bg-f4d62c .icon i {
    color: #f4d62c
}

.single-services-two.bg-f4d62c::before {
    background: #f4d62c
}

.single-services-two.bg-f4d62c:hover {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11)
}

.single-services-two.bg-f4d62c:hover::before {
    height: 100%
}

.single-services-two.bg-f4d62c:hover .icon i {
    color: #fff
}

.single-services-two.bg-1e2d75 {
    border: 1px dashed #1e2d75
}

.single-services-two.bg-1e2d75 .icon i {
    color: #1e2d75
}

.single-services-two.bg-1e2d75::before {
    background: #1e2d75
}

.single-services-two.bg-1e2d75:hover {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11)
}

.single-services-two.bg-1e2d75:hover::before {
    height: 100%
}

.single-services-two.bg-1e2d75:hover .icon i {
    color: #fff
}

@-webkit-keyframes rotateMe {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotateMe {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes animationFramesOne {
    0% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
    20% {
        -webkit-transform: translate(73px, -1px) rotate(36deg);
        transform: translate(73px, -1px) rotate(36deg)
    }
    40% {
        -webkit-transform: translate(141px, 72px) rotate(72deg);
        transform: translate(141px, 72px) rotate(72deg)
    }
    60% {
        -webkit-transform: translate(83px, 122px) rotate(108deg);
        transform: translate(83px, 122px) rotate(108deg)
    }
    80% {
        -webkit-transform: translate(-40px, 72px) rotate(144deg);
        transform: translate(-40px, 72px) rotate(144deg)
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}

@keyframes animationFramesOne {
    0% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
    20% {
        -webkit-transform: translate(73px, -1px) rotate(36deg);
        transform: translate(73px, -1px) rotate(36deg)
    }
    40% {
        -webkit-transform: translate(141px, 72px) rotate(72deg);
        transform: translate(141px, 72px) rotate(72deg)
    }
    60% {
        -webkit-transform: translate(83px, 122px) rotate(108deg);
        transform: translate(83px, 122px) rotate(108deg)
    }
    80% {
        -webkit-transform: translate(-40px, 72px) rotate(144deg);
        transform: translate(-40px, 72px) rotate(144deg)
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}

@-webkit-keyframes animationFramesTwo {
    0% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
    20% {
        -webkit-transform: translate(-73px, 1px) rotate(-36deg);
        transform: translate(-73px, 1px) rotate(-36deg)
    }
    40% {
        -webkit-transform: translate(-141px, -72px) rotate(-72deg);
        transform: translate(-141px, -72px) rotate(-72deg)
    }
    60% {
        -webkit-transform: translate(-83px, -122px) rotate(-108deg);
        transform: translate(-83px, -122px) rotate(-108deg)
    }
    80% {
        -webkit-transform: translate(40px, -72px) rotate(-144deg);
        transform: translate(40px, -72px) rotate(-144deg)
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}

@keyframes animationFramesTwo {
    0% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
    20% {
        -webkit-transform: translate(-73px, 1px) rotate(-36deg);
        transform: translate(-73px, 1px) rotate(-36deg)
    }
    40% {
        -webkit-transform: translate(-141px, -72px) rotate(-72deg);
        transform: translate(-141px, -72px) rotate(-72deg)
    }
    60% {
        -webkit-transform: translate(-83px, -122px) rotate(-108deg);
        transform: translate(-83px, -122px) rotate(-108deg)
    }
    80% {
        -webkit-transform: translate(40px, -72px) rotate(-144deg);
        transform: translate(40px, -72px) rotate(-144deg)
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}

@-webkit-keyframes rotate3d {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0)
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg)
    }
}

@keyframes rotate3d {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0)
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg)
    }
}

@-webkit-keyframes moveScale {
    0% {
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }
    50% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
    100% {
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }
}

@keyframes moveScale {
    0% {
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }
    50% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
    100% {
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }
}

@-webkit-keyframes moveLeftBounce {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    50% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes moveLeftBounce {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    50% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes moveBounce {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes moveBounce {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.development-text h3 {
    font-size: 40px;
    margin-bottom: 5px;
    position: relative
}

.development-text h3::before {
    content: "";
    position: absolute
}

.development-text span {
    color: #813a96
}

.development-text .bar {
    height: 4px;
    width: 85px;
    background: #813a96;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 5px
}

.development-text .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.development-content {
    position: relative;
    margin-top: 30px
}

.img-margin {
	width: 336px;
    float: right;
    margin: -54px 0 37px 88px;
    height: 215px;
}
.development-content .icon {
    position: absolute;
    left: 0
}

.icon .flaticon-cloud {
    line-height: 74px !important
}

.tabs .flaticon-cloud1 {
    line-height: 100px !important;
    font-size: 80px !important
}

.coud_tabs .flaticon-cloud1 {
    line-height: 100px !important;
    font-size: 80px !important
}

.development-content .icon i {
    display: inline-block;
    height: 70px;
    width: 70px;
    line-height: 70px;
    background-color: #e5c2fe;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    font-size: 40px
}

.development-content .icon.bg-05dbcf i {
    background-color: #05dbcf
}

.development-content .icon.bg-fec66f i {
    background-color: #fec66f
}

.development-content .icon.bg-66a6ff i {
    background-color: #66a6ff
}

.development-content span {
    color: #086ad8
}

.development-content h3 {
    font-size: 22px;
    margin-bottom: 8px
}

.video-section {
    background-image: url(../img/video-bg.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 30px;
    padding-bottom: 60px;
    height: 450px
}

.video-content {
    text-align: center;
    position: relative
}

.video-content video{
    width:100%;
    height: auto;
}

.video-content .video-btn {
    display: inline-block;
    width: 90px;
    height: 90px;
    line-height: 100px;
    background-color: #461853;
    border-radius: 50%;
    color: #fff;
    position: relative;
    z-index: 1
}

.video-content .video-btn i {
    font-size: 30px;
    position: relative;
    top: 2px;
    left: 4px
}

.video-content .video-btn::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid "Open Sans", sans-serif;
    -webkit-animation: ripple 2s linear 1s infinite;
    animation: ripple 2s linear 1s infinite
}

.video-content .video-btn::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid #461853;
    -webkit-animation: ripple 2s linear infinite;
    animation: ripple 2s linear infinite
}

.video-content .video-btn .video-content .video-btn:focus,
.video-content .video-btn:hover {
    background-color: #fff;
    color: #461853
}

.video-section .section-title h2 {
    color: #fff
}

@keyframes ripple {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    75% {
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}

.choose-content {
    position: relative;
    margin-top: 10px;
    padding: 0 0 0 80px;
    background-color: #f5f9fd;
    border-radius: 50px;
    -webkit-transition: .5s;
    transition: .5s;
    z-index: 1;
    min-height: 70px;
    display: flex;
    vertical-align: middle;
    align-items: center
}

.choose-content .icon {
    position: absolute;
    left: 5px;
    -webkit-transition: .5s;
    transition: .5s
}

.choose-content .icon i {
    display: inline-block;
    height: 60px;
    width: 60px;
    line-height: 50px;
    background-color: #086ad8;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    font-size: 35px;
    -webkit-transition: .5s;
    transition: .5s
}

.choose-content .icon i.bg-79e8e2 {
    background-color: #79e8e2
}

.choose-content .icon i.bg-fcc774 {
    background-color: #fcc774
}

.choose-content .icon i.bg-84b7fd {
    background-color: #84b7fd
}

.choose-content .icon i.bg-fe929f {
    background-color: #fe929f
}

.choose-content h5 {
    font-size: 18px;
    margin-bottom: 8px;
    -webkit-transition: .5s;
    transition: .5s;
    line-height: 25px
}

.choose-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 0%;
    height: 100%;
    background: #11a4cf;
    border-radius: 0;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 50px
}

.choose-content:hover {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11)
}

.choose-content:hover h5 {
    color: #fff
}

.choose-content:hover::before {
    width: 100%
}

.choose-content:hover h3 {
    color: #fff
}

.choose-content:hover p {
    color: #fff;
    -webkit-transition: .5s;
    transition: .5s
}

.choose-content:hover .icon i {
    background-color: #fff;
    color: #086ad8
}

.choose-text {
    position: relative;
    padding-left: 88px;
    margin-bottom: 30px
}

.choose-text .icon {
    position: absolute;
    top: 0;
    left: 0
}

.choose-text .icon i {
    display: inline-block;
    height: 70px;
    width: 70px;
    background: -webkit-gradient(linear, left top, right top, from(#85edfe), color-stop(#6ee0ff), color-stop(#60d2ff), color-stop(#5fc2ff), to(#6bb1ff));
    background: linear-gradient(to right, #85edfe, #6ee0ff, #60d2ff, #5fc2ff, #6bb1ff);
    line-height: 70px;
    border-radius: 50px;
    color: #fff;
    font-size: 30px;
    text-align: center
}

.choose-text h3 {
    font-size: 25px;
    margin-bottom: 10px
}

.aiicons {
    padding: 20px;
    margin-top: 10px
}

.aiicons .image {
    text-align: center;
    max-width: 100%;
    height: auto
}

.aiicons img {
    max-width: 35%;
    height: auto
}

.aiicons .text {
    text-align: center;
    padding-top: 20px
}

.aibut.active h5,
.aibut:hover h5 {
    color: #8a2be2
}

.aibut:after {
    background: #f7fafd
}

.aibut.active:after,
.aibut:hover:after {
    color: #8a2be2
}

.single-projects {
    position: relative;
    margin-bottom: 30px;
    text-align: center
}

.single-projects.two {
    margin-bottom: 0
}

.single-projects::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #086ad8;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s
}

.single-projects .projects-content {
    position: absolute;
    left: 0;
    top: 55%;
    -webkit-transform: translateY(-55%);
    transform: translateY(-55%);
    text-align: center;
    right: 0;
    color: #fff;
    margin-top: 0;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s
}

.single-projects .projects-content:hover {
    text-decoration: none
}

.single-projects .projects-content h3 {
    color: #fff;
    font-size: 24px;
    -webkit-transition: .5s;
    transition: .5s;
    margin-bottom: 5px
}

.single-projects .projects-content span {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    -webkit-transition: .5s;
    transition: .5s
}

.single-projects:focus::before,
.single-projects:hover::before {
    opacity: .8;
    visibility: visible
}

.single-projects:focus .projects-content,
.single-projects:hover .projects-content {
    opacity: 1;
    visibility: visible;
    margin-top: -15px
}

.single-projects .projects-image img {
    width: 100%
}

.clients-section.bg-background {
    background-image: url(../img/testimonials-bg.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat
}

.section-title h1 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 35px;
    margin-bottom: 20px
}

.clients-section.bg-background .section-title h2 {
    color: #fff
}

.clients-section.bg-background .section-title p {
    color: #fff
}

.clients-section.bg-background .clients-slider .clients-item p {
    color: #fff
}

.clients-section.bg-background .clients-slider .clients-item .clients-content h3 {
    color: #fff
}

.clients-section.bg-background .clients-slider .clients-item .clients-content span {
    color: #fff
}

.clients-slider .clients-item {
    text-align: center
}

.clients-slider .clients-item .icon img {
    position: absolute;
    height: 100px;
    width: 100px;
    line-height: 80px;
    background-color: #086ad8;
    color: #fff;
    font-size: 40px;
    border-radius: 50px
}

.clients-slider .clients-item .icon h3 {
    position: absolute;
    color: #fff;
    font-size: 25px;
    margin-top: 100px;
    text-align: center
}

.clients-slider .clients-item p {
    font-style: italic;
    max-width: 100%;
    margin: 20px 15px 15px 120px
}

.clients-slider .clients-item .clients-content {
    margin-top: 10px;
    position: relative
}

.clients-slider .clients-item .clients-content::before {
    position: absolute
}

.clients-slider .clients-item .clients-content h3 {
    font-size: 25px
}

.clients-slider .clients-item .clients-content span {
    font-weight: 500;
    font-size: 15px
}

.clients-slider.owl-theme .owl-dots .owl-dot span {
    width: 13px;
    height: 13px;
    margin: 0 5px;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 50%;
    -webkit-transform: scale(.9);
    transform: scale(.9)
}

.clients-slider.owl-theme .owl-dots .owl-dot.active span,
.clients-slider.owl-theme .owl-dots .owl-dot:hover span {
    background-color: #813a96
}

.clients-slider.owl-theme .owl-dots .owl-dot.active span {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.clients-slider.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 20px
}

.clients-slider .clients-item .icon img {
    position: absolute;
    height: 100px;
    width: 100px;
    line-height: 80px;
    background-color: #086ad8;
    color: #fff;
    font-size: 40px;
    border-radius: 50px
}

.single-blog {
    margin-bottom: 30px
}

.single-blog .content {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    padding: 25px;
    -webkit-transition: .5s;
    transition: .5s
}

.single-blog .content span {
    font-size: 14px;
    color: #086ad8
}

.single-blog .content h3 {
    font-size: 22px;
    margin: 10px 0 6px 0;
    line-height: 1.5
}

.single-blog .content .read-more {
    font-size: 15px;
    font-weight: 600
}

.single-blog:hover h3 a {
    color: #086ad8
}

.single-blog:hover .read-more {
    color: #086ad8;
    letter-spacing: 1px
}

.work-section.bg-f6f6fe {
    background-color: #f6f6fe
}

.work-content {
    max-width: 550px;
    margin-left: auto
}

.work-content h3 {
    font-size: 36px
}

.work-content span {
    color: #086ad8
}

.work-content p {
    margin-bottom: 0
}

.work-content h4 {
    font-size: 25px;
    margin: 6px 0 8px 0
}

.work-content .work-status {
    position: relative;
    margin-top: 20px
}

.work-content .work-status h3 {
    margin-bottom: 0;
    line-height: 1;
    font-size: 50px;
    color: #086ad8
}

.work-content .work-status h3 .sign-icon {
    display: inline-block;
    font-size: 46px;
    position: absolute;
    top: 6px
}

.work-content .work-status p {
    margin: 0
}

.work-image img {
    display: none
}

.work-video {
    text-align: center;
    position: absolute;
    left: -25px;
    bottom: 210px;
    margin: auto
}

.work-video .video-btn {
    display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 82px;
    background-color: #086ad8;
    border-radius: 50%;
    color: #086ad8;
    position: relative;
    z-index: 1
}

.work-video .video-btn i {
    font-size: 35px;
    position: relative;
    top: 5px;
    left: 4px;
    color: #fff
}

.work-video .video-btn::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid #086ad8;
    -webkit-animation: ripple 2s linear 1s infinite;
    animation: ripple 2s linear 1s infinite
}

.work-video .video-btn::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid #086ad8;
    -webkit-animation: ripple 2s linear infinite;
    animation: ripple 2s linear infinite
}

.work-video .video-btn .video-content .video-btn:focus,
.work-video .video-btn:hover {
    background-color: #086ad8;
    color: #086ad8
}

.support-content {
    position: relative;
    margin-bottom: 30px;
    padding-left: 65px
}

.support-content:last-child {
    margin-bottom: 0
}

.support-content .icon {
    position: absolute;
    left: 0;
    top: 0
}

.support-content .icon i {
    font-size: 50px;
    color: #086ad8
}

.support-content h3 {
    font-size: 25px;
    margin: 0 0 4px 0
}

.overview-section {
    background: url(../img/cloud-platformbg.webp);
    position: relative;
    z-index: 1;
    overflow: hidden
}

.overview-content {
    text-align: center;
    margin-bottom: 0
}

.overview-content .icon {
    display: inline-block;
    height: 100px;
    width: 100px;
    background-color: #fff;
    line-height: 90px;
    border-radius: 50px;
    border: 1px dashed #086ad8
}

.overview-content .icon img {
    max-width: 80%
}

.overview-content .icon i {
    display: inline-block;
    height: 80px;
    width: 80px;
    background: -webkit-gradient(linear, left top, right top, from(#85edfe), color-stop(#6ee0ff), color-stop(#60d2ff), color-stop(#5fc2ff), to(#6bb1ff));
    background: linear-gradient(to right, #85edfe, #6ee0ff, #60d2ff, #5fc2ff, #6bb1ff);
    line-height: 80px;
    border-radius: 50px;
    color: #fff;
    font-size: 30px
}

.overview-content h3 {
    margin: 14px 0 10px 0;
    font-size: 30px
	color:#fff !important;
}

.overview-content p {
    margin-bottom: 0;
    text-align: center
}

.fun-facts-area {
    position: relative;
    background-image: url(../img/counter-bg.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1
}

.single-fun-fact {
    text-align: center;
    position: relative;
    margin-bottom: 30px;
    background-color: #fff;
    padding: 35px;
    border-radius: 10px
}

.single-fun-fact h3 {
    margin-top: 15px;
    margin-bottom: 0;
    line-height: 1;
    font-size: 50px
}

.single-fun-fact p {
    margin: 0;
    font-size: 16px;
    font-weight: 500
}

.single-fun-fact .icon i {
    display: inline-block;
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    background-color: #e2edfd;
    color: #086ad8;
    font-size: 30px;
    border-radius: 50px
}

.team-section {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.single-team {
    margin-bottom: 30px;
    -webkit-transition: .5s;
    transition: .5s;
    position: relative
}

.single-team .content {
    background-color: #fff;
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    padding: 20px;
    max-width: 300px;
    margin: -80px auto 0;
    text-align: center;
    position: relative;
    z-index: 1;
    -webkit-transition: .5s;
    transition: .5s
}

.single-team .content h3 {
    font-size: 22px;
    margin-bottom: 6px
}

.single-team .content span {
    font-size: 15px;
    font-weight: 500
}

.single-team .content .social {
    padding-left: 0;
    margin-bottom: 0;
    margin-top: -40px;
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.single-team .content .social li {
    list-style-type: none;
    display: inline-block;
    margin-right: 10px
}

.single-team .content .social li:last-child {
    margin-right: 0
}

.single-team .content .social i {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    background-color: #086ad8;
    color: #fff;
    font-size: 14px;
    border-radius: 30px;
    -webkit-transition: .5s;
    transition: .5s
}

.single-team .content .social i:hover {
    background-color: #10dce8
}

.single-team:hover .content .social {
    margin-top: 15px;
    opacity: 1
}

.team-item {
    text-align: center;
    margin-bottom: 30px;
    position: relative
}

.team-item .image {
    position: relative;
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s
}

.team-item .image .social {
    padding-left: 0;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0
}

.team-item .image .social li {
    display: inline-block;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
    opacity: 0;
    visibility: hidden;
    margin-left: 1px;
    margin-right: 1px
}

.team-item .image .social li a {
    display: block;
    width: 40px;
    height: 40px;
    background-color: #086ad8;
    text-align: center;
    position: relative;
    font-size: 20px;
    color: #fff;
    border-radius: 30px;
    -webkit-transition: .5s;
    transition: .5s
}

.team-item .image .social li a i {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto
}

.team-item .image .social li a:hover {
    color: #fff;
    background-color: #10dce8
}

.team-item .image .social li:nth-child(1) {
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

.team-item .image .social li:nth-child(2) {
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.team-item .image .social li:nth-child(3) {
    -webkit-transition-delay: .4s;
    transition-delay: .4s
}

.team-item .image .social li:nth-child(4) {
    -webkit-transition-delay: .5s;
    transition-delay: .5s
}

.team-item .content {
    background-color: #fff;
    -webkit-box-shadow: 1px 20px 30px rgba(0, 0, 0, .07);
    box-shadow: 1px 20px 30px rgba(0, 0, 0, .07);
    padding: 30px
}

.team-item .content h3 {
    margin-bottom: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 25px
}

.team-item .content span {
    display: block;
    color: #086ad8;
    font-size: 14px;
    margin-top: 6px
}

.team-item:hover .image .social li {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    visibility: visible
}

.skills-section {
    overflow: hidden
}

.skills-image img {
    display: none
}

.skills-area {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    background-color: #fff;
    padding: 50px;
    margin-left: -200px;
    margin-right: 200px
}

.skills-area .skills-content h3 {
    font-size: 40px;
    margin-bottom: 16px;
    position: relative
}

.skills-area .skills-content h3::before {
    content: "";
    position: absolute
}

.skills-area .skills-content span {
    color: #086ad8
}

.skills-area .skills-content .bar {
    height: 4px;
    width: 85px;
    background: #086ad8;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.skills-area .skills-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.skills-area .skill-bar {
    margin-top: 30px;
    font-family: 'Noto Sans JP', sans-serif
}

.skills-area .skill-bar .progress-title-holder {
    position: relative;
    margin-bottom: 10px
}

.skills-area .skill-bar .progress-title {
    font-size: 18px;
    font-weight: 600;
    color: #212121
}

.skills-area .skill-bar .progress-number-wrapper {
    width: 100%;
    z-index: 10;
    font-size: 11px;
    line-height: 24px;
    height: 24px;
    letter-spacing: 0;
    font-weight: 600;
    font-style: normal;
    text-transform: none;
    color: #fff
}

.skills-area .skill-bar .progress-number-mark {
    position: absolute;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 16px;
    color: #212121;
    font-weight: 500
}

.skills-area .skill-bar .progress-content-outter {
    height: 6px;
    background-color: #e4e4e4;
    border-radius: 4px
}

.skills-area .skill-bar .progress-content {
    height: 6px;
    background: -webkit-gradient(linear, left top, right top, from(#bcf2f5), color-stop(#b0eaf7), color-stop(#a9e0f9), color-stop(#a7d6f9), to(#abcbf6));
    background: linear-gradient(to right, #bcf2f5, #b0eaf7, #a9e0f9, #a7d6f9, #abcbf6);
    border-radius: 4px;
    width: 0%
}

.audience-section {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.audience-content h3 {
    font-size: 40px;
    margin-bottom: 16px;
    position: relative
}

.audience-content h3::before {
    content: "";
    position: absolute
}

.audience-content span {
    color: #086ad8
}

.audience-content .bar {
    height: 4px;
    width: 85px;
    background: #086ad8;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.audience-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.audience-content .audience-btn {
    margin-top: 25px
}

.solutions-content-area {
    max-width: 535px;
    margin-left: auto
}

.solutions-content-area .solutions-content h3 {
    font-size: 40px;
    margin-bottom: 16px;
    position: relative
}

.solutions-content-area .solutions-content h3::before {
    content: "";
    position: absolute
}

.solutions-content-area .solutions-content span {
    color: #086ad8
}

.solutions-content-area .solutions-content .bar {
    height: 4px;
    width: 85px;
    background: #086ad8;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.solutions-content-area .solutions-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.solutions-content-area .solutions-content .audience-btn {
    margin-top: 25px
}

.solutions-content-area .solutions-details {
    margin-top: 30px;
    position: relative;
    padding-left: 85px
}

.solutions-content-area .solutions-details .icon {
    position: absolute;
    left: 0;
    top: 0
}

.solutions-content-area .solutions-details .icon i {
    display: inline-block;
    height: 70px;
    width: 70px;
    line-height: 70px;
    background-color: #f2e4fc;
    color: #b45df5;
    text-align: center;
    font-size: 32px;
    border-radius: 50px
}

.solutions-content-area .solutions-details .icon.bg-d3fbf9 i {
    background-color: #d3fbf9;
    color: #4ee8df
}

.solutions-content-area .solutions-details .icon.bg-fce8c9 i {
    background-color: #fce8c9;
    color: #f7b042
}

.solutions-content-area .solutions-details .icon.bg-d5e6fe i {
    background-color: #d5e6fe;
    color: #7fb4ff
}

.solutions-content-area .solutions-details h3 {
    font-size: 22px;
    margin: 0 0 8px 0
}

.solutions-content-area .solutions-details p {
    margin-bottom: 0;
    font-size: 14px
}

.solutions-image img {
    display: none
}

.design-section {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.design-content h3 {
    font-size: 40px;
    margin-bottom: 16px
}

.design-content span {
    color: #086ad8
}

.design-content p {
    margin-bottom: 0
}

.design-content .bar {
    height: 4px;
    width: 85px;
    background: #086ad8;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.design-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.design-content .design-list {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 0;
    margin-left: -10px;
    margin-right: -10px
}

.design-content .design-list li {
    -ms-flex: 0 0 50%;
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%;
    margin-top: 30px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
    color: #212121;
    font-weight: 600
}

.design-content .design-list i {
    color: #086ad8;
    display: inline-block;
    height: 25px;
    width: 25px;
    line-height: 25px;
    background-color: #d7f2fc;
    text-align: center;
    margin-right: 5px
}

.counter-section {
    background-color: #eceefe
}

.single-counter {
    text-align: center;
    position: relative;
    margin-bottom: 30px;
    background-color: #fff;
    padding: 35px;
    border-radius: 10px;
    -webkit-transition: .5s;
    transition: .5s;
    z-index: 1;
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11)
}

.single-counter h3 {
    margin-top: 15px;
    margin-bottom: 0;
    line-height: 1;
    font-size: 50px;
    -webkit-transition: .5s;
    transition: .5s
}

.single-counter p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    -webkit-transition: .5s;
    transition: .5s
}

.single-counter .icon i {
    display: inline-block;
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    background-color: #e2edfd;
    color: #086ad8;
    font-size: 30px;
    border-radius: 50px
}

.single-counter::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 0%;
    background: #086ad8;
    border-radius: 0;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 10px
}

.single-counter:hover::before {
    height: 100%
}

.single-counter:hover h3 {
    color: #fff
}

.single-counter:hover p {
    color: #fff
}

.pricing-section {
    background-color: #faf9ff;
    position: relative;
    z-index: 1;
    overflow: hidden
}

.single-pricing {
    background-color: #c2f2fd;
    padding: 50px 90px;
    text-align: center;
    margin-bottom: 30px;
    border-radius: 50px 4px 50px 4px
}

.single-pricing .pricing-header h3 {
    font-size: 25px;
    color: #000;
    margin-bottom: 0
}

.single-pricing .pricing-header p {
    color: #000;
    font-weight: 500
}

.single-pricing .price {
    display: inline-block;
    height: 100px;
    width: 100px;
    line-height: 100px;
    background-color: #fff;
    font-size: 25px;
    border-radius: 50px;
    margin-top: 16px;
    margin-bottom: 16px;
    font-weight: 700
}

.single-pricing .price sup {
    font-weight: 400
}

.single-pricing .price sub {
    font-weight: 400
}

.single-pricing .pricing-list {
    padding-left: 0;
    margin-bottom: 0;
    text-align: left
}

.single-pricing .pricing-list li {
    list-style-type: none;
    padding-bottom: 12px;
    font-size: 16px;
    color: #212121;
    font-weight: 500
}

.single-pricing .pricing-list li:last-child {
    padding-bottom: 0
}

.single-pricing .pricing-list i {
    color: #086ad8;
    margin-right: 5px
}

.single-pricing .price-btn {
    margin-top: 25px
}

.single-pricing .price-btn .default-btn {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    padding: 12px 30px;
    display: inline-block;
    background-color: #fff;
    color: #212121;
    font-weight: 600;
    border-radius: 30px
}

.single-pricing:hover .price-btn .default-btn {
    background-color: #086ad8;
    color: #fff
}

.protfolio-section.bg-color {
    background-color: #f2f0fe
}

.single-protfolio {
    margin-bottom: 30px;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 10px 10px 0 0
}

.single-protfolio .content {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    padding: 30px;
    -webkit-transition: .5s;
    transition: .5s
}

.tab-image-width img {
    width: 75%
}

.single-protfolio .content h3 {
    font-size: 25px;
    margin-bottom: 5px
}

.single-protfolio .content span {
    font-weight: 600
}

.single-protfolio:hover {
    background-color: #086ad8
}

.single-protfolio:hover h3 {
    color: #fff
}

.single-protfolio:hover span {
    color: #fff
}

.process-content {
    background-color: #f5f6fe;
    padding: 30px;
    margin-bottom: 30px
}

.process-content .number {
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #086ad8;
    color: #fff;
    border-radius: 30px
}

.process-content h3 {
    font-size: 28px;
    margin-bottom: 0;
    margin-top: 10px
}

.process-content .content {
    margin-top: 30px
}

.process-content .content h4 {
    font-size: 25px;
    margin-bottom: 5px;
    margin-top: 0
}

.process-content .image {
    margin-top: 20px
}

.tab-image {
    float: right;
    width: 35%
}

.tab .tabs_item {
    display: none
}

.tab .tabs_item:first-child {
    display: block
}

.about-section p {
    line-height: 1.5;
    z-index: 0;
}

.about-tab {
    margin-left: 10px
}

.about-tab-1 {
    padding-bottom: 20px
}

/*.about-tab h1 {
    font-size: 30px
}**/

.about-tab h2 {
    font-size: 38px;
    margin: 0 0 5px 0
}

.section-title h3 {
    font-size: 1.75rem;
    margin: 0 0 12px 0;
    position: relative;
    line-height: 1
}

.about-tab .bar {
    height: 4px;
    width: 85px;
    background: #813a96;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.about-tab .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.about-tab .about-list-tab .tabs {
    border-bottom: 1px solid #eee;
    padding-left: 0;
    margin-bottom: 10px;
    margin-top: 25px
}

.about-tab .about-list-tab .tabs li {
    padding: 0;
    margin-right: 30px;
    padding-bottom: 10px;
    display: inline-block
}

.about-tab .about-list-tab .tabs li.current {
    border-bottom: 2px solid #813a96
}

.about-tab .about-list-tab .tabs li.current a {
    color: #813a96
}

.about-tab .about-list-tab .tabs li a {
    position: relative
}

.about-tab .about-list-tab .tab_content .tabs_item .text h3 {
    font-size: 20px;
    margin-bottom: 0
}

.about-tab .about-list-tab .tab_content .tabs_item .list {
    padding-left: 0;
    margin-top: 10px;
    margin-bottom: 0
}

.about-tab .about-list-tab .tab_content .tabs_item .list li {
    list-style-type: none;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    list-style-image: url(../img/icon-image.webp);
    margin-left: 20px;
    color: #000;
}

.about-tab .about-list-tab .tab_content .tabs_item .list li:last-child {
    margin-bottom: 0
}

.about-tab .about-list-tab .tab_content .tabs_item .list i {
    color: #813a96;
    margin-right: 5px
}

.about-tab .about-list-tab .tab_content .tabs_item p {
    margin-bottom: 0
}

.about-tab .about-list-tab .tab_content .tabs_item .default-btn {
    margin-top: 30px
}

.about-image-2 {
    background-image: url(../img/about/about4.png);
    background-size: cover;
    background-position: center center;
    height: 100%
}

.about-image-2 img {
    display: block !important
}

::placeholder {
    font-size: 12px
}

label {
    font-weight: 500
}

.about-image-3 {
    background-image: url(../img/about/about4.png);
    background-size: cover;
    background-position: center center;
    height: 100%
}

.at-image {
    background: 0 0;
    background-size: cover;
    background-position: center center;
    height: 100%
}

.at-image-2 img {
    display: block
}

.at-image-3 img {
    display: block
}

.at-image-4 img {
    display: block
}

.at-image-5 img {
    display: block
}

.mt-20 {
    margin-top: 20px
}

.at-image-1 img {
    display: block
}

.at-image img {
    display: block
}

.about-image-1 img {
    display: block
}

.tab-image-width-1 img {
    width: 60%
}

.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active {
    color: #813a96 !important;
    letter-spacing: 1px
}

.review-content h3 {
    font-size: 40px;
    margin-bottom: 16px;
    position: relative
}

.review-content h3::before {
    content: "";
    position: absolute
}

.review-content span {
    color: #086ad8
}

.review-content p {
    margin-bottom: 0
}

.review-content .bar {
    height: 4px;
    width: 85px;
    background: #086ad8;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.review-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.review-text {
    position: relative;
    margin-top: 30px;
    padding-left: 35px
}

.review-text .icon {
    position: absolute;
    left: 0;
    top: 0
}

.review-text .icon i {
    font-size: 20px;
    color: #086ad8
}

.review-text h3 {
    font-size: 25px
}

.subscribe-inner-area::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
    height: 100%;
    background-color: #086ad8;
    opacity: .8
}

.subscribe-inner-text {
    text-align: center
}

.subscribe-inner-text h2 {
    color: #fff;
    max-width: 700px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: 40px
}

.subscribe-inner-text p {
    color: #fff
}

.subscribe-inner-text .newsletter-form {
    max-width: 550px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35px
}

.subscribe-inner-text .newsletter-form .input-newsletter {
    display: block;
    width: 100%;
    background-color: #fff;
    border: none;
    height: 65px;
    padding-left: 25px;
    border-radius: 70px;
    padding-top: 5px;
    outline: 0;
    color: #212121
}

.subscribe-inner-text .newsletter-form button {
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: #212121;
    color: #fff;
    border: none;
    height: 55px;
    padding: 0 30px;
    border-radius: 70px;
    -webkit-transition: .5s;
    transition: .5s;
    line-height: 55px;
    font-size: 15px;
    font-weight: 700
}

.subscribe-inner-text .newsletter-form button:hover {
    background-color: #086ad8;
    color: #fff
}

.subscribe-inner-text .newsletter-form #validator-newsletter {
    color: red;
    margin-top: 15px
}

.faq-accordion .accordion {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0
}

.faq-accordion .accordion .accordion-item {
    border-radius: 5px;
    display: block;
    margin-bottom: 15px;
    background-color: #f7f5fd;
    padding: 25px
}

.faq-accordion .accordion .accordion-item:last-child {
    margin-bottom: 0
}

.faq-accordion .accordion .accordion-title {
    padding: 0 60px 0 0;
    color: #212121;
    text-decoration: none;
    position: relative;
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px;
    font-weight: 600
}

.faq-accordion .accordion .accordion-title i {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 25px;
    -webkit-transition: .5s;
    transition: .5s
}

.faq-accordion .accordion .accordion-title.active {
    color: #212121
}

.faq-accordion .accordion .accordion-title.active i {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.faq-accordion .accordion .accordion-content {
    display: none;
    position: relative;
    margin-top: 10px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0
}

.faq-accordion .accordion .accordion-content.show {
    display: block
}

.faq-accordion .accordion .accordion-content ul {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0
}

.faq-accordion .accordion .accordion-content ul li {
    /*color: #10dce8;*/
    position: relative;
    margin-bottom: 12px;
    line-height: 25px;
    padding-left: 15px
}

.faq-accordion .accordion .accordion-content ul li::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    background: #813a96;
    border-radius: 50%
}

.faq-accordion .accordion .accordion-content ul li:last-child {
    margin-bottom: 0
}

.learn-content h3 {
    font-size: 40px;
    margin-bottom: 5px
}

.learn-content p {
    margin-bottom: 20px;
    line-height: 2;
     color:#000;
}

.learn-content .bar {
    height: 4px;
    width: 85px;
    background: #813a96;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.learn-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.learn-content .learn-list {
    padding-left: 0;
    margin-top: 20px;
    /* margin-bottom: 30px; */
    position: relative;
    text-align: justify
}

.learn-content .learn-list li {
    list-style-type: none;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 12px;
    line-height: 25px;
    list-style-image: url(../img/icon-image.webp);
    margin-left: 10px;
    color:#000;
}

li.nr {
    list-style-type: none;
    font-size: 15px !important;
    font-weight: 400 !important;
    margin-bottom: 12px
}

.learn-content .learn-list li:last-child {
    margin-bottom: 0
}

.learn-content .learn-list i {
    color: #086ad8;
    margin-right: 5px;
    font-size: 20px
}

.learn-inner-content {
    background-color: #fff;
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    padding: 30px;
    text-align: center;
    position: relative;
    z-index: 1;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 10px
}

.learn-inner-content.mb-30 {
    margin-bottom: 30px
}

.learn-inner-content .icon i {
    display: inline-block;
    height: 70px;
    width: 70px;
    line-height: 70px;
    background-color: #086ad8;
    color: #fff;
    font-size: 35px;
    border-radius: 50px;
    -webkit-transition: .5s;
    transition: .5s
}

.learn-inner-content .icon.bg-ba60fc i {
    background-color: #ba60fc
}

.learn-inner-content .icon.bg-04cfc4 i {
    background-color: #04cfc4
}

.learn-inner-content .icon.bg-f9b854 i {
    background-color: #f9b854
}

.learn-inner-content h3 {
    font-size: 20px;
    margin: 15px 0 8px 0;
    -webkit-transition: .5s;
    transition: .5s
}

.learn-inner-content p {
    margin-bottom: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.learn-inner-content .read-btn {
    display: inline-block;
    margin-top: 10px;
    font-size: 15px;
    color: #212121;
    font-weight: 600;
    -webkit-transition: .5s;
    transition: .5s
}

.learn-inner-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 0%;
    background: #086ad8;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 10px
}

.learn-inner-content:hover {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11)
}

.learn-inner-content:hover::before {
    height: 100%
}

.learn-inner-content:hover h3 {
    color: #fff
}

.learn-inner-content:hover p {
    color: #fff
}

.learn-inner-content:hover .read-btn {
    color: #fff
}

.learn-inner-content:hover .icon i {
    background-color: #fff;
    color: #086ad8
}

.app-content h3 {
    font-size: 40px;
    margin-bottom: 16px
}

.app-content .bar {
    height: 4px;
    width: 85px;
    background: #086ad8;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.app-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.app-inner-text {
    position: relative;
    margin-top: 30px;
    padding-left: 85px
}

.app-inner-text .icon {
    position: absolute;
    left: 0;
    top: 0
}

.app-inner-text .icon i {
    display: inline-block;
    height: 70px;
    width: 70px;
    line-height: 70px;
    background-color: #086ad8;
    color: #fff;
    text-align: center;
    font-size: 35px;
    border-radius: 50px
}

.app-inner-text h3 {
    font-size: 24px;
    margin-bottom: 8px
}

.app-inner-text p {
    margin-bottom: 0
}

.data-section {
    background-color: #f8fcfe
}

.data-content h3 {
    font-size: 40px;
    margin-bottom: 16px
}

.data-content .bar {
    height: 4px;
    width: 85px;
    background: #086ad8;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.data-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.data-inner-content {
    background-color: #fff;
    padding: 30px
}

.data-inner-content i {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    background-color: #086ad8;
    color: #fff;
    text-align: center;
    border-radius: 5px
}

.data-inner-content h3 {
    font-size: 20px;
    margin: 15px 0 2px 0
}

.data-inner-content.bg-facf34 i {
    background-color: #facf34
}

.customer-section {
    background: -webkit-gradient(linear, left top, right top, from(#d5f8fe), color-stop(#9be3ff), color-stop(#71c8ff), color-stop(#74a8ff), to(#9d7df8));
    background: linear-gradient(to right, #d5f8fe, #9be3ff, #71c8ff, #74a8ff, #9d7df8)
}

.customer-content h3 {
    font-size: 40px;
    margin-bottom: 16px
}

.customer-content .bar {
    height: 4px;
    width: 85px;
    background: #086ad8;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.customer-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.customer-content .customer-btn {
    margin-top: 30px
}

.customer-image {
    text-align: center
}

.saas-content {
    text-align: center;
    margin-bottom: 0;
    margin-top: 20px;
    background-color: #fbf4fd;
    border-radius: 0 0 10px 10px;
    padding: 0 0 15px;
    -webkit-transition: .5s;
    transition: .5s;
    border: 1px dashed #086ad8
}

.saas-content .icon i {
    display: inline-block;
    height: 60px;
    width: 60px;
    line-height: 60px;
    background-color: #813a96;
    color: #fff;
    font-size: 30px;
    border-radius: 20px;
    border: 1px dashed #086ad8
}

.saas-content h3 {
    font-size: 18px;
    margin-bottom: 15px;
    margin-top: 15px;
    -webkit-transition: .5s;
    transition: .5s;
    padding: 0 5px
}

.saas-content p {
    font-size: 13px;
    text-align: justify;
    padding: 0 10px
}

.saas-content.bg-f0fffc .icon i {
    background-color: #fff;
    color: #22b396;
    border: 1px dashed #22b396
}

.saas-content.bg-fceee2 {
    background-color: #fceee2
}

.saas-content.bg-fceee2 .icon i {
    background-color: #fff;
    color: #f1760c;
    border: 1px dashed #f1760c
}

.saas-content.bg-fde2ee {
    background-color: #fde2ee
}

.saas-content.bg-fde2ee .icon i {
    background-color: #fff;
    color: #f23e8a;
    border: 1px dashed #f23e8a
}

.saas-content:hover {
    background-color: #086ad8
}

.saas-content:hover h3 {
    color: #fff
}

.saas-content:hover p {
    color: #fff
}

.saas-content:hover li {
    color: #fff
}

.saas-content:hover a {
    color: #fff !important
}

.more-features-content {
    text-align: center;
    margin-bottom: 20px;
    background-color: #f5f9fd;
    border-radius: 5px;
    
    -webkit-transition: .5s;
    transition: .5s
}

.more-features-content .icon i {
    display: inline-block;
    height: 60px;
    width: 60px;
    line-height: 60px;
    background-color: #fff;
    color: #813a96;
    font-size: 30px;
    border-radius: 50px;
    border: 1px dashed #813a96;
		
}

.more-features-content h3 {
    font-size: 18px;
    margin-bottom: 0;
    margin-top: 15px;
    -webkit-transition: .5s;
    transition: .5s
}

.over-features-content {
    text-align: center;
    margin-bottom: 20px;
    background-color: #fbf4fd;
    border-radius: 80px 0;
    padding: 15px 0 15px;
    -webkit-transition: .5s;
    transition: .5s
}

.over-features-content .icon i {
    display: inline-block;
    height: 60px;
    width: 60px;
    line-height: 60px;
    background-color: #813a96;
    color: #fff;
    font-size: 30px;
    border-radius: 20px
}

.over-features-content h3 {
    font-size: 18px;
    margin-bottom: 0;
    margin-top: 15px;
    -webkit-transition: .5s;
    transition: .5s
}

.over-features-content.bg-f0fffc .icon i {
    background-color: #fff;
    color: #22b396;
    border: 1px dashed #22b396
}

.over-features-content.bg-fceee2 {
    background-color: #fceee2
}

.over-features-content.bg-fceee2 .icon i {
    background-color: #fff;
    color: #f1760c;
    border: 1px dashed #f1760c
}

.over-features-content.bg-fde2ee {
    background-color: #fde2ee
}

.over-features-content.bg-fde2ee .icon i {
    background-color: #fff;
    color: #f23e8a;
    border: 1px dashed #f23e8a
}

.over-features-content:hover {
    background-color: #e2ccfc
}

.over-features-content:hover h3 {
    color: #813a96
}

.over-features-content:hover p {
    color: #fff
}

.over-features-content:hover li {
    color: #fff
}

.over-features-content:hover a {
    color: #fff !important
}

.modal-body p {
    color: #000 !important;
    text-align: left
}

.modal-header {
    padding: .5rem 1rem;
    border: 0
}

.more-features-content.bg-f0fffc {
    background-color: #f0fffc
}

.modal-title {
    text-align: center;
    width: 100%;
    margin-top: 20px;
    font-size: 20px
}

.modal-body {
    padding-top: 0;
    padding-bottom: 35px
}

.more-features-content.bg-f0fffc .icon i {
    background-color: #fff;
    color: #22b396;
    border: 1px dashed #22b396
}

.more-features-content.bg-fceee2 {
    background-color: #fceee2
}

.more-features-content.bg-fceee2 .icon i {
    background-color: #fff;
    color: #f1760c;
    border: 1px dashed #f1760c
}

.more-features-content.bg-fde2ee {
    background-color: #fde2ee
}

.more-features-content.bg-fde2ee .icon i {
    background-color: #fff;
    color: #f23e8a;
    border: 1px dashed #f23e8a
}

.more-features-content:hover {
	padding-bottom:20px;
    background-color: #813A96;
}

.more-features-content:hover h3 {
    color: #fff
}

.more-features-content:hover p {
    color: #fff
}

.rm-link {
    color: #813a96 !important
}

.more-features-content:hover li {
    color: #fff
}

.more-features-content:hover a {
    color: #fff !important
}

.digital-content h3 {
    font-size: 40px;
    margin-bottom: 16px
}

.digital-content span {
    color: #086ad8
}

.digital-content p {
    margin-bottom: 0
}

.digital-content .bar {
    height: 4px;
    width: 85px;
    background: #086ad8;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.digital-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.digital-content .digital-list {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 0;
    margin-left: -10px;
    margin-right: -10px
}

.digital-content .digital-list li {
    -ms-flex: 0 0 50%;
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%;
    margin-top: 30px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
    color: #212121;
    font-weight: 600
}

.contact-form {
    background-color: #fff;
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    padding: 35px
}

.digital-content .digital-list i {
    color: #086ad8;
    display: inline-block;
    height: 25px;
    width: 25px;
    line-height: 25px;
    background-color: #d7f2fc;
    text-align: center;
    margin-right: 5px
}

.digital-content .digital-btn {
    margin-top: 30px
}

.experience-inner-area {
    max-width: 560px;
    margin-left: auto
}

.experience-inner-area .experience-content h3 {
    font-size: 40px;
    margin-bottom: 16px
}

.experience-inner-area .experience-content span {
    color: #086ad8
}

.experience-inner-area .experience-content p {
    margin-bottom: 0
}

.experience-inner-area .experience-content .bar {
    height: 4px;
    width: 85px;
    background: #086ad8;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.experience-inner-area .experience-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.experience-inner-area .experience-inner-content {
    position: relative;
    margin-top: 30px;
    padding-left: 50px
}

.experience-inner-area .experience-inner-content .icon {
    position: absolute;
    top: 0;
    left: 0
}

.experience-inner-area .experience-inner-content .icon i {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    background-color: #086ad8;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-radius: 2px
}

.experience-inner-area .experience-inner-content h3 {
    font-size: 25px;
    margin-bottom: 10px
}

.contact-text {
    margin-bottom: 30px
}

.contact-text h3 {
    margin-bottom: 10px;
    font-size: 32px
}


.contact-form form .form-group {
    margin-bottom: 15px
}

.contact-form form .form-control {
    height: 48px;
    padding: 0 15px;
    line-height: initial;
    color: #212121;
    background-color: #f8f6f6;
    border: 1px solid #f8f6f6;
    border-radius: 5px;
    -webkit-transition: .5s;
    transition: .5s;
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
    font-size: 14px;
    font-weight: 400
}

.contact-form form .form-control:focus {
    border-color: #086ad8
}

.contact-form form .form-control::-webkit-input-placeholder {
    color: #999
}

.contact-form form .form-control:-ms-input-placeholder {
    color: #999
}

.contact-form form .form-control::-ms-input-placeholder {
    color: #999
}

.contact-form form .form-control::placeholder {
    color: #999
}

.contact-form form textarea.form-control {
    height: auto !important;
    padding-top: 15px
}

.contact-form .send-btn {
    margin-top: 10px;
    -webkit-transition: .5s;
    transition: .5s
}

.contact-form .send-btn .default-btn {
    border: none;
    float: right
}

.contact-form .with-errors ul {
    padding-left: 0;
    list-style-type: none;
    margin-top: 5px;
    margin-bottom: 0
}

.contact-form .with-errors ul li {
    color: red
}

.contact-form #msgSubmit {
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 500
}

.contact-form #msgSubmit.text-danger {
    margin-top: 20px !important;
    font-family: 'Noto Sans JP', sans-serif
}

.tech-section {
    background-color: #f6f6fe
}

.tech-content h3 {
    font-size: 40px;
    margin-bottom: 5px
}

.tech-content h1 {
    font-size: 30px;
    margin-bottom: 5px
}

.tech-content span {
    color: #086ad8
}

.tech-content p {
    font-size: 14px;
    text-align: justify;
    color:#000;
    margin-bottom: 20px;
    line-height: 1.5
}

.tech-content .bar {
    height: 4px;
    width: 85px;
    background: #813a96;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.tech-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.tech-content .tech-btn {
    margin-top: 30px
}

.tit-section {
    background-color: #f6f6fe
}

.tit-content h3 {
    font-size: 40px;
    margin-bottom: 5px
}

.tit-content h1 {
    text-align: center
}

.tit-content p {
    margin-bottom: 20px;
    line-height: 2
}

.tit-content .bar {
    height: 4px;
    width: 120px;
    left: 45%;
    background: #813a96;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.tit-content .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.tit-content .tit-btn {
    margin-top: 30px
}

.agency-services-section {
    background-color: #fbfbff;
    position: relative
}

.single-agency {
    margin-bottom: 30px;
    position: relative
}

.single-agency .content {
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .11);
    background-color: #fff;
    padding: 30px;
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 320px;
    margin: -50px auto 0
}

.single-agency .content h3 {
    font-size: 25px;
    margin-bottom: 8px;
    -webkit-transition: .5s;
    transition: .5s
}

.single-agency .content span {
    font-size: 16px;
    font-weight: 600;
    -webkit-transition: .5s;
    transition: .5s
}

.single-agency .content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 0%;
    background: #086ad8;
    border-radius: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.single-agency:hover .content::before {
    height: 100%
}

.single-agency:hover .content h3 {
    color: #fff
}

.single-agency:hover .content span {
    color: #fff
}

.tab .tabs_item {
    display: none
}

.tab .tabs_item:first-child {
    display: block
}

.schedule-list-tab .tabs {
    padding-left: 0;
    margin-bottom: 40px;
    text-align: center
}

.schedule-list-tab .tabs li {
    text-align: center;
    display: inline-block;
    list-style: none;
    background-color: #fff;
    width: 100%;
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
    margin-right: 15px;
    border-radius: 10px;
    -webkit-transition: .5s;
    transition: .5s
}

.schedule-list-tab .tabs li:last-child {
    margin-right: 0
}

.schedule-list-tab .tabs li a {
    display: block;
    color: #212121;
    padding: 10px 10px;
    font-size: 15px;
    font-weight: 500;
    height: 130px
}

.schedule-list-tab .tabs li a span {
    display: block;
    margin-top: 0
}

.schedule-list-tab .tabs li a span i {
    font-size: 35px;
    margin-bottom: 8px;
    color: #11a4cf;
    display: block
}

.dbas-list .tabs li a span i {
    color: #813a96
}

.schedule-list-tab .tabs li a span img {
    font-size: 35px;
    margin-bottom: 8px;
    color: #086ad8
}

.dbas-list .tabs li.current,
.dbas-list .tabs li:hover {
    background-color: #813a96 !important
}

.schedule-list-tab .tabs li.current,
.schedule-list-tab .tabs li:hover {
    background-color: #11a4cf
}

.dbas-list .tabs li.current a,
.schedule-list-tab .tabs li:hover a {
    color: #fff !important
}

.schedule-list-tab .tabs li.current a,
.schedule-list-tab .tabs li:hover a {
    color: #fff
}

.schedule-list-tab .tabs li.current a span i,
.schedule-list-tab .tabs li:hover a span i {
    color: #fff
}

.schedule-list-tab .tab_content .tabs_item .tab-content h3 {
    font-size: 30px;
    margin-bottom: 8px
}

.schedule-list-tab .tab_content .tabs_item .tab-content p {
    margin-bottom: 25px;
    line-height: 2
}

.schedule-list-tab .tab_content .tabs_item .tab-content .tab-inner-content {
    margin-top: 25px;
    position: relative;
    padding-left: 50px;
    -webkit-transition: .5s;
    transition: .5s
}

.schedule-list-tab .tab_content .tabs_item .tab-content .tab-inner-content .icon i {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    background-color: #086ad8;
    color: #fff;
    text-align: center;
    font-size: 20px;
    border-radius: 30px;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.schedule-list-tab .tab_content .tabs_item .tab-content .tab-inner-content h3 {
    font-size: 20px;
    margin-bottom: 8px
}

.schedule-list-tab .tab_content .tabs_item .tab-content .tab-inner-content p {
    margin-bottom: 0
}

.schedule-list-tab .tab_content .tabs_item .tab-content .tab-inner-content:hover .icon i {
    background-color: #10dce8;
    color: #fff
}

.coud_tab .tabs_item {
    display: none
}

.coud_tab .tabs_item:first-child {
    display: block
}

.cloud-list-tab {
    flex: auto
}

.cloud-list-tab .coud_tabs {
    padding-left: 0;
    margin-bottom: 40px;
    text-align: center
}

.cloud-list-tab .coud_tabs li {
    text-align: center;
    display: inline-block;
    list-style: none;
    background-color: #fff;
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
    margin-right: 15px;
    border-radius: 10px;
    -webkit-transition: .5s;
    transition: .5s
}

.cloud-list-tab .coud_tabs li:last-child {
    margin-right: 0
}

.cloud-list-tab .coud_tabs li a {
    display: block;
    color: #212121;
    padding: 20px 25px;
    font-size: 16px;
    font-weight: 500;
    width: 150px;
    height: 200px
}

.cloud-list-tab .coud_tabs li a span {
    display: block;
    margin-top: 0
}

.cloud-list-tab .coud_tabs li a span i {
    font-size: 35px;
    margin-bottom: 8px;
    color: #11a4cf;
    display: block
}

.dbas-list .coud_tabs li a span i {
    color: #813a96
}

.cloud-list-tab .coud_tabs li a span img {
    font-size: 35px;
    margin-bottom: 8px;
    color: #086ad8
}

.dbas-list .coud_tabs li.current,
.dbas-list .coud_tabs li:hover {
    background-color: #813a96 !important
}

.cloud-list-tab .coud_tabs li.current,
.cloud-list-tab .coud_tabs li:hover {
    background-color: #11a4cf
}

.cloud-list-tab .coud_tabs li:hover a,
.dbas-list .coud_tabs li.current a {
    color: #fff !important
}

.cloud-list-tab .coud_tabs li.current a,
.cloud-list-tab .coud_tabs li:hover a {
    color: #fff
}

.cloud-list-tab .coud_tabs li.current a span i,
.cloud-list-tab .coud_tabs li:hover a span i {
    color: #fff
}

.cloud-list-tab .tab_content .tabs_item .tab-content h3 {
    font-size: 30px;
    margin-bottom: 8px
}

.cloud-list-tab .tab_content .tabs_item .tab-content p {
    margin-bottom: 25px;
    line-height: 2
}

.cloud-list-tab .tab_content .tabs_item .tab-content .tab-inner-content {
    margin-top: 25px;
    position: relative;
    padding-left: 50px;
    -webkit-transition: .5s;
    transition: .5s
}

.cloud-list-tab .tab_content .tabs_item .tab-content .tab-inner-content .icon i {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    background-color: #086ad8;
    color: #fff;
    text-align: center;
    font-size: 20px;
    border-radius: 30px;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.cloud-list-tab .tab_content .tabs_item .tab-content .tab-inner-content h3 {
    font-size: 20px;
    margin-bottom: 8px
}

.cloud-list-tab .tab_content .tabs_item .tab-content .tab-inner-content p {
    margin-bottom: 0
}

.cloud-list-tab .tab_content .tabs_item .tab-content .tab-inner-content:hover .icon i {
    background-color: #10dce8;
    color: #fff
}

ul {
    margin: 0 0;
    padding: 0
}

.page-title-area {
    position: relative;
    z-index: 1;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 105px 0;
}

/*.page-title-area .page-title h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}*/

.page-title-area.item-bg-7 {
    background-image: url(../img/inner-banner.jpg);
	 
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}
.page-title-area.item-bg-001  {
    background-image: url(../img/banners/IT-banner-image.png);
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
       background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
	
}

.page-title-area.item-bg-2 {
    background-image: url(../img/banners/consulting-services.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-3 {
    background-image: url(../img/banners/managed-it-services.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-4 {
    background-image: url(../img/banners/it-governance-services.jpg);
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-5 {
    background-image: url(../img/banners/user-policy.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-6 {
    background-image: url(../img/banners/qa-testing-services.jpg);
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-7 {
    background-image: url(../img/banners/what-we-do.jpg);
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-8 {
    background-image: url(../img/banners/what-we-support.jpg);
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-9 {
    background-image: url(../img/banners/what-we-deliver.webp);
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-10 {
    background-image: url(../img/banners/about-us.webp);
    background-position: bottom;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-11 {
    background-image: url(../img/banners/careers.webp);
    background-position: top;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}
.page-title-area.item-bg-212 {
    background-image: url(../img/banners/acdBanner-3.jpg);
    height:290px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover

}
.page-title-area.item-bg-12 {
    background-image: url(../img/banners/contact-us.jpg);
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-13 {
    background-image: url(../img/banners/cloud-computing.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-13-1 {
    background-image: url(../img/banners/oracle-cloud.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-14 {
    background-image: url(../img/banners/web-design-revamp.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-15 {
    background-image: url(../img/it-banner.jpg);
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-16 {
    background-image: url(../img/banners/branding-infographic.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-17 {
    background-image: url(../img/banners/e-commerce-development.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}
.page-title-area.item-bg-1811 {
    background-image: url(../img/banners/Website-bann.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}


.page-title-area.item-bg-18 {
    background-image: url(../img/banners/mobile-app-development.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-19 {
    background-image: url(../img/banners/ui-ux-design.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-20 {
    background-image: url(../img/support-maintenance.webp);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-21 {
    background-image: url(../img/banners/profile.webp);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-22 {
    background-image: url(../img/banners/it-support-and-maintenance.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-23 {
    background-image: url(../img/banners/artificial-intelligence.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-24 {
    background-image: url(../img/data-analytic-services-banner.webp);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-25 {
    background-image: url(../img/banners/saas-platform.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-26 {
    background-image: url(../img/ict-services-banner.webp);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-27 {
    background-image: url(../img/visualization_and_design.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-28 {
    background-image: url(../img/banners/digital-marketing.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-29 {
    background-image: url(../img/banners/custom-software-development.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-30 {
    background-image: url(../img/banners/terms.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-31 {
    background-image: url(../img/banners/security-policy.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-32 {
    background-image: url(../img/gdpr.webp);
    background-position: center;
    height:290px;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-33 {
    background-image: url(../img/banners/microsoft-cloud.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-34 {
    background-image: url(../img/banners/under-construction.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-35 {
    background-image: url(../img/banners/aws-cloud-service.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area.item-bg-36 {
    background-image: url(../img/banners/google-cloud.jpg);
    background-position: center;
    /*height: 400px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-title-area::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(25, 25, 25, 0.5);
    z-index: -1;
    min-width: 100% !important;
}

.shape {
    position: absolute
}

.shape-1 {
    left: 20%;
    top: 27%;
    animation: animationFramesOne 30s alternate infinite linear;
    -webkit-animation: animationFramesOne 30s alternate infinite linear
}

.shape-2 {
    left: 23%;
    top: 50%;
    animation: animationFramesTwo 30s alternate infinite linear;
    -webkit-animation: animationFramesTwo 30s alternate infinite linear
}

.shape-3 {
    left: 20%;
    bottom: 20%;
    animation: animationFramesOne 30s alternate infinite linear;
    -webkit-animation: animationFramesOne 30s alternate infinite linear
}

.shape {
    position: absolute
}

.shape-4 {
    left: 50%;
    bottom: 11%;
    animation: animationFramesOne 30s alternate infinite linear;
    -webkit-animation: animationFramesOne 30s alternate infinite linear
}

.shape-5 {
    left: 25%;
    top: 11%;
    animation: animationFramesTwo 30s alternate infinite linear;
    -webkit-animation: animationFramesTwo 30s alternate infinite linear
}

.shape-6 {
    left: 35%;
    bottom: 11%;
    animation: animationFramesOne 30s alternate infinite linear;
    -webkit-animation: animationFramesOne 30s alternate infinite linear
}

.rotateme {
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

.shape6 {
    position: absolute;
    z-index: -1;
    top: 40%;
    right: 10%
}

.pb-60 {
    padding-bottom: 60px
}

.pt-110 {
    padding-top: 110px
}

.page-title h3 {
    font-size: 35px;
    color: #fff
}

.page-title h1 {
    text-align: center;
    color: #fff;
    text-transform: capitalize;
}

.breadcrumb-list ul {
    color: #fff
}

.breadcrumb-list ul li {
    display: inline-block;
    padding: 0 10px;
    font-weight: 400;
    position: relative;
    color: #fff
}

.breadcrumb-list ul li a {
    color: #fff
}

.page-title-content {
    text-align: center;
    margin-top: 0
}

.page-title-content h2 {
    margin-bottom: 0;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 50px
}

.page-title-content ul {
    padding-left: 0;
    list-style-type: none;
    margin-top: 12px;
    margin-bottom: 0
}

.page-title-content ul li {
    color: #fff;
    display: inline-block;
    position: relative;
    font-weight: 400;
    font-size: 17px;
    margin-left: 10px;
    margin-right: 10px
}

.page-title-content ul li a {
    display: inline-block;
    color: #fff;
    -webkit-transition: .5s;
    transition: .5s
}

.page-title-content ul li a:hover {
    color: #086ad8
}

.page-title-content ul li::before {
    content: '';
    position: absolute;
    right: -15px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #086ad8
}

.page-title-content ul li:last-child::before {
    display: none
}

.pagination-area {
    margin-top: 20px;
    text-align: center
}

.pagination-area .page-numbers {
    width: 45px;
    height: 45px;
    margin: 0 3px;
    display: inline-block;
    background-color: #fff;
    line-height: 48px;
    color: #212121;
    -webkit-box-shadow: 0 2px 10px 0 #d8dde6;
    box-shadow: 0 2px 10px 0 #d8dde6;
    font-size: 18px;
    font-weight: 700
}

.pagination-area .page-numbers.current,
.pagination-area .page-numbers:focus,
.pagination-area .page-numbers:hover {
    background: #086ad8;
    color: #fff;
    -webkit-box-shadow: 0 2px 10px 0 #d8dde6;
    box-shadow: 0 2px 10px 0 #d8dde6
}

.login-section {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.login-form {
    background: #fff;
    -webkit-box-shadow: 0 2px 48px 0 rgba(0, 0, 0, .08);
    box-shadow: 0 2px 48px 0 rgba(0, 0, 0, .08);
    padding: 40px;
    border-radius: 5px;
    max-width: 600px;
    margin: auto
}

.login-form .login-title {
    text-align: center;
    margin-bottom: 30px
}

.login-form .login-title h3 {
    font-size: 30px;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 8px
}

.login-form .login-title p {
    margin-bottom: 30px
}

.login-form form .form-control {
    height: 50px;
    border: 1px solid #eee;
    border-radius: 3px;
    color: #212121;
    padding-left: 20px;
    background: 0 0
}

.login-form form .form-control:focus {
    border-color: #086ad8;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.login-form form .form-control::-webkit-input-placeholder {
    color: #666
}

.login-form form .form-control:-ms-input-placeholder {
    color: #666
}

.login-form form .form-control::-ms-input-placeholder {
    color: #666
}

.login-form form .form-control::placeholder {
    color: #666
}

.login-form form .form-check {
    margin-top: 18px
}

.login-form form .form-check .form-check-label {
    color: #666;
    position: relative;
    top: -2px;
    z-index: 1
}

.login-form form .form-check-input {
    margin-top: 3px
}

.login-form form .send-btn {
    margin-top: 20px
}

.login-form form .send-btn .default-btn-one {
    display: inline-block;
    padding: 12px 30px;
    background: #086ad8;
    border: 1px solid #086ad8;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    -webkit-transition: .6s;
    transition: .6s
}

.login-form form .send-btn .default-btn-one:hover {
    text-decoration: none;
    background-color: #fff;
    color: #086ad8
}

.login-form form span {
    display: block;
    color: #777
}

.login-form form span a {
    color: #086ad8
}

.login-form .forgot-password {
    margin-bottom: 0;
    margin-top: -25px
}

.login-form .forgot-password a {
    color: #777
}

.login-form .forgot-password a:hover {
    color: #086ad8
}

.signup-section {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.signup-form {
    background: #fff;
    -webkit-box-shadow: 0 2px 48px 0 rgba(0, 0, 0, .08);
    box-shadow: 0 2px 48px 0 rgba(0, 0, 0, .08);
    padding: 40px;
    border-radius: 5px;
    max-width: 600px;
    margin: auto
}

.signup-form h3 {
    font-size: 30px;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 30px;
    text-align: center
}

.signup-form form .form-control {
    height: 50px;
    border: 1px solid #eee;
    border-radius: 3px;
    color: #212121;
    padding-left: 20px;
    background: 0 0
}

.signup-form form .form-control:focus {
    border-color: #086ad8;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.signup-form form .form-control::-webkit-input-placeholder {
    color: #666
}

.signup-form form .form-control:-ms-input-placeholder {
    color: #666
}

.signup-form form .form-control::-ms-input-placeholder {
    color: #666
}

.signup-form form .form-control::placeholder {
    color: #666
}

.signup-form form .form-check {
    margin-top: 18px
}

.signup-form form .form-check .form-check-label {
    color: #666;
    position: relative;
    top: -2px
}

.signup-form form .send-btn {
    margin-top: 20px
}

.signup-form form .send-btn .default-btn-one {
    display: inline-block;
    padding: 12px 30px;
    background: #086ad8;
    border: 1px solid #086ad8;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    -webkit-transition: .6s;
    transition: .6s
}

.signup-form form .send-btn .default-btn-one:hover {
    text-decoration: none;
    background-color: #fff;
    color: #086ad8
}

.signup-form form span {
    display: block;
    color: #666
}

.signup-form form span a {
    color: #086ad8
}

.error-area {
    height: 100vh
}

.error-content {
    text-align: center;
    margin: 0 auto;
    max-width: 700px
}

.error-content h3 {
    font-size: 50px;
    font-family: 'Noto Sans JP', sans-serif;
    margin-top: 45px;
    margin-bottom: 15px
}

.error-content p {
    max-width: 520px;
    margin: 0 auto 20px
}

.conditions-section {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.privacy-policy {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.single-privacy h3 {
    font-size: 30px;
    margin: 0 0 12px 0
}

.coming-soon-content {
    text-align: center;
    max-width: 820px;
    margin: -80px auto 0
}

.coming-soon-content h1 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 46px;
    font-weight: 700
}

.coming-soon-content p {
    color: #fff;
    font-size: 14px;
    margin: 0 auto;
    max-width: 620px;
    line-height: 30px
}

.coming-soon-content form {
    position: relative;
    margin: 35px auto 55px;
    max-width: 520px
}

.coming-soon-content form .email-input {
    display: block;
    width: 100%;
    height: 56px;
    border: none;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .1), 0 0 0 5px rgba(255, 255, 255, .3);
    box-shadow: inset 0 0 1px rgba(0, 0, 0, .1), 0 0 0 5px rgba(255, 255, 255, .3);
    border-radius: 40px;
    padding: 15px 25px;
    outline: 0 !important;
    background: #f1f2f3
}

.coming-soon-content form .submit-btn {
    position: absolute;
    right: 3px;
    top: 3px;
    height: 50px;
    background: #086ad8;
    color: #fff;
    border: none;
    border-radius: 40px;
    width: 130px;
    outline: 0 !important;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600
}

.coming-soon-content form .submit-btn:focus,
.coming-soon-content form .submit-btn:hover {
    background-color: #086ad8
}

.coming-soon-content #timer div {
    background: #fff;
    display: inline-block;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    color: #086ad8;
    -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, .5);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .5);
    margin: 0 10px;
    padding-top: 18px;
    font-size: 40px;
    font-weight: 700
}

.coming-soon-content #timer div span {
    display: block;
    margin-top: -4px;
    color: #777;
    font-size: 14px;
    font-weight: 600
}

.single-contact-box {
    text-align: center;
    background-color: #fff;
    -webkit-box-shadow: 0 0 11px 3px rgba(0, 0, 0, .05);
    box-shadow: 0 0 11px 3px rgba(0, 0, 0, .05);
    padding: 10px 0;
    margin-bottom: 30px;
    min-height: 220px
}

.single-contact-box p {
    color: #333
}

.single-contact-box i {
    line-height: 50px;
    width: 50px;
    height: 50px;
    border: 1px dashed #086ad8;
    border-radius: 50%;
    font-size: 20px;
    display: inline-block;
    color: #086ad8;
    -webkit-transition: all .5s;
    transition: all .5s;
    margin-bottom: 20px
}

.single-contact-box:hover i {
    background-color: #086ad8;
    color: #fff
}

.single-contact-box .content-title h3 {
    font-size: 25px;
    margin-bottom: 10px
}

.single-contact-box .content-title a {
    font-size: 16px;
    margin-bottom: 5px
}

.single-contact-box .content-title a:hover {
    color: #086ad8
}

.services-details-overview {
    margin-bottom: 60px;
    margin-top: 60px
}

.services-details-overview:last-child {
    margin-bottom: 0
}

.services-details-overview .services-details-desc h3 {
    margin-bottom: 15px;
    font-size: 30px;
    font-weight: 600
}

.services-details-overview .services-details-desc .features-text {
    margin-top: 25px
}

.services-details-overview .services-details-desc .features-text h4 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 500
}

.services-details-overview .services-details-desc .services-details-accordion {
    margin-top: 25px
}

.services-details-overview .services-details-desc .services-details-accordion .accordion {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0
}

.services-details-overview .services-details-desc .services-details-accordion .accordion .accordion-item {
    display: block;
    -webkit-box-shadow: 0 0 1.25rem rgba(108, 118, 134, .1);
    box-shadow: 0 0 1.25rem rgba(108, 118, 134, .1);
    background: #fff;
    margin-bottom: 10px
}

.services-details-overview .services-details-desc .services-details-accordion .accordion .accordion-item:last-child {
    margin-bottom: 0
}

.services-details-overview .services-details-desc .services-details-accordion .accordion .accordion-item a {
    text-decoration: none
}

.services-details-overview .services-details-desc .services-details-accordion .accordion .accordion-title {
    padding: 15px 20px 15px 51px;
    color: #000;
    position: relative;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    display: inline-block;
    width: 100%
}

.services-details-overview .services-details-desc .services-details-accordion .accordion .accordion-title i {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    text-align: center;
    height: 100%;
    background: #086ad8;
    color: #fff
}

.services-details-overview .services-details-desc .services-details-accordion .accordion .accordion-title i::before {
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 20px
}

.services-details-overview .services-details-desc .services-details-accordion .accordion .accordion-title.active {
    border-bottom-color: #eee
}

.services-details-overview .services-details-desc .services-details-accordion .accordion .accordion-title.active i::before {
    content: "\eaf8"
}

.services-details-overview .services-details-desc .services-details-accordion .accordion .accordion-content {
    display: none;
    position: relative;
    padding: 15px 15px
}

.services-details-overview .services-details-desc .services-details-accordion .accordion .accordion-content.show {
    display: block
}

.services-details-video {
    position: relative
}

.services-details-video .details-video {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
    margin: auto
}

.services-details-video .details-video .video-btn {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 60px;
    background-color: #fff;
    border-radius: 50%;
    color: #086ad8;
    position: relative;
    z-index: 1
}

.services-details-video .details-video .video-btn i {
    font-size: 35px;
    position: relative;
    top: 5px;
    left: 4px
}

.services-details-video .details-video .video-btn::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid #fff;
    -webkit-animation: ripple 2s linear 1s infinite;
    animation: ripple 2s linear 1s infinite
}

.services-details-video .details-video .video-btn::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid #fff;
    -webkit-animation: ripple 2s linear infinite;
    animation: ripple 2s linear infinite
}

.services-details-video .details-video .video-btn .video-content .video-btn:focus,
.services-details-video .details-video .video-btn:hover {
    background-color: #086ad8;
    color: #fff
}

.services-details-video .text {
    margin-top: 10px
}

.services-details-video .text h3 {
    font-size: 30px;
    margin: 25px 0 10px 0
}

.project-details-image {
    margin-bottom: 30px
}

.projects-details-desc {
    margin-top: 5px
}

.projects-details-desc h3 {
    margin-bottom: 13px;
    font-size: 30px;
    font-weight: 700
}

.projects-details-desc .features-text {
    margin-top: 20px;
    margin-bottom: 25px
}

.projects-details-desc .features-text h4 {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 600
}

.projects-details-desc .features-text h4 i {
    font-size: 16px;
    margin-right: 4px;
    color: #f20791
}

.projects-details-desc .project-details-info {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    margin-top: 35px
}

.projects-details-desc .project-details-info .single-info-box {
    -ms-flex: 0 0 20%;
    -webkit-box-flex: 0;
    flex: 0 0 20%;
    max-width: 20%;
    padding-left: 15px;
    padding-right: 15px
}

.projects-details-desc .project-details-info .single-info-box h4 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700
}

.projects-details-desc .project-details-info .single-info-box span {
    display: block;
    color: #6a6c72;
    font-size: 15px
}

.projects-details-desc .project-details-info .single-info-box .social {
    padding-left: 0;
    margin-bottom: 0;
    list-style-type: none
}

.projects-details-desc .project-details-info .single-info-box .social li {
    display: inline-block;
    margin-right: 8px
}

.projects-details-desc .project-details-info .single-info-box .social a {
    color: #6a6c72;
    display: inline-block
}

.projects-details-desc .project-details-info .single-info-box .social a:hover {
    color: #086ad8;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px)
}

.blog-details-desc .article-content {
    margin-top: 30px
}

.blog-details-desc .article-content .entry-meta {
    margin-bottom: -8px
}

.blog-details-desc .article-content .entry-meta ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style-type: none
}

.blog-details-desc .article-content .entry-meta ul li {
    position: relative;
    display: inline-block;
    color: #212121;
    margin-right: 21px
}

.blog-details-desc .article-content .entry-meta ul li span {
    display: inline-block;
    color: #212121;
    font-weight: 500
}

.blog-details-desc .article-content .entry-meta ul li a {
    display: inline-block;
    color: #666
}

.blog-details-desc .article-content .entry-meta ul li a:hover {
    color: #086ad8
}

.blog-details-desc .article-content .entry-meta ul li i {
    color: #086ad8;
    margin-right: 2px
}

.blog-details-desc .article-content .entry-meta ul li::before {
    content: '';
    position: absolute;
    top: 12px;
    right: -15px;
    width: 6px;
    height: 1px;
    background: #086ad8
}

.blog-details-desc .article-content .entry-meta ul li:last-child {
    margin-right: 0
}

.blog-details-desc .article-content .entry-meta ul li:last-child::before {
    display: none
}

.blog-details-desc .article-content h3 {
    margin-bottom: 15px;
    margin-top: 25px;
    font-size: 30px;
    font-family: 'Noto Sans JP', sans-serif
}

.blog-details-desc .article-content .wp-block-gallery.columns-3 {
    padding-left: 0;
    list-style-type: none;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
    margin-bottom: 30px;
    margin-top: 30px
}

.blog-details-desc .article-content .wp-block-gallery.columns-3 li {
    -ms-flex: 0 0 33.3333%;
    -webkit-box-flex: 0;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding-right: 10px;
    padding-left: 10px
}

.blog-details-desc .article-content .wp-block-gallery.columns-3 li figure {
    margin-bottom: 0
}

.blog-details-desc .article-content .features-list {
    padding-left: 0;
    list-style-type: none;
    margin-top: 25px;
    margin-bottom: 30px
}

.blog-details-desc .article-content .features-list li {
    margin-bottom: 16px;
    position: relative;
    padding-left: 34px;
    color: #666
}

.blog-details-desc .article-content .features-list li i {
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 40px;
    background-color: #faf5f5;
    color: #086ad8;
    -webkit-transition: .5s;
    transition: .5s;
    display: inline-block;
    font-size: 11px;
    position: absolute;
    left: 0;
    top: -2px
}

.blog-details-desc .article-content .features-list li:hover i {
    background-color: #086ad8;
    color: #fff
}

.blog-details-desc .article-content .features-list li:last-child {
    margin-bottom: 0
}

.blog-details-desc .article-footer {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 30px
}

.blog-details-desc .article-footer .article-tags {
    -ms-flex: 0 0 50%;
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%;
    color: #666
}

.blog-details-desc .article-footer .article-tags span {
    display: inline-block;
    color: #212121;
    font-size: 20px;
    margin-right: 5px;
    position: relative;
    top: 2px
}

.blog-details-desc .article-footer .article-tags a {
    display: inline-block;
    color: #666
}

.blog-details-desc .article-footer .article-tags a:hover {
    color: #086ad8
}

.blog-details-desc .article-footer .article-share {
    -ms-flex: 0 0 50%;
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%
}

.blog-details-desc .article-footer .article-share .social {
    padding-left: 0;
    list-style-type: none;
    text-align: right;
    margin-bottom: 0
}

.blog-details-desc .article-footer .article-share .social li {
    display: inline-block
}

.blog-details-desc .article-footer .article-share .social li span {
    display: inline-block;
    margin-right: 2px;
    font-weight: 500;
    color: #666
}

.blog-details-desc .article-footer .article-share .social li a {
    display: block;
    color: #086ad8;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background-color: #eeeef0;
    text-align: center;
    font-size: 12px
}

.blog-details-desc .article-footer .article-share .social li a:hover {
    color: #fff;
    background-color: #086ad8;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px)
}

.blog-details-desc .post-navigation {
    margin-top: 30px
}

.blockquote,
blockquote {
    overflow: hidden;
    background-color: #fafafa;
    padding: 50px !important;
    position: relative;
    text-align: center;
    z-index: 1;
    margin-bottom: 20px;
    margin-top: 20px
}

.blockquote p,
blockquote p {
    color: #212121;
    line-height: 1.6;
    margin-bottom: 0;
    font-style: italic;
    font-weight: 500;
    font-size: 24px !important
}

.blockquote cite,
blockquote cite {
    display: none
}

.blockquote::after,
blockquote::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #086ad8;
    margin-top: 20px;
    margin-bottom: 20px
}

.post-navigation {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding-top: 20px;
    padding-bottom: 20px
}

.post-navigation .navigation-links {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.post-navigation .navigation-links .nav-previous {
    -ms-flex: 0 0 50%;
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%
}

.post-navigation .navigation-links .nav-previous a i {
    margin-right: 2px;
    -webkit-transition: .5s;
    transition: .5s
}

.post-navigation .navigation-links .nav-previous a:hover i {
    margin-right: 0
}

.post-navigation .navigation-links .nav-next {
    -ms-flex: 0 0 50%;
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%;
    text-align: right
}

.post-navigation .navigation-links .nav-next a i {
    margin-left: 2px;
    -webkit-transition: .5s;
    transition: .5s
}

.post-navigation .navigation-links .nav-next a:hover i {
    margin-left: 0
}

.post-navigation .navigation-links div a {
    display: inline-block;
    font-weight: 400
}

.comments-area {
    padding: 25px;
    margin-top: 30px;
    -webkit-box-shadow: 0 0 29px 0 rgba(102, 102, 102, .08);
    box-shadow: 0 0 29px 0 rgba(102, 102, 102, .08);
    background-color: #fff
}

.comments-area .comments-title {
    position: relative;
    margin-bottom: 30px;
    line-height: initial;
    font-size: 25px;
    font-weight: 600;
    font-family: 'Noto Sans JP', sans-serif
}

.comments-area ol,
.comments-area ul {
    padding: 0;
    margin: 0;
    list-style-type: none
}

.comments-area .comment-list {
    padding: 0;
    margin: 0;
    list-style-type: none
}

.comments-area .comment-body {
    border-bottom: 1px solid #eee;
    padding-left: 65px;
    color: #212121;
    font-size: 14px;
    margin-bottom: 20px;
    padding-bottom: 20px
}

.comments-area .comment-body .reply {
    margin-top: 15px
}

.comments-area .comment-body .reply a {
    border: 1px solid #ded9d9;
    color: #212121;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 30px;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    font-size: 12px;
    font-weight: 400
}

.comments-area .comment-body .reply a:hover {
    color: #fff;
    background-color: #086ad8;
    border-color: #086ad8
}

.comments-area .comment-author {
    font-size: 17px;
    margin-bottom: .1em;
    position: relative;
    z-index: 2
}

.comments-area .comment-author .avatar {
    height: 50px;
    left: -65px;
    position: absolute;
    width: 50px
}

.comments-area .comment-author .fn {
    font-size: 20px
}

.comments-area .comment-author .says {
    display: none
}

.comments-area .comment-metadata {
    margin-bottom: .8em;
    color: #666;
    letter-spacing: .01em;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400
}

.comments-area .comment-metadata a {
    color: #666
}

.comments-area .comment-metadata a:hover {
    color: #086ad8
}

.comments-area .comment-respond {
    margin-top: 30px
}

.comments-area .comment-respond .comment-reply-title {
    margin-bottom: 0;
    position: relative;
    font-size: 25px;
    font-weight: 600;
    font-family: 'Noto Sans JP', sans-serif
}

.comments-area .comment-respond .comment-reply-title #cancel-comment-reply-link {
    display: inline-block
}

.comments-area .comment-respond .comment-form {
    overflow: hidden
}

.comments-area .comment-respond .comment-notes {
    margin-bottom: 0;
    margin-top: 10px
}

.comments-area .comment-respond .comment-form-comment {
    margin-top: 15px;
    float: left;
    width: 100%
}

.comments-area .comment-respond label {
    display: block;
    font-weight: 400;
    color: #212121;
    margin-bottom: 5px
}

.comments-area .comment-respond input[type=date],
.comments-area .comment-respond input[type=datetime-local],
.comments-area .comment-respond input[type=email],
.comments-area .comment-respond input[type=month],
.comments-area .comment-respond input[type=number],
.comments-area .comment-respond input[type=password],
.comments-area .comment-respond input[type=search],
.comments-area .comment-respond input[type=tel],
.comments-area .comment-respond input[type=text],
.comments-area .comment-respond input[type=time],
.comments-area .comment-respond input[type=url],
.comments-area .comment-respond input[type=week],
.comments-area .comment-respond textarea {
    display: block;
    width: 100%;
    background-color: #fff;
    border: 1px solid #eee;
    padding: .625em .7375em;
    outline: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.comments-area .comment-respond input[type=date]:focus,
.comments-area .comment-respond input[type=datetime-local]:focus,
.comments-area .comment-respond input[type=email]:focus,
.comments-area .comment-respond input[type=month]:focus,
.comments-area .comment-respond input[type=number]:focus,
.comments-area .comment-respond input[type=password]:focus,
.comments-area .comment-respond input[type=search]:focus,
.comments-area .comment-respond input[type=tel]:focus,
.comments-area .comment-respond input[type=text]:focus,
.comments-area .comment-respond input[type=time]:focus,
.comments-area .comment-respond input[type=url]:focus,
.comments-area .comment-respond input[type=week]:focus,
.comments-area .comment-respond textarea:focus {
    border-color: #086ad8
}

.comments-area .comment-respond .comment-form-author {
    float: left;
    width: 50%;
    padding-right: 10px;
    margin-bottom: 20px
}

.comments-area .comment-respond .comment-form-email {
    float: left;
    width: 50%;
    padding-left: 12px;
    margin-bottom: 20px
}

.comments-area .comment-respond .comment-form-url {
    float: left;
    width: 100%;
    margin-bottom: 20px
}

.comments-area .comment-respond .comment-form-cookies-consent {
    width: 100%;
    float: left;
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px
}

.comments-area .comment-respond .comment-form-cookies-consent input {
    position: absolute;
    left: 0;
    top: 4px
}

.comments-area .comment-respond .comment-form-cookies-consent label {
    display: inline-block;
    margin: 0;
    color: #666;
    font-weight: 400;
    position: relative;
    top: -2px
}

.comments-area .comment-respond .form-submit {
    float: left;
    width: 100%
}

.comments-area .comment-respond .form-submit input {
    background: #086ad8;
    border: none;
    color: #fff;
    padding: 10px 30px;
    display: inline-block;
    cursor: pointer;
    outline: 0;
    border-radius: 0;
    text-transform: capitalize;
    -webkit-transition: .5s;
    transition: .5s;
    font-weight: 400;
    font-size: 14px
}

.comments-area .comment-respond .form-submit input:focus,
.comments-area .comment-respond .form-submit input:hover {
    color: #fff;
    background-color: #212121
}

.footer {
	
    padding: 0;
    color: #fff;
    font-size: 14px
	display: block;
    visibility: visible;
    overflow: visible;
    position: relative; /* or static */
    z-index: 1;

}

.footer .footer-top {
	
    background: #813a96;
    padding: 40px 0 0 0
}

.footer .footer-top .footer-info {
	
    margin-bottom: 30px
}

.footer .footer-top .footer-info h3 {
    font-size: 24px;
    margin: 0 0 20px 0;
    padding: 2px 0 2px 0;
    line-height: 1;
    font-weight: 700
}

.footer .footer-top .footer-info p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0;
    color: #fff
}

.footer .footer-top .footer-info p a {
    color: #fff
}

.footer-address-list ul {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 0
}

.footer-address-list li p {
    font-weight: 600;
    font-size: 18px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 25px
}

.footer-address-list li p span {
    display: flex;
    font-weight: 400;
    font-size: 15px;
    font-family: 'Noto Sans JP', sans-serif
}

.footer-address-list li>span {
    position: relative;
    top: 0
}

.footer-address-list li {
    color: #fff;
    display: flex;
    padding: 5px 0
}

.footer-address-list li:last-child {
    padding: 5px 0
}

.footer-address-list li a {
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif
}

.footer-address-list li i {
    margin: 0 15px 0 0;
    display: initial
}

.footer-address-list li>span img {
    margin-right: 15px;
    width: 20px;
    height: 20px
}

.footer .footer-top h4 {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    position: relative;
    padding-bottom: 15px;
    text-align: left;
}

.footer .footer-top .footer-links {
    margin-bottom: 30px
}

.footer .footer-top .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.footer .footer-top .footer-links ul i {
    padding-right: 3px;
    color: #fff;
    font-size: 12px;
    line-height: 1
}

.footer .footer-top .footer-links ul li {
    padding: 5px 0;
    display: flex;
    align-items: center;
	

}

.footer .footer-top .footer-links ul li:first-child {
    padding-top: 0
}

.footer .footer-top .footer-links ul a {
    color: #fff;
    transition: .3s;
    display: inline-block;
    line-height: 1.5
	
}

.footer .footer-top .footer-links ul a:hover {
    color: #fff
}

.copyright-area {
	
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #2a0933
}

.copyright-area .copyright-area-content p {
    font-size: 14px;
    color: #fff
}

.copyright-area .copyright-area-content p a {
    display: inline-block;
    font-weight: 600
}

.copyright-area .copyright-area-content p a:hover {
    color: #086ad8
}

.copyright-area .copyright-area-content ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style-type: none;
    text-align: left;

}

.copyright-area .copyright-area-content ul li {
    display: inline-block;
    font-size: 14px;
    position: relative;
    margin-left: 10px;
    margin-right: 10px
	font-weight:300 !important;
}

.copyright-area .copyright-area-content ul li a {
    display: inline-block;
    color: #fff
}

.copyright-area .copyright-area-content ul li a:hover {
    color: #813a96
}

.copyright-area .copyright-area-content ul li::before {
    content: '';
    position: absolute;
    top: 5px;
    right: -8px;
    width: 1px;
    height: 14px;
    background-color: #fff
}

.copyright-area .copyright-area-content ul li:last-child {
    margin-right: 0
}

.copyright-area .copyright-area-content ul li:last-child::before {
    display: none
}

.copyright-area .copyright-area-content ul li:first-child {
    margin-left: 0
}

.go-top {
    position: fixed;
    cursor: pointer;
    right: 10px;
    color: #fff;
    background-color: #813a96;
    z-index: 999;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .9s;
    transition: .9s;
    border-radius: 50%;
    border: 1px solid #813a96
}

.go-top.active {
    bottom: 50px;
    -webkit-transform: translateY(-85%);
    transform: translateY(-85%);
    opacity: 1;
    visibility: visible;
    border: 1px solid #fff
}

.go-top i {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-transition: .5s;
    transition: .5s;
    font-size: 30px
}

.go-top i:last-child {
    opacity: 0;
    visibility: hidden;
    top: 60%
}

.go-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #212121;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 50%
}

.go-top:focus,
.go-top:hover {
    color: #fff
}

.go-top:focus::before,
.go-top:hover::before {
    opacity: 1;
    visibility: visible
}

.go-top:focus i:first-child,
.go-top:hover i:first-child {
    opacity: 0;
    top: 0;
    visibility: hidden
}

.go-top:focus i:last-child,
.go-top:hover i:last-child {
    opacity: 1;
    visibility: visible;
    top: 50%
}

#cookie-law-info-bar {
    font-size: 12pt;
    margin: 0 auto;
    padding: 13px 10px;
    position: fixed;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    z-index: 9;
    box-shadow: rgba(0, 0, 0, .5) 0 5px 50px;
    display: block;
    left: 0;
    font-weight: 300;
    bottom: 0;
    background-color: #fff
}

#cookie-law-info-again {
    font-size: 10pt;
    margin: 0;
    padding: 5px 10px;
    text-align: center;
    z-index: 9999;
    cursor: pointer;
    box-shadow: #161616 2px 2px 5px 2px
}

#cookie-law-info-bar span {
    vertical-align: middle
}

.cli-plugin-button,
.cli-plugin-button:visited {
    display: inline-block;
    padding: 10px 16px 10px;
    color: #fff !important;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    margin-left: 0;
    text-decoration: none;
    background-color: #000
}

.cli-plugin-main-link {
    margin-left: 0;
    font-weight: 550;
    text-decoration: underline
}

.cli-plugin-button:hover {
    background-color: #111;
    color: #fff;
    text-decoration: none
}

.small.cli-plugin-button,
.small.cli-plugin-button:visited {
    font-size: 11px
}

.cli-plugin-button,
.cli-plugin-button:visited,
.medium.cli-plugin-button,
.medium.cli-plugin-button:visited {
    font-size: 14px;
    font-weight: 500;
    line-height: 1
}

.large.cli-plugin-button,
.large.cli-plugin-button:visited {
    font-size: 14px;
    padding: 8px 14px 9px
}

.super.cli-plugin-button,
.super.cli-plugin-button:visited {
    font-size: 34px;
    padding: 8px 14px 9px
}

.magenta.cli-plugin-button:visited,
.pink.cli-plugin-button {
    background-color: #e22092
}

.pink.cli-plugin-button:hover {
    background-color: #c81e82
}

.green.cli-plugin-button,
.green.cli-plugin-button:visited {
    background-color: #91bd09
}

.green.cli-plugin-button:hover {
    background-color: #749a02
}

.red.cli-plugin-button,
.red.cli-plugin-button:visited {
    background-color: #e62727
}

.red.cli-plugin-button:hover {
    background-color: #cf2525
}

.orange.cli-plugin-button,
.orange.cli-plugin-button:visited {
    background-color: #ff5c00
}

.orange.cli-plugin-button:hover {
    background-color: #d45500
}

.blue.cli-plugin-button,
.blue.cli-plugin-button:visited {
    background-color: #2981e4
}

.blue.cli-plugin-button:hover {
    background-color: #2575cf
}

.yellow.cli-plugin-button,
.yellow.cli-plugin-button:visited {
    background-color: #ffb515
}

.yellow.cli-plugin-button:hover {
    background-color: #fc9200
}

.cli-plugin-button {
    margin-top: 5px
}

.cli-bar-popup {
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    padding: 20px
}

.cli-powered_by_p {
    width: 100% !important;
    display: block !important;
    color: #333;
    clear: both;
    font-style: italic !important;
    font-size: 12px !important;
    margin-top: 15px !important
}

.cli-powered_by_a {
    color: #333;
    font-weight: 600 !important;
    font-size: 12px !important
}

.gdpr-container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.gdpr-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.gdpr-col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
}

.gdpr-col-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%
}

.gdpr-align-items-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important
}

.gdpr-d-flex {
    display: -ms-flexbox !important;
    display: flex !important
}

.gdpr-px-0 {
    padding-left: 0;
    padding-right: 0
}

.modal-backdrop.show {
    opacity: .8
}

.modal-open {
    overflow: hidden
}

.modal-open .gdpr-modal {
    overflow-x: hidden;
    overflow-y: auto
}

.gdpr-modal.fade .gdpr-modal-dialog {
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    transform: translate(0, -25%)
}

.gdpr-modal.show .gdpr-modal-dialog {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1039;
    background-color: #000
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.show {
    opacity: .5
}

.gdpr-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0
}

.gdpr-modal a {
    text-decoration: none
}

.gdpr-modal .gdpr-modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (.5rem * 2))
}

@media (min-width:576px) {
    .gdpr-modal .gdpr-modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
        min-height: calc(100% - (1.75rem * 2))
    }
}

@media (min-width:992px) {
    .gdpr-modal .gdpr-modal-dialog {
        max-width: 900px
    }
}

.gdpr-modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    outline: 0
}

.gdpr-modal .row {
    margin: 0 -15px
}

.gdpr-modal .modal-body {
    padding: 0;
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.gdpr-modal .close {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff
}

.gdpr-modal .close:focus {
    outline: 0
}

.gdpr-switch {
    display: inline-block;
    position: relative;
    min-height: 1px;
    padding-left: 70px;
    font-size: 14px
}

.gdpr-switch input[type=checkbox] {
    display: none
}

.gdpr-switch .gdpr-slider {
    background-color: #e3e1e8;
    height: 24px;
    width: 50px;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s
}

.gdpr-switch .gdpr-slider:before {
    background-color: #fff;
    bottom: 2px;
    content: "";
    height: 20px;
    left: 2px;
    position: absolute;
    transition: .4s;
    width: 20px
}

.gdpr-switch input:checked+.gdpr-slider {
    background-color: #63b35f
}

.gdpr-switch input:checked+.gdpr-slider:before {
    transform: translateX(26px)
}

.gdpr-switch .gdpr-slider {
    border-radius: 34px
}

.gdpr-switch .gdpr-slider:before {
    border-radius: 50%
}

.gdpr-tab-content>.gdpr-tab-pane {
    display: none
}

.gdpr-tab-content>.active {
    display: block
}

.gdpr-fade {
    transition: opacity .15s linear
}

.gdpr-nav-pills {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    align-items: stretch !important;
    -ms-align-items: stretch !important
}

.gdpr-tab-content,
.nav.gdpr-nav-pills {
    width: 100%;
    padding: 30px
}

.nav.gdpr-nav-pills {
    background: #f3f3f3
}

.nav.gdpr-nav-pills .gdpr-nav-link {
    border: 1px solid #0070ad;
    margin-bottom: 10px;
    color: #0070ad;
    font-size: 14px;
    display: block;
    padding: .5rem 1rem;
    border-radius: .25rem
}

.nav.gdpr-nav-pills .gdpr-nav-link.active,
.nav.gdpr-nav-pills .show>.gdpr-nav-link {
    background-color: #0070ad;
    border: 1px solid #0070ad
}

.nav.gdpr-nav-pills .gdpr-nav-link.active {
    color: #fff
}

.gdpr-tab-content .gdpr-button-wrapper {
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid #d6d6d6
}

.gdpr-tab-content .gdpr-button-wrapper .btn-gdpr {
    background-color: #0070ad;
    border-color: #0070ad;
    color: #fff;
    font-size: 14px;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.gdpr-tab-content p {
    color: #343438;
    font-size: 14px;
    margin-top: 0
}

.gdpr-tab-content h4 {
    font-size: 20px;
    margin-bottom: .5rem;
    margin-top: 0;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit
}

.cli-container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.cli-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.cli-col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
}

.cli-col-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%
}

.cli-align-items-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important
}

.cli-d-flex {
    display: -ms-flexbox !important;
    display: flex !important
}

.cli-px-0 {
    padding-left: 0;
    padding-right: 0
}

.cli-btn {
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .5rem 1.25rem;
    line-height: 1;
    border-radius: .25rem;
    transition: all .15s ease-in-out
}

.cli-btn:hover {
    opacity: .8
}

.cli-read-more-link {
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline
}

.cli-btn:focus {
    outline: 0
}

.cli-modal-backdrop.cli-show {
    opacity: .8
}

.cli-modal-open {
    overflow: hidden
}

.cli-barmodal-open {
    overflow: hidden
}

.cli-modal-open .cli-modal {
    overflow-x: hidden;
    overflow-y: auto
}

.cli-modal.cli-fade .cli-modal-dialog {
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    transform: translate(0, -25%)
}

.cli-modal.cli-show .cli-modal-dialog {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.cli-modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    display: none
}

.cli-modal-backdrop.cli-fade {
    opacity: 0
}

.cli-modal-backdrop.cli-show {
    opacity: .5;
    display: block
}

.cli-modal.cli-show {
    display: block
}

.cli-modal a {
    text-decoration: none
}

.cli-modal .cli-modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (.5rem * 2))
}

@media (min-width:576px) {
    .cli-modal .cli-modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
        min-height: calc(100% - (1.75rem * 2))
    }
}

@media (min-width:992px) {
    .cli-modal .cli-modal-dialog {
        max-width: 900px
    }
}

.cli-modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: .3rem;
    outline: 0
}

.cli-modal .row {
    margin: 0 -15px
}

.cli-modal .modal-body {
    padding: 0;
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.cli-modal .cli-modal-close {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff
}

.cli-modal .cli-modal-close:focus {
    outline: 0
}

.cli-switch {
    display: inline-block;
    position: relative;
    min-height: 1px;
    padding-left: 70px;
    font-size: 14px
}

.cli-switch input[type=checkbox] {
    display: none
}

.cli-switch .cli-slider {
    background-color: #e3e1e8;
    height: 24px;
    width: 50px;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s
}

.cli-switch .cli-slider:before {
    background-color: #fff;
    bottom: 2px;
    content: "";
    height: 20px;
    left: 2px;
    position: absolute;
    transition: .4s;
    width: 20px
}

.cli-switch input:checked+.cli-slider {
    background-color: #00acad
}

.cli-switch input:checked+.cli-slider:before {
    transform: translateX(26px)
}

.cli-switch .cli-slider {
    border-radius: 34px
}

.cli-switch .cli-slider:before {
    border-radius: 50%
}

.cli-tab-content {
    background: #fff
}

.cli-tab-content>.cli-active {
    display: block
}

.cli-fade {
    transition: opacity .15s linear
}

.cli-nav-pills {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    -ms-flex-direction: column;
    flex-direction: column
}

.cli-nav-pills,
.cli-tab-content {
    width: 100%;
    padding: 30px
}

@media (max-width:767px) {
    .cli-nav-pills,
    .cli-tab-content {
        padding: 30px 10px
    }
}

.cli-nav-pills {
    background: #f3f3f3
}

.cli-nav-pills .cli-nav-link {
    border: 1px solid #00acad;
    margin-bottom: 10px;
    color: #00acad;
    font-size: 14px;
    display: block;
    padding: .5rem 1rem;
    border-radius: .25rem;
    cursor: pointer
}

.cli-nav-pills .cli-nav-link.cli-active,
.cli-nav-pills .cli-show>.cli-nav-link {
    background-color: #00acad;
    border: 1px solid #00acad
}

.cli-nav-pills .cli-nav-link.cli-active {
    color: #fff
}

.cli-tab-content .cli-button-wrapper {
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid #d6d6d6
}

.cli-tab-content p {
    color: #343438;
    font-size: 14px;
    margin-top: 0
}

.cli-tab-content h4 {
    font-size: 20px;
    margin-bottom: 1.5rem;
    margin-top: 0;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit
}

.cli-container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.cli-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.cli-col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
}

.cli-col-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    flex-direction: column
}

.cli-align-items-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important
}

.cli-d-flex {
    display: -ms-flexbox !important;
    display: flex !important
}

.cli-px-0 {
    padding-left: 0;
    padding-right: 0
}

.cli-btn {
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .5rem 1.25rem;
    line-height: 1;
    border-radius: .25rem;
    transition: all .15s ease-in-out
}

.cli-btn:hover {
    opacity: .8
}

.cli-read-more-link {
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline
}

.cli-btn:focus {
    outline: 0
}

.cli-modal-backdrop.cli-show {
    opacity: .8
}

.cli-modal-open {
    overflow: hidden
}

.cli-barmodal-open {
    overflow: hidden
}

.cli-modal-open .cli-modal {
    overflow-x: hidden;
    overflow-y: auto
}

.cli-modal.cli-fade .cli-modal-dialog {
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    transform: translate(0, -25%)
}

.cli-modal.cli-show .cli-modal-dialog {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.cli-modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: opacity ease-in-out .5s
}

.cli-modal-backdrop.cli-fade {
    opacity: 0
}

.cli-modal-backdrop.cli-show {
    opacity: .5;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.cli-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    transform: scale(0);
    overflow: hidden;
    outline: 0
}

.cli-modal a {
    text-decoration: none
}

.cli-modal .cli-modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (.5rem * 2))
}

@media (min-width:576px) {
    .cli-modal .cli-modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
        min-height: calc(100% - (1.75rem * 2))
    }
}

.cli-modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: .2rem;
    box-sizing: border-box;
    outline: 0
}

.cli-modal .row {
    margin: 0 -15px
}

.cli-modal .modal-body {
    padding: 0;
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.cli-modal .cli-modal-close:focus {
    outline: 0
}

.cli-switch {
    display: inline-block;
    position: relative;
    min-height: 1px;
    padding-left: 38px;
    font-size: 14px
}

.cli-switch input[type=checkbox] {
    display: none
}

.cli-switch .cli-slider {
    background-color: #e3e1e8;
    height: 20px;
    width: 38px;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s
}

.cli-switch .cli-slider:before {
    background-color: #fff;
    bottom: 2px;
    content: "";
    height: 15px;
    left: 3px;
    position: absolute;
    transition: .4s;
    width: 15px
}

.cli-switch input:checked+.cli-slider {
    background-color: #28a745
}

.cli-switch input:checked+.cli-slider:before {
    transform: translateX(18px)
}

.cli-switch .cli-slider {
    border-radius: 34px;
    font-size: 0
}

.cli-switch .cli-slider:before {
    border-radius: 50%
}

.cli-tab-content {
    background: #fff
}

.cli-nav-pills {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    -ms-flex-direction: column;
    flex-direction: column
}

.cli-nav-pills,
.cli-tab-content {
    width: 100%;
    padding: 5px 30px 5px 5px;
    box-sizing: border-box
}

@media (max-width:767px) {
    .cli-nav-pills,
    .cli-tab-content {
        padding: 30px 10px
    }
}

.cli-nav-pills {
    background: #fff
}

.cli-nav-pills .cli-nav-link {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    color: #2a2a2a;
    font-size: 14px;
    display: block;
    padding: .5rem 1rem;
    border-radius: .25rem;
    cursor: pointer
}

.cli-nav-pills .cli-nav-link.cli-active,
.cli-nav-pills .cli-show>.cli-nav-link {
    background-color: #f6f6f9;
    border: 1px solid #ccc
}

.cli-nav-pills .cli-nav-link.cli-active {
    color: #2a2a2a
}

.cli-tab-content .cli-button-wrapper {
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid #d6d6d6
}

.cli-tab-content p {
    color: #343438;
    font-size: 14px;
    margin-top: 0
}

.cli-tab-content h4 {
    font-size: 20px;
    margin-bottom: 1.5rem;
    margin-top: 0;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit
}

#cookie-law-info-bar .cli-nav-pills,
#cookie-law-info-bar .cli-nav-pills .cli-show>.cli-nav-link,
#cookie-law-info-bar .cli-tab-content,
#cookie-law-info-bar a.cli-nav-link.cli-active {
    background: 0 0
}

#cookie-law-info-bar .cli-nav-link,
#cookie-law-info-bar .cli-nav-pills .cli-nav-link.cli-active,
#cookie-law-info-bar .cli-switch .cli-slider:after,
#cookie-law-info-bar .cli-tab-container p,
#cookie-law-info-bar span.cli-necessary-caption {
    color: inherit
}

#cookie-law-info-bar .cli-tab-header a:before {
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor
}

#cookie-law-info-bar .cli-row {
    margin-top: 20px
}

#cookie-law-info-bar .cli-col-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none
}

#cookie-law-info-bar .cli-col-8 {
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%
}

.cli-wrapper {
    max-width: 90%;
    float: none;
    margin: 0 auto
}

#cookie-law-info-bar .cli-tab-content h4 {
    margin-bottom: .5rem
}

#cookie-law-info-bar .cli-nav-pills .cli-nav-link {
    padding: .2rem .5rem
}

#cookie-law-info-bar .cli-tab-container {
    display: none;
    text-align: left
}

.cli-tab-footer .cli-btn {
    background-color: #00acad;
    padding: 10px 15px
}

.cli-tab-footer {
    width: 100%;
    text-align: right;
    padding: 20px 0
}

.cli-col-12 {
    width: 100%
}

.cli-tab-header {
    display: flex;
    justify-content: space-between
}

.cli-tab-header a:before {
    width: 10px;
    height: 2px;
    left: 0;
    top: calc(50% - 1px)
}

.cli-tab-header a:after {
    width: 2px;
    height: 10px;
    left: 4px;
    top: calc(50% - 5px);
    -webkit-transform: none;
    transform: none
}

.cli-tab-header a:before {
    width: 7px;
    height: 7px;
    border-right: 1px solid #4a6e78;
    border-bottom: 1px solid #4a6e78;
    content: " ";
    transform: rotate(-45deg);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin-right: 10px
}

.cli-tab-header a.cli-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #000;
    text-transform: capitalize
}

.cli-tab-header.cli-tab-active .cli-nav-link:before {
    transform: rotate(45deg);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.cli-tab-header {
    border-radius: 5px;
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color .2s ease-out .3s, color .2s ease-out 0s;
    margin-bottom: 10px;
    background-color: #f2f2f2
}

.cli-modal .cli-modal-close {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    padding: 10px;
    background: 0 0;
    border: none;
    min-width: 40px
}

.cli-tab-container h1,
.cli-tab-container h4 {
    font-family: inherit;
    font-size: 16px;
    margin-bottom: 15px;
    margin: 10px 0
}

#cliSettingsPopup .cli-tab-section-container {
    padding-top: 12px
}

.cli-privacy-content-text,
.cli-tab-container p {
    font-size: 14px;
    line-height: 1.8;
    margin-top: 0;
    padding: 0;
    color: #000;
    margin-bottom: 10px
}

.wt-cli-privacy {
    display: none
}

.cli-tab-content {
    display: none
}

.cli-tab-section .cli-tab-content {
    padding: 10px 20px 5px 20px
}

.cli-tab-section {
    margin-top: 5px
}

@media (min-width:992px) {
    .cli-modal .cli-modal-dialog {
        max-width: 645px
    }
}

.cli-switch .cli-slider:after {
    content: attr(data-cli-disable);
    position: absolute;
    right: 50px;
    color: #000;
    font-size: 12px;
    text-align: right;
    min-width: 60px
}

.cli-switch input:checked+.cli-slider:after {
    content: attr(data-cli-enable)
}

.cli-privacy-overview:not(.cli-collapsed) .cli-privacy-content {
    transition: max-height .15s ease-out;
    overflow: hidden
}

a.cli-privacy-readmore {
    font-size: 12px;
    padding-top: 12px;
    display: inline-block;
    padding-bottom: 0;
    cursor: pointer;
    color: #000;
    text-decoration: underline
}

a.cli-privacy-readmore:before {
    content: attr(data-readmore-text)
}

.cli-collapsed a.cli-privacy-readmore:before {
    content: attr(data-readless-text)
}

.cli-collapsed .cli-privacy-content {
    transition: max-height .25s ease-in
}

.cli-privacy-content p {
    margin-bottom: 15px
}

.cli-modal-close svg {
    fill: #000
}

#myBtn {
    font-size: 13px;
    text-decoration: underline
}

span.cli-necessary-caption {
    color: #000;
    font-size: 12px
}

.cli-tab-section.cli-privacy-tab {
    display: none
}

#cookie-law-info-bar .cli-tab-section.cli-privacy-tab {
    display: block
}

#cookie-law-info-bar .cli-privacy-overview {
    display: none
}

.cli-tab-container .cli-row {
    max-height: 500px;
    overflow-y: auto
}

.cli-modal.cli-blowup.cli-out {
    z-index: -1
}

.cli-modal.cli-blowup {
    z-index: 999999;
    transform: scale(1)
}

.cli-modal.cli-blowup .cli-modal-dialog {
    animation: blowUpModal .5s cubic-bezier(.165, .84, .44, 1) forwards
}

.cli-modal.cli-blowup.cli-out .cli-modal-dialog {
    animation: blowUpModalTwo .5s cubic-bezier(.165, .84, .44, 1) forwards
}

@keyframes blowUpContent {
    0% {
        transform: scale(1);
        opacity: 1
    }
    99.9% {
        transform: scale(2);
        opacity: 0
    }
    100% {
        transform: scale(0)
    }
}

@keyframes blowUpContentTwo {
    0% {
        transform: scale(2);
        opacity: 0
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes blowUpModal {
    0% {
        transform: scale(0)
    }
    100% {
        transform: scale(1)
    }
}

@keyframes blowUpModalTwo {
    0% {
        transform: scale(1);
        opacity: 1
    }
    50% {
        transform: scale(.5);
        opacity: 0
    }
    100% {
        transform: scale(0);
        opacity: 0
    }
}

.cli-tab-section .cookielawinfo-row-cat-table td,
.cli-tab-section .cookielawinfo-row-cat-table th {
    font-size: 12px
}

.cli_settings_button {
    cursor: pointer;
    color: #62a329 !important
}

.wt-cli-sr-only {
    display: none;
    font-size: 16px
}

.cookielawinfo-column-1 {
    width: 25%
}

.cookielawinfo-column-2 {
    width: 10%
}

.cookielawinfo-column-3 {
    width: 15%
}

.cookielawinfo-column-4 {
    width: 50%
}

.cookielawinfo-simple thead {
    width: 100%
}

.cookielawinfo-simple td {
    padding: 5px 5px 5px 0;
    vertical-align: top
}

.cookielawinfo-simple thead th {
    padding-right: 10px;
    text-align: left
}

.cookielawinfo-modern {
    border: 1px solid #e3e3e3;
    background-color: #f2f2f2;
    width: 100%;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px
}

.cookielawinfo-modern td,
.cookielawinfo-modern th {
    padding: 5px;
    color: #333
}

.cookielawinfo-modern thead {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    padding: .2em 0 .2em .5em;
    text-align: left;
    color: #4b4b4b;
    background-color: #c8c8c8;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e3e3e3), color-stop(.6, #b3b3b3));
    background-image: -moz-linear-gradient(top, #d6d6d6, #b0b0b0, #b3b3b3 90%);
    border-bottom: solid 1px #999
}

.cookielawinfo-modern th {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 20px;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    text-shadow: #fff 1px 1px 1px
}

.cookielawinfo-modern td {
    line-height: 20px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff
}

.cookielawinfo-modern tr.cookielawinfo-row:hover {
    background-color: #fff
}

.cookielawinfo-elegant {
    border: 1px solid #dfdfdf;
    background-color: #f9f9f9;
    width: 100%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-family: Arial, "Bitstream Vera Sans", Helvetica, Verdana, sans-serif;
    color: #333
}

.cookielawinfo-elegant tr {
    border-top-color: #fff;
    border-bottom: 1px solid #dfdfdf;
    color: #555
}

.cookielawinfo-elegant th {
    text-shadow: rgba(255, 255, 255, .796875) 0 1px 0;
    font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
    font-weight: 400;
    padding: 7px 7px 8px;
    text-align: left;
    line-height: 1.3em;
    font-size: 14px
}

.cookielawinfo-elegant td {
    font-size: 12px;
    padding: 4px 7px 2px;
    vertical-align: top
}

.cookielawinfo-rounded {
    background-color: #f5f5f5;
    padding: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #ebebeb
}

.cookielawinfo-rounded td,
.rounded th {
    padding: 1px 5px
}

.cookielawinfo-rounded thead {
    text-shadow: 0 1px 0 #fff;
    color: #999
}

.cookielawinfo-rounded th {
    text-align: left;
    text-transform: uppercase;
    font-size: 11pt;
    border-bottom: 1px solid #fff;
    padding: 1px 5px
}

.cookielawinfo-rounded td {
    font-size: 10pt;
    padding: 5px
}

.cookielawinfo-rounded tr.cookielawinfo-row:hover {
    background-color: #fff
}

table.cookielawinfo-classic {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    color: #333
}

table.cookielawinfo-classic thead tr th {
    text-transform: uppercase;
    background: #e2e2e2
}

table.cookielawinfo-classic tfoot tr td,
table.cookielawinfo-classic tfoot tr th {
    text-transform: uppercase;
    color: #000;
    font-weight: 700
}

table.cookielawinfo-classic tfoot tr th {
    width: 20%
}

table.cookielawinfo-classic tfoot tr td {
    width: 80%
}

table.cookielawinfo-classic td,
table.cookielawinfo-classic th {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 5px;
    line-height: 1.8em;
    font-size: .8em;
    vertical-align: top;
    width: 20%
}

table.cookielawinfo-classic tr.odd td,
table.cookielawinfo-classic tr.odd th {
    background: #efefef
}

table.cookielawinfo-winter {
    font: 85% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
    padding: 0;
    margin: 10px 0 20px;
    border-collapse: collapse;
    color: #333;
    background: #f3f5f7
}

table.cookielawinfo-winter a {
    color: #3a4856;
    text-decoration: none;
    border-bottom: 1px solid #c6c8cb
}

table.cookielawinfo-winter a:visited {
    color: #777
}

table.cookielawinfo-winter a:hover {
    color: #000
}

table.cookielawinfo-winter caption {
    text-align: left;
    text-transform: uppercase;
    padding-bottom: 10px;
    font: 200% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif
}

table.cookielawinfo-winter thead th {
    background: #3a4856;
    padding: 15px 10px;
    color: #fff;
    text-align: left;
    font-weight: 400
}

table.cookielawinfo-winter tbody {
    border-left: 1px solid #eaecee;
    border-right: 1px solid #eaecee
}

table.cookielawinfo-winter tbody {
    border-bottom: 1px solid #eaecee
}

table.cookielawinfo-winter tbody td,
table.cookielawinfo-winter tbody th {
    padding: 10px;
    text-align: left
}

table.cookielawinfo-winter tbody tr {
    background: #f3f5f7
}

table.cookielawinfo-winter tbody tr.odd {
    background: #f0f2f4
}

table.cookielawinfo-winter tbody tr:hover {
    background: #eaecee;
    color: #111
}

table.cookielawinfo-winter tfoot td,
table.cookielawinfo-winter tfoot th,
table.cookielawinfo-winter tfoot tr {
    text-align: left;
    font: 120% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
    text-transform: uppercase;
    background: #fff;
    padding: 10px
}

@media(max-width:800px) {
    table.cookielawinfo-row-cat-table td,
    table.cookielawinfo-row-cat-table th {
        width: 23%;
        font-size: 12px;
        word-wrap: break-word
    }
    table.cookielawinfo-row-cat-table .cookielawinfo-column-4 {
        width: 45%
    }
}

.cookielawinfo-row-cat-title {
    border-bottom: 1px solid #eee;
    text-align: center
}

.cookielawinfo-row-cat-title-head {
    text-align: center
}

.cookielawinfo-row-cat-table {
    width: 99%;
    margin-left: 5px
}

.transparentText {
    margin: 30px;
    background-color: #fff;
    border: 1px solid #000;
    opacity: .6
}

.transparentText p {
    margin: 5%;
    font-weight: bolder;
    color: #000;
    font-size: 20px
}

.btn-home {
    width: 100%;
    margin: auto;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    box-shadow: 0 2px 48px 0 rgba(0, 0, 0, .08);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #fff;
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .88px;
    outline: 0 !important;
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.btn-home:after {
    content: "";
    position: absolute;
    width: 150px;
    height: 100px;
    left: -70px;
    top: 0;
    background: #f7fafd;
    transform: rotate(60deg);
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s
}

.btn-home i {
    margin-left: 22px;
    margin-right: 32px;
    position: relative;
    z-index: 2;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    color: #0f2944
}

.btn-home span {
    position: relative;
    z-index: 2;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    color: #0f2944
}

.btn-home.active i,
.btn-home:hover i {
    color: #fff;
    margin-left: 25px;
    margin-right: 37px
}

.btn-home.active:after,
.btn-home:hover:after {
    height: 120px;
    background: #dcaee6
}

@media (max-width:768px) {
    .btn-home {
        margin-bottom: 10px
    }
}

.service-block .icon {
    position: absolute;
    top: 40px;
    left: 20px;
    font-size: 48px;
    line-height: 60px;
    color: #505cfd
}

.service-block {
    position: relative;
    margin-bottom: 3px;
    padding: 3px
}

.service-block h3 {
    position: relative;
    font-size: 16px;
    line-height: 30px;
    color: #232323;
    font-weight: 600;
    margin-bottom: 14px
}

.service-block .inner-box {
    position: relative;
    border: 1px solid #e7e7e7;
    padding: 20px 20px;
    height: 195px
}

.service-block h3 a {
    color: #232323;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    text-transform: capitalize
}

.service-block .inner-box:hover:after {
    top: 0;
    height: 100%
}

.service-block .inner-box:hover:before {
    left: 0;
    width: 100%
}

.service-block .inner-box:after {
    top: 50%;
    left: 0;
    height: 0;
    width: 100%;
    border-left: 4px solid #ff214f;
    border-right: 4px solid #ff214f;
    z-index: -1
}

.service-block .inner-box:before {
    border-top: 4px solid #ff214f;
    border-bottom: 4px solid #ff214f;
    height: 100%;
    width: 0;
    top: 0;
    left: 50%
}

.service-block .inner-box:after,
.service-block .inner-box:before {
    position: absolute;
    content: "";
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

0% {
    opacity: 0;
    -webkit-transform:translateY(20px);
    -ms-transform:translateY(20px);
    transform:translateY(20px)
}

100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.we_img {
    text-align: center
}

.about,
.codes,
.reservation,
.team {
    padding: 5em 0
}

.about {
    padding: 2em 0
}

@media(max-width:991px) {
    .service-block .inner-box {
        height: 215px
    }
    .service-block {
        width: 50%
    }
    .about,
    .cid,
    .contact,
    .letter_head,
    .our_videos,
    .primary,
    .responsive,
    .say-hallo,
    .testimonial,
    .unique,
    .why_gyso {
        padding: 0
    }
}

@media(max-width:767px) {
    .service-block .inner-box {
        height: 235px
    }
    .service-block h3 {
        font-size: 15px
    }
    .service-block {
        width: 50%;
        float: left
    }
}

@media(max-width:667px) {
    .service-block .inner-box {
        height: 280px
    }
}

@media(max-width:640px) {
    .service-block {
        width: 100%;
        text-align: center
    }
    .service-block .inner-box {
        height: 200px
    }
}

@media(max-width:568px) {
    .service-block .inner-box {
        height: 210px
    }
}

@media(max-width:384px) {
    .service-block .inner-box {
        height: 250px
    }
}

@media(max-width:375px) {
    .service-block .inner-box {
        height: 235px
    }
    .about {
        padding: 2em 0 0
    }
}

.page {
    background-color: #fff
}

.page .cover {
    margin-top: 80px;
    min-height: 270px;
    position: relative;
    overflow: hidden
}

.page .cover:before {
    content: "";
    position: absolute;
    width: 140%;
    height: 140%;
    left: -20%;
    top: -20%;
    right: -20%;
    bottom: -20%;
    background-image: linear-gradient(-135deg, #29323c 9%, #0f2944 91%);
    z-index: 2;
    opacity: .7
}

.page .cover .page-top {
    position: absolute;
    width: 100%;
    bottom: 50px;
    z-index: 3
}

.page .cover .page-top h1 {
    font-weight: 400;
    font-size: 36px;
    height: 50px;
    line-height: 46px;
    letter-spacing: 1.4px;
    color: #fff;
    text-align: center
}

.page .cover .page-top h1:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 19px;
    height: 2px;
    background: #fff;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px
}

.page .cover .page-top .breadcrumb {
    float: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: 0 0;
    padding: 0;
    margin-top: 8px;
    margin-bottom: 0;
    display: block;
    text-align: center
}

.page .cover .page-top .breadcrumb li {
    font-weight: 400;
    font-size: 14px;
    color: #e5e9f7;
    line-height: 30px;
    margin-left: 10px;
    display: inline-block
}

.page .cover .page-top .breadcrumb li:after {
    font-family: FontAwesome;
    content: "\f105";
    margin-left: 10px;
    color: #e5e9f7
}

.page .cover .page-top .breadcrumb li:first-child {
    margin-left: 0
}

.page .cover .page-top .breadcrumb li:last-child:after {
    content: "";
    margin-left: 0
}

.page .cover .page-top .breadcrumb li a {
    font-weight: 400;
    font-size: 14px;
    color: #fff
}

.page .page-bottom {
    padding-top: 65px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .88px;
    line-height: 28px;
    color: #6f8ba4;
    background-color: #501e5f
}

.page .page-bottom p {
    margin-bottom: 28px;
    font-size: 14px;
    margin-top: 34px
}

.page .page-bottom .data-analytic {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 65px
}

.page .page-bottom .data-analytic.left .data-analytic-image {
    float: right
}

.page .page-bottom .data-analytic.left .data-analytic-text {
    left: 0
}

.page .page-bottom .data-analytic .data-analytic-image {
    position: relative;
    width: 70%;
    float: left;
    height: 500px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 48px 0 rgba(0, 0, 0, .08);
    z-index: 1
}

.page .page-bottom .data-analytic .data-analytic-text {
    position: absolute;
    z-index: 2;
    width: 40%;
    float: right;
    right: 0;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
    background: #fff;
    box-shadow: 0 2px 48px 0 rgba(0, 0, 0, .08);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 30px;
    padding-bottom: 10px
}

.data-analytic-text .bar {
    height: 4px;
    width: 85px;
    background: #813a96;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px
}

.data-analytic-text .bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #fff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG
}

.page .page-bottom .data-analytic .data-analytic-text h2 {
    font-weight: 400;
    font-size: 35px;
    line-height: 38px;
    letter-spacing: 1.75px;
    color: #0f2944;
    margin-bottom: 20px
}

.page .page-bottom .data-analytic .data-analytic-text p {
    font-weight: 400;
    font-size: 14px;
    text-align: justify;
    line-height: 26px;
    margin-bottom: 20px
}

.page .page-bottom .features-small-item p {
    margin-bottom: 0 !important
}

.page .page-bottom .page-detail .data-analytic {
    margin-bottom: 30px !important
}

.page .page-bottom .page-detail .data-analytic .data-analytic-image {
    border-radius: 30px 5px 30px 30px
}

.page .page-bottom .page-detail .data-analytic .data-analytic-image:before {
    display: none
}

.page .page-bottom .page-detail .data-analytic .data-analytic-text {
    border-radius: 30px 5px 30px 30px
}

@media (max-width:991px) {
    .page .cover {
        margin-top: 80px
    }
    .page .cover h1 {
        font-size: 26px !important;
        line-height: 36px !important;
        height: auto !important;
        padding-bottom: 15px
    }
    .page .cover .page-top {
        text-align: center
    }
    .page .cover .page-top .breadcrumb {
        float: none;
        text-align: center;
        display: block
    }
    .page .cover .page-top .breadcrumb li {
        display: inline
    }
    .page .page-bottom .data-analytic {
        overflow: initial !important
    }
    .page .page-bottom .data-analytic .data-analytic-image {
        width: 100% !important;
        height: 300px;
        margin-bottom: 30px
    }
    .page .page-bottom .data-analytic .data-analytic-text {
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        transform: perspective(1px) translateY(0) !important;
        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, .06)
    }
}

#imgfix_wrapper_layer_0_0 .imgfix_src_img {
    left: -999999px;
    right: -999999px;
    top: -999999px;
    bottom: -999999px;
    z-index: 0;
    width: auto;
    height: auto;
    max-width: auto !important;
    min-width: auto !important;
    position: absolute;
    margin: auto;
    -webkit-transition: all .4s;
    transition: all .4s;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.service_wrapper {
    background-color: #f5f5f5;
    padding: 65px 0 60px
}

@media (max-width:767px) {
    .service_wrapper {
        padding: 45px 0 1px
    }
}

.service_wrapper h2 {
    font-size: 45px;
    font-weight: 700;
    margin: 0;
    padding: 0
}

@media (max-width:767px) {
    .service_wrapper h2 {
        font-size: 35px;
        text-align: center;
        margin: 0;
        font-weight: 700
    }
}

.service_wrapper .s_div {
    margin: 10px 0 45px
}

@media (max-width:767px) {
    .service_wrapper .s_div {
        margin: 10px 0 35px
    }
}

.service_wrapper .s_div p {
    font-size: 24px;
    padding: 0;
    margin: 0;
    display: inline-block;
    width: 75%;
    line-height: 25px;
    color: #131313
}

@media (max-width:767px) {
    .service_wrapper .s_div p {
        font-size: 18px;
        text-align: center;
        font-weight: 700;
        width: 100%;
        margin: 20px 0 30px
    }
}

.service_wrapper .s_div a {
    color: #830051;
    font-size: 20px;
    float: right;
    margin-top: 10px
}

@media (max-width:767px) {
    .service_wrapper .s_div a {
        font-size: 16px;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        float: none
    }
    .service_wrapper .box_content .list_services.three-col:first-child {
        clear: both
    }
}

.service_wrapper .box_content .list_services,
.service_wrapper .box_content .service-desc,
.service_wrapper .box_content .service-tags {
    padding: 30px 30px 36px
}

.service_wrapper .box_content .list_services {
    padding: 0;
    background: #fff;
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
    margin-bottom: 40px
}

.service_wrapper .box_content .list_services.three-col:nth-child(2) {
    margin: 10px 7.5% 20px
}

@media (max-width:767px) {
    .service_wrapper .box_content .list_services.three-col:nth-child(2) {
        margin-left: 0
    }
    .service_wrapper .box_content .list_services.three-col:nth-child(3) {
        clear: both
    }
}

.service_wrapper .box_content .list_services.three-col:nth-child(5) {
    margin: 10px 7.5% 20px
}

.service_wrapper .box_content .list_services.two-col {
    margin: 0 0 25px
}

.service_wrapper .box_content .list_services .service-desc {
    min-height: 140px;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .07)
}

@media (max-width:767px) {
    .service_wrapper .box_content .list_services.two-col {
        width: 95%;
        margin-left: 16px
    }
    .service_wrapper .box_content .list_services .service-desc {
        min-height: 120px;
        padding: 0 36px
    }
}

.service_wrapper .box_content .list_services .service-desc p {
    margin: 0;
    padding: 0;
    font-size: 14px
}

@media (max-width:767px) {
    .service_wrapper .box_content .list_services .service-desc p {
        font-size: 15px;
        padding: 25px 20px 20px
    }
}

.service_wrapper .box_content .list_services .service-tags p {
    padding: 0;
    margin: 0 0 10px
}

.service_wrapper .box_content .list_services .service-tags p a {
    display: none;
    font-size: 14px;
    padding-top: 0 !important;
    text-decoration: underline;
    font-weight: 400
}

.service_wrapper .box_content .list_services .service-title {
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .07);
    display: -ms-flexbox;
    display: flex
}

@media (max-width:767px) {
    .service_wrapper .box_content .list_services {
        padding-bottom: 0;
        box-shadow: 0 3px 30px 0 rgba(0, 0, 0, .05);
        width: 100%
    }
    .service_wrapper .box_content .list_services .service-title {
        padding: 5px 15px !important
    }
    .service_wrapper .box_content div {
        height: auto;
        border-bottom: none
    }
}

.service_wrapper .box_content .list_services .border-maroon {
    background: linear-gradient(90deg, #a71930 2%, #fff, 2%, #fff 95%)
}

.service_wrapper .box_content .list_services .border-purple {
    background: linear-gradient(90deg, #7e358b 2%, #fff, 2%, #fff 95%)
}

.service_wrapper .box_content .list_services .border-pink {
    background: linear-gradient(90deg, #d23fa2 2%, #fff, 2%, #fff 95%)
}

.service_wrapper .box_content .list_services .border-blue {
    background: linear-gradient(90deg, #00f 2%, #fff, 2%, #fff 95%)
}

.service_wrapper .box_content .list_services .border-magenta {
    background: linear-gradient(90deg, #e99458 2%, #fff, 2%, #fff 95%)
}

.service_wrapper .box_content .list_services .border-grey {
    background: linear-gradient(90deg, #cecece 2%, #fff, 2%, #fff 95%)
}

.service_wrapper .box_content.owl-carousel {
    padding-left: 16px;
    width: 95%
}

.service_wrapper .box_content div.owl-dots {
    margin: 30px 0 43px
}

.service_wrapper .box_content div .owl-dot.active span {
    width: 40px !important;
    background-color: #830051 !important
}

.service_wrapper .box_content div .owl-stage-outer {
    background: #fff;
    border-bottom: none
}

.service_wrapper .box_content div .owl-stage {
    border-bottom: none
}

.service_wrapper .box_content div .service-title {
    height: 125px;
    padding: 0 10px 0 45px
}

.service_wrapper .box_content div .service-title a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    width: 100%
}

.service_wrapper .box_content div .service-title a .arrow {
    background: url(../img/services-arrow.svg) center center no-repeat !important;
    width: 20px;
    height: 20px
}

.service_wrapper .box_content div .service-title h4 {
    min-height: 35px;
    font-size: 25px;
    line-height: 35px;
    margin: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media (max-width:767px) {
    .service_wrapper .box_content div .service-title h4 {
        min-height: auto;
        font-size: 30px;
        padding: 28px
    }
}

.rs-about.style1 .services-part {
    display: inline-flex
}

.rs-about.style1 .services-part .services-icon img {
    width: 80px;
    height: 80px;
    max-width: unset;
    transition: all .3s ease
}

.rs-about.style1 .services-part .services-text {
    padding-left: 15px
}

.rs-about.style1 .services-part .services-text .title {
    font-size: 20px;
    margin-bottom: 10px
}

.rs-about.style1 .services-part:hover .services-icon img {
    animation-name: pulse;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}

.rs-about.style2 {
    position: relative
}

.rs-about.style2 .cl-skill-bar .skillbar-title {
    font-weight: 400;
    color: #fff;
    font-size: 14px
}

.rs-about.style2 .cl-skill-bar .skillbar {
    background: rgba(255, 255, 255, .6);
    height: 5px;
    margin: 17px 0 24px;
    position: relative;
    width: 100%
}

.rs-about.style2 .cl-skill-bar .skillbar .skillbar-bar {
    background: #fff;
    height: 5px;
    width: 0;
    margin-bottom: 0
}

.rs-about.style2 .cl-skill-bar .skillbar .skill-bar-percent {
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    top: -45px;
    font-size: 14px;
    font-weight: 700;
    color: #fff
}

.rs-about.style4 .image-wrap img {
    box-shadow: 0 0 48px 0 rgba(0, 0, 0, .11)
}

.rs-about.style4 .sec-title.custom-law {
    position: relative;
    border-bottom: 1px dashed #b1976b;
    padding-bottom: 54px;
    margin-bottom: 19px
}

.rs-about.style4 .sec-title.custom-law .justice-icon {
    width: 40px;
    height: 40px;
    line-height: 0;
    border-radius: 100%;
    text-align: center;
    padding: 10px;
    background: #fff;
    left: 50%;
    bottom: -19px;
    transform: translateX(-50%);
    position: absolute
}

.rs-about.style4 .author-info {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.rs-about.style4 .author-info .author-detail {
    padding-right: 20px
}

.rs-about.style4 .author-info .author-detail .name {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600
}

.rs-about.style4 .author-info .author-detail .designation {
    font-weight: 700;
    font-size: 16px;
    line-height: 27px;
    color: #555
}

.rs-about.style5 .counter-wrap .content-part {
    align-items: center;
    display: flex
}

.rs-about.style5 .counter-wrap .content-part .counter-part {
    border-right: 2px solid #e0dddd;
    padding: 10px 0;
    margin-right: 30px;
    min-width: 154px
}

.rs-about.style5 .counter-wrap .content-part .counter-part .rs-count {
    color: #d83030;
    line-height: 1;
    font-size: 60px;
    font-weight: 900;
    margin-bottom: 7px;
    display: inline-block;
    position: relative
}

.rs-about.style5 .counter-wrap .content-part .counter-part .rs-count.thousand {
    padding-right: 35px
}

.rs-about.style5 .counter-wrap .content-part .counter-part .rs-count.thousand:after {
    position: absolute;
    content: "k";
    right: 0
}

.rs-about.style5 .counter-wrap .content-part .counter-part .title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    text-transform: uppercase;
    color: #333;
    letter-spacing: 2px
}

.rs-about.style5 .img-part {
    position: relative
}

.rs-about.style5 .img-part .morphin {
    position: absolute;
    right: 50px;
    bottom: 30px;
    width: 400px;
    height: 400px;
    z-index: -1
}

.rs-about.style5 .img-part:after {
    position: absolute;
    content: '';
    bottom: 0
}

.rs-about.style5 .wraping {
    border-bottom: 1px solid #e5e5e5;
    position: relative
}

.rs-about.style5 .wraping:after,
.rs-about.style5 .wraping:before {
    position: absolute;
    content: '';
    bottom: -1.5px;
    width: 250px;
    background: #fff;
    height: 3px
}

.rs-about.style5 .wraping:after {
    left: 210px
}

.rs-about.style5 .wraping:before {
    right: 210px
}

.rs-about.style6 .img-part {
    position: relative
}

.rs-about.style6 .img-part img {
    position: relative;
    z-index: 1
}

.rs-about.style6 .img-part .morphin {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-90deg, #d83030, #032e42);
    border: none
}

.rs-about.style6 .img-part:after {
    position: absolute;
    content: '';
    bottom: 0
}

.rs-about.style6 .video-part {
    display: flex;
    align-items: center
}

.rs-about.style6 .video-part .title-part {
    padding-left: 30px
}

.rs-about.style6 .video-part .title-part .title {
    color: #fff;
    margin: 0;
    font-size: 18px;
    font-weight: 500
}

.rs-about.style7 {
    position: relative
}

.rs-about.style7 .modify-gap {
    padding-right: 250px;
    padding-left: 70px
}

.rs-about.style7 .images-about img {
    max-width: unset;
    width: 830px
}

.rs-about.style7 .about-shape .animate-img {
    position: absolute;
    left: 50px;
    top: 580px
}

.rs-about.style9 .services-item {
    display: flex
}

.rs-about.style9 .services-item .services-icon img {
    max-width: unset;
    height: 70px;
    width: 70px
}

.rs-about.style9 .services-item .services-text {
    padding: 0 0 0 18px
}

.rs-about.style9 .services-item .services-text .title {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 0
}

.rs-about.style9 .services-item .services-text .title a {
    color: #0a0a0a
}

.rs-about.style9 .services-item .services-text .title a:hover {
    color: #106eea
}

.rs-about.style9 .services-item .services-text .services-txt {
    margin-bottom: 0
}

.rs-about.style10 .accordion {
    border-width: 12px
}

.rs-about.style10 .accordion .card {
    margin-bottom: 3px;
    border: none
}

.rs-about.style10 .accordion .card:last-child {
    margin-bottom: 0
}

.rs-about.style10 .accordion .card .card-header {
    padding: 0 !important;
    border: none;
    background: #fff;
    padding: 16px 2px 16px 2px !important
}

.rs-about.style10 .accordion .card .card-header .card-link {
    color: #1273eb;
    font-weight: 700
}

.rs-about.style10 .accordion .card .card-body {
    background: #f9f9f9;
    font-weight: 400;
    color: #363636;
    padding: 17px 65px 40px 22px !important;
    border: none
}

.rs-about.style10 .accordion .card .card-header .card-link {
    position: relative;
    padding-left: 44px !important
}

.rs-about.style10 .accordion .card .card-header .card-link:after {
    content: "\f078";
    font-family: FontAwesome;
    position: absolute;
    left: 20px;
    color: #106eea;
    font-size: 15px;
    font-weight: 200;
    top: 50%;
    transform: translateY(-50%)
}

.rs-about.style10 .accordion .card .card-header .card-link.collapsed.card-link {
    color: #1c1b1b !important
}

.rs-about.style10 .accordion .card .card-header .card-link.collapsed:after {
    content: "\f054";
    font-family: FontAwesome;
    color: #363636
}

.rs-about.style10 .about-content {
    position: relative;
    z-index: 111
}

.rs-about.style10 .about-content .rs-animations .spinner {
    position: absolute;
    bottom: 0;
    z-index: -11
}

.rs-about.style10 .about-content .rs-animations .spinner.dot {
    top: -45px;
    left: -40px
}

.rs-about.style10 .about-content .rs-animations .spinner.ball {
    bottom: -85px;
    right: 14%
}

.rs-about.style10 .rs-divider {
    --divider-border-style: none;
    --divider-border-width: 1px;
    --divider-color: #2c2c2c;
    --divider-icon-size: 20px;
    --divider-element-spacing: 10px;
    --divider-pattern-height: 24px;
    --divider-pattern-size: 20px;
    --divider-pattern-url: none;
    --divider-pattern-repeat: repeat-x
}

.rs-about.style10 .rs-divider .line {
    position: relative;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px
}

.rs-about.style10 .rs-divider .line:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1rem;
    background: linear-gradient(90deg, var(--blue-color) 0 50%, transparent 0 100%) 0 0 1rem;
    mask: linear-gradient(-90deg, #000, transparent)
}

.rs-about.style11 {
    position: relative
}

.rs-about.style11 .images-part {
    border-style: solid;
    border-width: 20px 20px 20px 20px;
    border-color: #fff;
    border-radius: 50px 50px 50px 50px
}

.rs-about.style11 .images-part img {
    border-radius: 20px 20px 20px 20px
}

.rs-about.style11 .animations {
    position: absolute;
    top: 7%;
    right: 29%
}

.rs-about.inner .image-part {
    position: relative
}

.rs-about.inner .image-part img {
    border-radius: 10px
}

.rs-about.inner .image-part .author-info {
    background: #106eea;
    text-align: center;
    padding: 30px 30px;
    width: 270px;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -64px
}

.rs-about.inner .image-part .author-info .name {
    color: #fff;
    font-weight: 600;
    font-size: 25px;
    line-height: 32px;
    margin-bottom: 8px;
    text-transform: uppercase
}

.rs-about.inner .image-part .author-info .designation {
    color: #fff;
    display: block;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 2.5px
}

.brand {
    margin-bottom: 0
}

div#clxReviewWidget {
    border: 1px solid #3a4663;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #fff;
    width: auto
}

div#clxReviewWidget h2 {
    color: #fff;
    font-size: 14px;
    padding: 5px !important;
    margin: 0 !important;
    font-weight: 700;
    text-align: left;
    background: #3a4663;
    text-shadow: none
}

div#clxReviewWidget div#clxReviews {
    background: #fff;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 5px;
    height: 300px;
    overflow: hidden;
    text-align: left
}

div#clxReviewWidget div#clxReviews div {
    padding: 0 0 5px 0;
    border-bottom: 1px solid #3a4663;
    min-height: 70px
}

div#clxReviewWidget div#clxReviews span[id^=clx_stars] {
    line-height: 20px;
    height: 20px;
    min-height: 20px;
    display: block
}

div#clxReviewWidget div#clxReviews div:last-child {
    border-bottom: none
}

div#clxReviewWidget div#clxReviews div h3 {
    color: #3a4663;
    font-size: 13px;
    margin: 0;
    padding: 5px 0;
    font-weight: 700
}

div#clxReviewWidget div#clxReviews p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #000
}

div#clxReviewWidget div#clxReviews div p.clx_meta {
    margin: 5px 0 0 0;
    padding: 0;
    font-size: 12px;
    color: #666
}

div#clxReviewWidget div#clxReviews div div.clx_container {
    overflow: hidden
}

div#clxReviewWidget div#clxReviews img.clx_avatar {
    border: 1px solid #3a4663 !important;
    padding: 3px !important;
    float: left !important;
    margin: 5px !important;
    width: 30px !important;
    height: 30px !important
}

div#clxReviewWidget div#clx_foot {
    padding: 5px;
    background: #3a4663;
    overflow: hidden
}

div#clxReviewWidget div#clx_foot img {
    margin: 0 !important;
    padding: 0 !important;
    border: 0
}

div#clxReviewWidget div#clx_foot a#clx_rev_url {
    float: right;
    display: block;
    text-shadow: none;
    font-size: 12px
}

.bg-aliceblue {
    background-color: #f0f8ff
}

ul.listing-style {
    margin: 0
}

ul.listing-style li {
    position: relative;
    padding-left: 30px;
    line-height: 25px;
    font-weight: 400;
    font-size: 14px;
    list-style-type: none;
    color: #6c6c96
}

ul.listing-style li:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    content: "\f058";
    font-family: FontAwesome;
    color: #106eea;
    font-size: 20px
}

ul.listing-style li:last-child {
    margin: 0 !important
}

ul.listing-style.regular li {
    font-weight: 400
}

ul.listing-style.regular2 li {
    font-weight: 400;
    margin-bottom: 7px
}

ul.listing-style.regular2 li:before {
    font-size: 24px;
    top: -2px
}

ul.listing-style2 li {
    position: relative;
    padding-left: 30px;
    line-height: 2em;
    font-size: 16px;
    margin-bottom: 15px
}

ul.listing-style2 li:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    content: "\f05d";
    font-family: FontAwesome;
    color: #106eea;
    font-size: 22px
}

ul.listing-style2 li:last-child {
    margin-bottom: 0 !important
}

ul.listing-style2.modify li {
    padding-left: 25px;
    margin-bottom: 8px
}

ul.listing-style2.modify li:before {
    content: "\f105"
}

#notfound {
    position: relative;
    height: 100vh;
    background-color: #fafbfd
}

#notfound .notfound {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.notfound {
    max-width: 520px;
    width: 100%;
    text-align: center
}

.notfound .notfound-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: -1
}

.notfound .notfound-bg>div {
    width: 100%;
    background: #fff;
    border-radius: 90px;
    height: 150px
}

.notfound .notfound-bg>div:nth-child(1) {
    -webkit-box-shadow: 5px 5px 0 0 #f3f3f3;
    box-shadow: 5px 5px 0 0 #f3f3f3
}

.notfound .notfound-bg>div:nth-child(2) {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-box-shadow: 5px 5px 0 0 #f3f3f3;
    box-shadow: 5px 5px 0 0 #f3f3f3;
    position: relative;
    z-index: 10
}

.notfound .notfound-bg>div:nth-child(3) {
    -webkit-box-shadow: 5px 5px 0 0 #f3f3f3;
    box-shadow: 5px 5px 0 0 #f3f3f3;
    position: relative;
    z-index: 90
}

.notfound h1 {
    font-family: Quicksand, sans-serif;
    font-size: 86px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px;
    color: #151515
}

.notfound h2 {
    font-family: Quicksand, sans-serif;
    font-size: 26px;
    margin: 0;
    font-weight: 700;
    color: #151515
}

.notfound a {
    font-family: Quicksand, sans-serif;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    background: #9563a5;
    display: inline-block;
    padding: 15px 30px;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
    margin-top: 20px
}

.notfound>a:hover {
    background-color: #813a96;
    color: #fff
}

.notfound-social {
    margin-top: 20px
}

.notfound-social>a {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    width: 40px;
    font-size: 14px;
    color: #fff;
    background-color: #dedede;
    margin: 3px;
    padding: 0;
    -webkit-transition: .2s all;
    transition: .2s all
}

.notfound-social>a:hover {
    background-color: #813a96;
    color: #fff
}

@media only screen and (max-width:767px) {
    .notfound .notfound-bg {
        width: 287px;
        margin: auto
    }
    .notfound .notfound-bg>div {
        height: 85px
    }
}

@media only screen and (max-width:480px) {
    .notfound h1 {
        font-size: 68px
    }
    .notfound h2 {
        font-size: 18px
    }
}

.player .vp-target {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20
}

#fade {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
  }
  
  #light {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 600px;
    max-height: 360px;
    margin-left: -300px;
    margin-top: -180px;
    border: 2px solid #FFF;
    background: #FFF;
    z-index: 1002;
    overflow: visible;
  }
  
  #boxclose {
    float: right;
    cursor: pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 3px;
    background: #222222;
    font-size: 31px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 11px 3px;
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: 1002;
    opacity: 0.9;
  }
  
  .boxclose:before {
    content: "×";
  }
  
  #fade:hover ~ #boxclose {
    display:none;
  }
  
  .test:hover ~ .test2 {
    display: none;
  }
  .fria-nav .navbar .navbar-brand img {
      width: 100%;
  }
  marquee {font-size: 9px;color: #833b95;letter-spacing: 1px;margin-top: 3px;display: list-item;font-family: Trajan Pro;font-weight: 800;list-style: none;width: 163px;}
  
.send-enquiry {
    position: fixed;
    right: -40px;
    color: #fff !important;
    background-color: #fbff00;
    border-color: #fbff00;
    top: 45%;
    z-index: 10;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

@media (max-width: 575.98px) {
    .send-enquiry {
        top: 45%;
    }
}

/* Simple Line icons */

.feature-list .icon {
	float: left;
	text-align: center;
	font-size: 48px;
	line-height: 1;
	color: #fff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.feature-list img {
	width: 40px;
	text-align: center;
	line-height: 1;
}

.feature-container h3,
.feature-container h4 {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 5px;
}

.feature-details {
	margin-left: 55px;
}

.feature-details p {
    text-align: center;
}

.btn1 {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 5px 10px;
    font-size: 15px;
    line-height: 1.5;
    border-radius: 10px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* Buttons */

.btn,
.btn:focus,
.btn.active:focus {
	border: none;
	outline: none;
	outline: 0px;
	outline-offset: 0px;
}

.btn,
button,
a.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	position: relative;
	border: 0;
	color: #fff;
	background: #757575;
	font-size: 14px;
	line-height: 1.7142857;
	font-weight: 500;
	padding: 6px 16px;
	margin: 0 4px 0 0;
	min-width: 30px;
	display: inline-block;

	text-transform: uppercase;
	letter-spacing: .5px;

	-webkit-tap-highlight-color: transparent;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;

	-webkit-transition: box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1);
	-moz-transition: box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1);
	-o-transition: box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1);
	-ms-transition: box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1);
	transition: box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1);

	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.btn.dropdown-toggle {
	min-width: auto;
}

.btn-group .btn {
	margin: 0;
}

.btn:hover,
.btn:focus,
button:hover,
.button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:focus,
.button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
	color: #fff;
	-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5);
}

.btn:active,
button:active,
.button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	color: #fff;
	background-image: -webkit-linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15));
	background-image: -moz-linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15));
	background-image: -ms-linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15));
	background-image: -o-linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15));
	background-image: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15));
}

.btn:focus,
button:focus,
.button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
	outline: 0;
	outline-offset: 0;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
	outline: 0;
	outline-offset: 0;
}

.btn-default,
.btn-default:visited,
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
	background-color: #757575;
	color: #fff;
}

.btn-default.focus, .btn-default:focus,
.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default,
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
	color: #fff;
	background-color:#757575;
	border: none;
}

.btn-main,
.btn-main:visited {
	background-color: #f44336;
}

.btn-primary,
.btn-primary:visited {
	background-color: #2962FF;
}

.btn-alt,
.btn-alt:visited {
	background-color: #3f51b5;
}

.btn-success,
.btn-success:visited {
	background-color: #2E7D32;
}

.btn-info,
.btn-info:visited {
	background-color: #039BE5;
}

.btn-warning,
.btn-warning:visited {
	background-color: #EF6C00;
}

.btn-danger,
.btn-danger:visited {
	background-color: #D50000;
}

.btn-sm,
.btn-xs {
	font-size: 12px;
	line-height: 1.6667;
	padding: 2px 8px;
}

.btn-lg,
.btn-group-lg >.btn,
.input-lg {
	font-size: 16px;
	line-height: 1.5;
	padding: 8px 16px;
}

.btn-xl {
	font-size: 20px;
	line-height: 1.4;
	padding: 8px 24px;
}

.input-lg {
	padding: 8px 0;
}

.btn-line,
.btn-line-inverse {
	padding: 5px 16px;
	background: transparent;
}

.btn-xs.btn-line,
.btn-xs.btn-line-inverse {
	padding: 1px 8px;
}

.btn-lg.btn-line,
.btn-lg.btn-line-inverse {
	padding: 7px 16px;
}

.btn-xl.btn-line,
.btn-xl.btn-line-inverse {
	padding: 7px 20px;
}

.btn-line,
.btn-line:active,
.btn-line:focus {
	font-weight: normal;
	background: transparent;
	color: #757575;
	border: 1px solid rgba(0,0,0,.24);
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	text-shadow: none;
	margin-top: 20px;
}

.btn-line:hover {
	border: 1px solid rgba(0,0,0,.48);
	background-image: none;
	color: #fff;

	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.btn-line:active {
	color: #9e9e9e;
	border-color: #ccc;
}

.btn-line-inverse,
.btn-line-inverse:active,
.btn-line-inverse:focus {
	font-weight: normal;
	color: rgba(255,255,255,.75);
	border: 1px solid rgba(255,255,255,.7);
}

.btn-line-inverse:hover {
	background: none;
	color: #fff;
	border-color: #fff;
}

.btn-line-inverse:active {
	color: rgba(255,255,255,.50);
	border-color: rgba(255,255,255,.50);
}

.sideTitle {
    font-weight: bolder;
    color: #813a96 !important;
}

/**** Styles Added From Aug 2022 ****/
ul.breadcrumbs-link li {
    display: inline-block;
    font-size: 14px;
}

ul.breadcrumbs-link {
    position: absolute;
    top: 10px;
    left: 20px;
    color: #ffffff;
    z-index: 10;
}
.breadcrumbs-link .breadcrumbs-home-icon {
    position: relative;
    bottom: 2px;
}
ul.breadcrumbs-link li:after {
    display: inline-block;
    content: '\276F';
    margin-left: 10px;
    margin-right: 10px;
    color: #fff;
}
ul.breadcrumbs-link li:last-child:after {
    display: none;
}
ul.breadcrumbs-link li.active {
    color: #43baff;
}
ul.breadcrumbs-link li a {
    color: #fff;
}
#contactForm .error, #profileForm .error {
    color: #ed4040;
    font-size: 14px;
}

section.consulting-services {
      padding: 60px 0;
      background: #f9f9f9;
    }
    section.consulting-services h2 {
      text-align: center;
      font-weight: 700;
      margin-bottom: 40px;
      color: #222;
    }
    .service-card {
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
      padding: 25px;
      margin-bottom: 30px;
      transition: all 0.3s ease-in-out;
    }
    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }
    .service-card h4 {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 15px;
      color: #813A96; /* updated */
    }
    .service-card p {
      font-size: 15px;
      color: #555;
      margin-bottom: 15px;
    }
    .service-card h5 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #333;
    }
    .service-card ul {
      padding-left: 20px;
      margin: 0;
    }
    .service-card ul li {
      margin-bottom: 6px;
      font-size: 14px;
      color: #444;
      position: relative;
    }
    .service-card ul li::before {
      content: "✔";
      color: #813A96; /* updated */
      position: absolute;
      left: -18px;
    }
  .service-card ul li::after {
      content: "✔";
      color: #fff; /* updated */
      position: absolute;
      left: -18px;
    }















    :root {
      --hiw-bg: #0b1220;            /* Section background */
      --hiw-track: rgba(255,255,255,0.1); /* Connector line */
      --hiw-card-bg: rgba(255,255,255,0.06);
      --hiw-card-border: linear-gradient(90deg, #813A96, #813A96);
      --hiw-text: #fff;
      --hiw-muted: #fff;
      --hiw-accent: #813A96;
    }

    /* Section wrapper */
    .hiw {
      position: relative;
      background: radial-gradient(1200px 600px at 10% -10%, rgba(129, 58, 150, 0.18), transparent 45%),
                  radial-gradient(1200px 600px at 90% 110%, rgba(129, 58, 150, 0.14), transparent 45%),
                  var(--hiw-bg);
      color: var(--hiw-text);
      overflow: hidden;
    }

    /* Decorative grid dots */
    .hiw::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(to bottom, black, transparent 70%);
      pointer-events: none;
    }

    .hiw .container-fluid {
      padding-left: 0;
      padding-right: 0;
    }

    .hiw .hiw-inner {
      max-width: 1200px;
      margin-inline: auto;
      padding: 64px 16px;
    }

    .hiw .section-head {
      text-align: center;
      margin-bottom: 28px;
    }

    .hiw h2 {
      font-weight: 800;
      letter-spacing: 0.2px;
      margin: 0 0 8px;
      font-size: clamp(28px, 3.5vw, 40px);
      color: #fff; /* Title color white */
    }

    .hiw p.lead {
      color: #fff; /* Description color white */
      max-width: 760px;
      margin: 0 auto;
    }
    .hiw-title{
		color:#fff !important;
    }
    /* Horizontal track (desktop) */
    .hiw-track {
      position: relative;
      margin: 34px 0 0;
      padding-top: 26px; /* creates space for the line */
    }
    @media (min-width: 992px) {
      .hiw-track::before {
        content: "";
        position: absolute;
        left: min(8px, 1vw);
        right: min(8px, 1vw);
        top: 38px;
        height: 2px;
        background: var(--hiw-track);
        border-radius: 2px;
      }
    }

    /* Step card */
    .hiw-step {
      position: relative;
      height: 100%;
      background: var(--hiw-card-bg);
      border: 1px solid transparent;
      border-radius: 18px;
      padding: 22px 18px 20px 18px;
      backdrop-filter: saturate(140%) blur(8px);
      transition: transform .25s ease, border-color .25s ease;
      isolation: isolate;
      text-align: center;
    }

    /* Gradient border without shadow */
    .hiw-step::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 18px;
      padding: 1px; /* border thickness */
      background: var(--hiw-card-border);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
    }

    .hiw-step:hover {
      transform: translateY(-3px);
    }

    /* Number badge */
    .hiw-num {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      background: var(--hiw-accent);
      color: #fff;
      font-size: 20px;
      margin: 0 auto 12px;
    }

    .hiw-icon {
      font-size: 28px;
      color: var(--hiw-accent);
      margin-bottom: 10px;
    }

    .hiw-step h5 {
      font-weight: 700;
      margin-bottom: 10px;
      color: #fff;
    }

    .hiw-step p {
      color: #fff;
      font-size: 15px;
    }








section.cta {
      background-color: #f8f9fa; /* light background */
      padding: 60px 0;
      text-align: center;
    }
    section.cta h2 {
      color: #333;
      font-size: 2.2rem;
      font-weight: 700;
    }
    section.cta p {
      color: #555;
      font-size: 1.2rem;
      margin-top: 15px;
    }






section.faq {
      padding: 60px 0;
    }
    section.faq h2 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 30px;
    }
    .accordion-button:not(.collapsed) {
      background-color: #813A96;   /* custom color */
      color: #fff;
    }
    .accordion-button {
      font-weight: 600;
    }
    .faq img {
      max-width: 100%;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

















    }

    .gov-section {
      background: var(--light);
      padding: 90px 0;
    }

    .gov-section h2 {
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 15px;
    }

    .gov-section p.lead {
      color: #5c4d66;
      max-width: 720px;
      margin: 0 auto 50px;
    }

    .timeline {
      position: relative;
      max-width: 900px;
      margin: 0 auto;
      padding-left: 30px;
    }

    .timeline::before {
      content: "";
      position: absolute;
      top: 0;
      left: 20px;
      width: 4px;
      height: 100%;
      background: #00B0EE;
      border-radius: 3px;
    }

    .timeline-step {
      position: relative;
      margin-bottom: 50px;
      padding-left: 60px;
    }

    .timeline-step:last-child {
      margin-bottom: 0;
    }

    .timeline-number {
      position: absolute;
      left: -2px;
      top: 0;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background:#813A96  ;
      color: #00B0EE;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 15px rgba(0,0,0,0.25);
    }

    .timeline-card {
      background: #fff;
      border-radius: 14px;
      padding: 25px 30px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.12);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .timeline-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 32px rgba(0,0,0,0.18);
    }

    .timeline-card h5 {
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 10px;
    }

    .timeline-card p {
      margin: 0;
      color: #444;
      font-size: 0.95rem;
      line-height: 1.6;
    }



 .methodology-section {
      padding: 40px 40px;
      background: #f9f9f9;
    }
   .methodology-card {
  background: #fff;
  border-left: 8px solid #813A96;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: 0.3s;
  /* removed height:100% */
}


    .methodology-card:hover {
      transform: translateY(-5px);
      border-left-color: #00B0EE;
    }
    .methodology-step {
      font-weight: 700;
      color: #813A96;
      margin-bottom: 8px;
      font-size: 18px;
    }
    .methodology-card:hover .methodology-step {
      color: #00B0EE;
    }
    .methodology-desc {
      font-size: 15px;
      color: #555;
      margin: 0;
    }
    .section-title {
      text-align: center;
      font-weight: bold;
      font-size: 28px;
      margin-bottom: 50px;
      color: #222;
    }
    .section-title span {
      color: #813A96;
    }



.content-spotlight{
  padding:72px 0;
 /* background:#f7f8fa;  section background */
  width:100%;
}
.cs-wrap{
  background:#fff;
  border-radius:16px;
  padding:36px 28px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  max-width:100%;      /* full width */
  margin:0 auto;
  border:1px solid rgba(0,0,0,.06);
  position:relative;
}

/* subtle accent bar */
.cs-wrap::before{
  content:"";
  position:absolute;
  left:0; top:0;
  height:6px; width:100%;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  background:linear-gradient(90deg,#813A96,#813A96);
}
.cs-eyebrow{
  display:inline-block;
  font-weight:600;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(129,58,150,.08);
  color:#813A96;
  padding:6px 10px;
  border-radius:999px;
  margin-bottom:14px;
}
.cs-title{
  font-weight:800;
  font-size:clamp(22px,3.2vw,34px);
  margin:4px 0 12px;
  text-align:center;
  color:#1f1f1f;
}
.cs-text{
  font-size:clamp(16px,2vw,18px);
  line-height:1.75;
  color:#4a4a4a;
  max-width:900px;  /* still limits text width */
  margin:0 auto;
  text-align:center;
}







.it-support-section {
  background-color: #F9F9F9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding:10px;
}
.it-support-section h2 {
  font-size: 2.5rem;
  line-height: 1.4;
}
.it-support-section p {
  max-width: 100%;
  margin: 0 auto 30px auto;
  font-size: 1.2rem;
  text-align:center;
}
.it-support-section .btn-light {
  background: #A688DD;
  color: #fff;
  border: none;
  text-decoration:none;
  padding:10px;
}








.faq-section {
      padding: 60px 0;
    }
    .accordion-button {
      background-color: #813A96;
      color: #fff;
      font-weight: 600;
      padding: 20px;   /* Adjusted height */
      font-size: 1.05rem;
    }
    .accordion-button.collapsed {
      background-color: #f8f9fa;
      color: #000;
    }
    .accordion-button:focus {
      box-shadow: none;
    }
    .accordion-body {
      padding: 18px;
      font-size: 1rem;
      line-height: 1.6;
    }
    /* Equal height for left and right columns */
    .faq-equal {
      display: flex;
      align-items: stretch;
    }
    .faq-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    /* Image styling */
    .faq-image {
      max-width: 80%;     /* Reduce width */
      max-height: 450px;  /* Limit height */
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }


.more-features-section h2 {
  font-weight: 700;
  font-size: 2rem;
  color: #222;
}

.services-box {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.services-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.services-box h5 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #813A96; /* Bootstrap primary blue */
}

.services-box p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 0;
}


.cta-section {
  background: #813A96; /* Violet main color */
  color: #fff;
  min-height: 280px; /* Reduced height */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.cta-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
  color:#fff ;
}

.cta-text {
  font-size: 1rem;
  max-width: 650px;
  margin: 0 auto 25px;
  line-height: 1.6;
  color: #fff;
}

/* CTA Button with Swipe Down Effect */
.cta-btn {
  position: relative;
  display: inline-block;
  padding: 12px 35px;
  border-radius: 50px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  overflow: hidden;
  border: 2px solid #fff;
  transition: color 0.3s ease, border-color 0.3s ease;
  z-index: 1;
}

.cta-btn::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: top 0.4s ease;
  z-index: -1;
}

.cta-btn:hover::before {
  top: 0; /* Swipe down animation */
}

.cta-btn:hover {
  color: #813A96; /* Text turns violet */
  border-color: #fff;
}



.faq-section {
      padding: 60px 15px;
    }

    .faq-section h2 {
      font-weight: 700;
      margin-bottom: 30px;
      color: #222;
    }

    .accordion-item {
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      margin-bottom: 10px;
      overflow: hidden;
    }

    .accordion-button {
      background: #fff;
      font-weight: 600;
      font-size: 1rem;
      padding: 15px 20px;
      color: #222;
      box-shadow: none;
    }

    /* Active (open) state */
    .accordion-button:not(.collapsed) {
      background-color: #813A96;
      color: #fff;
    }

    /* Remove focus shadow */
    .accordion-button:focus {
      box-shadow: none;
    }

    /* Accordion body */
    .accordion-body {
      padding: 15px 20px;
      font-size: 0.95rem;
      color: #444;
      line-height: 1.5;
      background: #fafafa;
    }

    /* Arrow color */
    .accordion-button::after {
      filter: invert(30%) sepia(20%) saturate(200%) hue-rotate(180deg);
    }
    .accordion-button:not(.collapsed)::after {
      filter: brightness(0) invert(1);
    }



}
    .section-title {
      font-weight: 700;
      color: #222;
    }
    .service-card {
      background: #fff;
      border-radius: 16px;
      padding: 25px 15px;
      transition: all 0.4s ease;
      border: 1px solid #eee;
      box-shadow: 0 6px 15px rgba(0,0,0,0.08);
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    .service-card::before {
      content: "";
      position: absolute;
      top: -100%;
      left: 0;
      width: 100%;
      height: 100%;
      background: #813A96;
      transition: 0.4s;
      z-index: 0;
    }
    .service-card:hover::before {
      top: 0;
    }
    .service-card * {
      position: relative;
      z-index: 1;
      transition: color 0.3s;
    }
    .service-card:hover h5,
    .service-card:hover p,
    .service-card:hover li {
      color: #fff;
    }
    .service-card h5 {
      font-weight: 700;
      margin-bottom: 15px;
      color: #813A96;
    }
    .service-card p,
    .service-card ul {
      font-size: 15px;
      margin: 0;
      color: #444;
    }
    .service-card ul {
      padding-left: 20px;
      margin-top: 10px;
    }
    .service-card ul li::marker {
      content: "✔ ";
      color: #813A96;
      font-weight: bold;
    }
    .service-card:hover ul li::marker {
      color: #fff;
    }
    .service-icon {
      font-size: 40px;
      margin-bottom: 20px;
      color: #813A96;
      transition: 0.3s;
    }
    .service-card:hover .service-icon {
      color: #fff;
    }



.cta-box {
      background: #fff;
      color: #000;
      text-align: center;
      padding: 70px 20px;
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
      width: 100%;
    }
    .cta-box h2 {
      font-size: 36px;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .cta-box p {
      font-size: 18px;
      max-width: 900px;
      margin: 0 auto;
      line-height: 1.6;
    }






}
    .service-section {
      padding: 60px 20px;
    }
    .service-card {
      background: #fff;
      border-left: 6px solid #813A96;
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 6px 15px rgba(0,0,0,0.08);
      margin-bottom: 30px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    }
    .service-card h4 {
      font-weight: 700;
      font-size: 22px;
      color: #813A96;
      margin-bottom: 15px;
    }
    .service-card p {
      font-size: 16px;
      color: #555;
      margin-bottom: 15px;
    }
    .service-card ul {
      padding-left: 18px;
    }
    .service-card ul li {
      margin-bottom: 8px;
      font-size: 15px;
      color: #333;
    }
    .service-card ul li::marker {
      color: #813A96;
      font-weight: bold;
    }



.cta-section {
  padding: 80px 20px;
}

.cta-card {
  background: #f9f9f9;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 50px 30px;
  text-align: center;
  max-width: 2500px;
  margin: 0 auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.cta-card h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #813A96;
  margin-bottom: 20px;
}

.cta-card p {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.4;
  max-width: 100%;
  margin: 0 auto;
}


.awsx-wrap {
      width: 100%;
      background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
      padding: 60px 0;
    }
    .awsx-container {
      /* full width look but with breathing space on xl screens */
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 16px;
    }
    .awsx-title {
      font-size: clamp(22px, 2.2vw, 34px);
      font-weight: 800;
      color: #0f3057;
      text-align: center;
      margin-bottom: 28px;
    }
    .awsx-subline {
      text-align: center;
      color: #5a6b7b;
      margin: 0 auto 38px;
      max-width: 900px;
      font-size: 15px;
    }

    /* Feature grid */
    .awsx-grid {
      row-gap: 18px;
    }
    .awsx-card {
      height: 100%;
      background: #ffffff;
      border: 1.5px solid #e6eef6;
      border-left: 6px solid #1d72b8; /* accent line */
      border-radius: 14px;
      padding: 20px;
      transition: transform .25s ease, border-color .25s ease, background .25s ease;
    }
    .awsx-card:hover {
      transform: translateY(-4px);
      border-color: #125a91;
      background: #f7fbff;
    }
    .awsx-card-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }
    .awsx-icon {
      flex: 0 0 40px;
      width: 40px; height: 40px;
      border-radius: 10px;
      background: #eaf4ff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #125a91;
    }
    .awsx-card-title {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: #0f4c75;
      line-height: 1.2;
    }
    .awsx-card-text {
      margin: 4px 0 0;
      color: #3a4a5a;
      font-size: 15px;
      line-height: 1.55;
    }

    /* Make it breathe on mobile */
    @media (max-width: 767.98px) {
      .awsx-card { padding: 18px; border-left-width: 5px; }
      .awsx-icon { width: 36px; height: 36px; font-size: 18px; }
    }



  



.aws-timeline {
    position: relative;
    max-width: 1000px;
    margin: 50px auto;
    padding: 20px;
  }

  .aws-timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #813A96;
    transform: translateX(-50%);
  }

  .timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
  }

  .timeline-item.left {
    left: 0;
    text-align: right;
  }

  .timeline-item.right {
    left: 50%;
  }

  .timeline-item::before {
    content: "";
    position: absolute;
    top: 30px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #813A96;
    box-shadow: 0 0 10px rgba(129,58,150,0.4);
  }

  .timeline-item.left::before {
    right: -10px;
  }

  .timeline-item.right::before {
    left: -10px;
  }

  .card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: 0.3s;
  }
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(129,58,150,0.2);
  }
  .card h3 {
    margin-bottom: 10px;
    font-size: 18px;
    color: #813A96;
  }
  .card p {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
  }

  /* Responsive */
  @media screen and (max-width: 768px) {
    .aws-timeline::before {
      left: 8px;
    }
    .timeline-item {
      width: 100%;
      padding-left: 40px;
      padding-right: 20px;
      text-align: left !important;
    }
    .timeline-item::before {
      left: 0 !important;
    }
  }






/**.cta-section {
  background-color: #f2f2f2; 
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  padding: 60px 20px;
  
  border-radius: 12px;
  width: 100%;
  max-width: 100%;
  margin: 20px 0;
}

.cta-section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.cta-section p {
  font-size: 1.1rem;
  margin-bottom: 0;
}**/





.gc-section {
      padding: 60px 15px;
      text-align: center;
    }
    .gc-section h2 {
      font-size: 2.5rem;
      font-weight: bold;
      margin-bottom: 40px;
      color: #813A96; /* primary color used lightly */
    }
    .gc-card {
      background: #fff;
      border-radius: 15px;
      padding: 30px 20px;
      box-shadow: 0 10px 25px rgba(129, 58, 150, 0.15); /* subtle colored shadow */
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .gc-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(129, 58, 150, 0.25);
    }
    .gc-icon {
      font-size: 3rem;
      color: #813A96; /* primary color for icons */
      margin-bottom: 20px;
    }
    .gc-card h5 {
      font-weight: 600;
      margin-bottom: 15px;
      color: #4b2b65; /* slightly darker variant for heading */
    }
    .gc-card p {
      color: #555;
      font-size: 0.95rem;
    }


.services-title {
      text-align: center;
      margin-bottom: 60px;
    }

    .services-title h2 {
      color: #813A96;
      font-size: 2.8rem;
      font-weight: bold;
    }

    .service-block {
      display: flex;
      align-items: flex-start;
      margin-bottom: 40px;
      gap: 20px;
      flex-wrap: wrap;
    }

    .service-icon {
      background: #813A96;
      color: #fff;
      font-size: 1.8rem;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 5px 15px rgba(129,58,150,0.2);
    }

    .service-content {
      background: #fff;
      border-left: 4px solid #813A96;
      padding: 20px 25px;
      border-radius: 10px;
      flex: 1;
      box-shadow: 0 10px 20px rgba(0,0,0,0.05);
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .service-content:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(129,58,150,0.2);
    }

    .service-content h5 {
      font-size: 1.2rem;
      color: #4b2b65;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .service-content p {
      font-size: 0.95rem;
      color: #555;
      line-height: 1.6;
    }

    @media(max-width: 768px) {
      .service-block {
        flex-direction: column;
      }
      .service-icon {
        margin-bottom: 15px;
      }
    }









  :root {
      --brand: #813A96;
      --text: #2b2b2b;
    }
    .success-section {
      padding: clamp(40px, 6vw, 90px) 0;
      background: #faf7fc;
    }
    .section-title {
      font-weight: 800;
      color: var(--brand);
      text-align: center;
      margin-bottom: clamp(28px, 4vw, 48px);
      letter-spacing: 0.3px;
      font-size: clamp(22px, 3.2vw, 36px);
    }
    .feature-item {
      display: flex;
      gap: 16px;
      padding: 18px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.06);
      transition: transform .25s ease, box-shadow .25s ease;
      align-items: center;
      height: 100%;
    }
    .feature-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }
    .icon-circle {
      width: clamp(58px, 7vw, 72px);
      height: clamp(58px, 7vw, 72px);
      border-radius: 50%;
      background: var(--brand);
      display: grid;
      place-items: center;
      color: #fff;
      font-size: clamp(22px, 3vw, 28px);
      flex-shrink: 0;
      box-shadow: 0 10px 24px rgba(129,58,150,0.35);
    }
    .feature-text h5 {
      margin: 0 0 6px 0;
      color: var(--brand);
      font-weight: 700;
      font-size: clamp(16px, 2.2vw, 20px);
    }
    .feature-text p {
      margin: 0;
      color: #555;
      font-size: clamp(14px, 2vw, 16px);
      line-height: 1.6;
    }
    /* spacing helpers for responsive layout */
    .col-gap > [class*="col-"] { margin-bottom: 20px; }
    @media (min-width: 768px) {
      .col-gap > [class*="col-"] { margin-bottom: 24px; }
    }



.cta-section {
      padding: 40px 20px;
      background: linear-gradient(135deg, #813A96, #5a256e);
      color: #fff;
      text-align: center;
    }
    .cta-section h2 {
      font-weight: 800;
      font-size: clamp(22px, 3vw, 36px);
	  color:#fff;
      
    }
    .cta-section p {
      font-size: clamp(15px, 2vw, 18px);
      max-width: 720px;
      margin: 0 auto 30px auto;
      line-height: 1.6;
	  color:#fff;
    }


.deliver-section {
      padding: 40px 20px;
      background: #faf7fc;
    }
    .deliver-section h2 {
      text-align: center;
      font-weight: 800;
      color: #813A96;
      margin-bottom: 50px;
      font-size: clamp(22px, 3vw, 36px);
    }
    .deliver-box {
      background: #fff;
      padding: 30px  20px;
      border-radius: 14px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
      transition: all .3s ease;
      height: 100%;
      position: relative;
      overflow: hidden;
	  
    }
    .deliver-box:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    }
    .deliver-box h5 {
      color: #813A96;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .deliver-box p {
      color: #555;
      font-size: 15px;
      line-height: 1.6;
      margin: 0;
    }
    .deliver-icon {
      font-size: 2rem;
      color: #813A96;
      margin-bottom: 15px;
    }
 .row.g-4 > div:nth-child(-n+3) {
      margin-bottom: 30px; /* adjust as needed */
    }




.why-section {
      padding:40px 20px;
      background: #faf7fc;
    }
    .why-section h2 {
      text-align: center;
      font-weight: 800;
      color: #813A96;
      margin-bottom: 50px;
    }
    .nav-pills .nav-link {
      border-radius: 10px;
      padding: 15px 20px;
      margin-bottom: 12px;
      color: #813A96;
      font-weight: 600;
      text-align: left;
      width: 100%;
	  background-color: #e4e1e1;
	 
    }
    .nav-pills .nav-link.active {
      background: #813A96;
      color: #fff;
      box-shadow: 0 6px 16px rgba(0,0,0,0.12);
		
    }
    .tab-content {
      background: #fff;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
      height: 85%;
	  margin-top: 2%;
		
    }
    .tab-content h5 {
      font-weight: 700;
      color: #813A96;
      margin-bottom: 15px;
    }
    .tab-content p {
      color: #444;
      font-size: 17px;
      line-height: 1.7;
    }
    /* Responsive fix */
    @media (max-width: 991px) {
      .tab-content {
        margin-top: 30px;
      }
    }




.help-section {
      background: #fff;
      padding: 30px 20px;
    }
    .help-section h2 {
      text-align: center;
      font-weight: 800;
      color: #813A96;
      margin-bottom: 60px;
      font-size: clamp(22px, 3vw, 36px);
	
    }
    .help-step {
      padding: 30px;
      border-radius: 12px;
      margin-bottom: 35px;
      color: #fff;
      box-shadow: 0 6px 18px rgba(0,0,0,0.1);
      transition: transform .3s ease, box-shadow .3s ease;
    }
    .help-step:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
    .help-step h5 {
      font-weight: 700;
      margin-bottom: 12px;
      font-size: 20px;
    }
    .help-step p {
      margin: 0;
      font-size: 15px;
      line-height: 1.6;
    }
    /* Different gradient for each block */
    .step-1 { background: linear-gradient(135deg, #813A96, #5e2c6f); }
    .step-2 { background: linear-gradient(135deg, #5e2c6f, #813A96); }
    .step-3 { background: linear-gradient(135deg, #813A96, #4b1f60); }
    .step-4 { background: linear-gradient(135deg, #4b1f60, #813A96); }





.cta-section {
      background: #fff;
     
      text-align: center;
    /**  border-top: 10px double #4D2062;     /* Top double line */
     /** border-bottom: 10px double #4D2062;;  /* Bottom double line */
      width: 100%;                     /* Full width */
    }
    .cta-section h2 {
      font-size: clamp(26px, 3vw, 38px);
      font-weight: 800;
      color: #813A96;
      
    }
    .cta-section p {
      font-size: 17px;
      color: #444;
      max-width: 700px;
      margin: 0 auto 35px;
      line-height: 1.6;
	  text-align:center !important;
    }






 .service-card {
      background: #f8fbff;
      border-left: 4px solid #3b82f6;
      border-radius: 10px;
      padding: 18px 10px 10px;
      margin-bottom: 18px;
      transition: transform .2s ease, background .2s ease;
	 margin-left:10%;
	 margin-right:10%;
    }

.right-content h2{
	
	text-align:center;	
}

.service-card:hover h4{
  color: #fff !important;  /* force white text */
}




.work-steps {
      background: #f9f9f9;
      padding: 60px 20px;
    }
    .work-steps h2 {
      text-align: center;
      margin-bottom: 50px;
      font-weight: bold;
    }
    .step-card {
      background: #fff;
      padding: 30px 20px;
      border-radius: 15px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      transition: transform 0.3s;
      height: 100%;
    }
    .step-card:hover {
      transform: translateY(-8px);
    }
    .step-icon {
      font-size: 40px;
      color: #0d6efd;
      margin-bottom: 20px;
    }
    .step-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 15px;
    }
    .step-text {
      font-size: 15px;
      color: #555;
    }



.cta-section {
      background: #f7f7f7; /* Gradient background */
      color: #000;
     
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .cta-section h2 {
      font-size: 2.5rem;
      font-weight: 700;
      
    }

    .cta-section p {
      font-size: 1.2rem;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;
	  color:#000;
    }

    

 
    /* Optional wave effect at bottom */
    .cta-section::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 30px;
     
    }






.services-section {
      padding: 70px 0;
      background: #f8fafc;
    }
    .service-card {
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
      border-left: 5px solid #813A96;
      padding: 26px 24px 22px;
      height: 100%;
      transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
    }
    .service-card:hover {
      transform: translateY(-4px);
      background: #0d6efd;
      color: #fff;
      box-shadow: 0 14px 32px rgba(13, 110, 253, 0.35);
    }
    .service-card h3 {
      font-size: 1.35rem;
      font-weight: 700;
      margin-bottom: 8px;
      color: #0f172a;
    }
    .service-card p.lead {
      font-size: .98rem;
      color: #334155;
      margin-bottom: 14px;
    }
    .service-card ul {
      margin: 0;
      padding-left: 0;
      list-style: none;
    }
    .service-card li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin-bottom: 10px;
      line-height: 1.5;
      color: #334155;
    }
    .service-card li .tick {
      flex: 0 0 auto;
      font-weight: 700;
      margin-top: 1px;
      color: #0d6efd;
    }
    /* Ensure text turns white on hover */
    .service-card:hover h3,
    .service-card:hover p.lead,
    .service-card:hover li,
    .service-card:hover .tick {
      color: #fff !important;
    }
    @media (max-width: 575.98px) {
      .service-card { padding: 22px 18px; }
    }
}






.tech-section {
      padding: 60px 20px;
      text-align: center;
    }

    .tech-section h2 {
      font-weight: 700;
      margin-bottom: 40px;
    }

    .tech-box {
      margin-bottom: 40px;
    }

    .circle {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #813A96;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: bold;
      color: white;
      box-shadow: 0px 6px 20px rgba(0,0,0,0.3);
	  margin-bottom:40px;
    }

    .tech-box h4 {
      font-weight: 700;
      margin-bottom: 10px;
    }

    .tech-box p {
      font-size: 15px;
      line-height: 1.6;
    }






.why-choose {
      padding: 60px 20px;
      text-align: center;
    }

    .why-choose h2 {
      font-weight: 700;
      margin-bottom: 40px;
    }

    .choose-card {
      background: #fff;
      border-radius: 12px;
      padding: 25px;
      box-shadow: 0px 4px 15px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .choose-card:hover {
      transform: translateY(-5px);
      box-shadow: 0px 6px 20px rgba(0,0,0,0.15);
    }

    .icon {
      font-size: 28px;
      color: #2575fc;
      margin-bottom: 15px;
    }

    .choose-card h5 {
      font-weight: 600;
      margin-bottom: 10px;
    }

    .choose-card p {
      margin: 0;
    }

.fqqa{
	
	width:450px;
	height:450px;
}

.mad-section-title {
  color: #813A96;
  font-weight: 700;
 
}

.mad-feature-box {
  border-radius: 12px;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mad-feature-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.mad-feature-box h5 {
  color: #813A96;
  font-weight: 600;
}


.nav-tabs .nav-link {
  color: #813A96;
  font-weight: 600;
  border-radius: 6px 6px 0 0;
  margin: 0 4px;
  transition: 0.3s;
}
.nav-tabs .nav-link.active {
  background: #813A96;
  color: #fff !important;
}
.mad-tab-title {
  color: #813A96;
  font-weight: 600;
  margin-bottom: 15px;
}
.tab-content ul {
  padding-left: 18px;
}
.tab-content ul li {
  margin-bottom: 6px;
  font-size: 15px;
  color: #333;
}



.section-title {
      font-weight: 700;
      margin-bottom: 20px;
    }
    .tech-stack span {
      display: inline-block;
      margin: 5px 10px 5px 0;
      padding: 5px 10px;
      background: #f0f0f0;
      border-radius: 5px;
      font-weight: 500;
    }
    .process-step {
      background: #f8f9fa;
      border-left: 5px solid #0d6efd;
      padding: 15px 20px;
      margin-bottom: 15px;
      border-radius: 5px;
    }
    .partner-list li {
      margin-bottom: 10px;
    }
    .faq-item {
      margin-bottom: 15px;
    }
    .cta-section {
      background: #0d6efd;
      color: #fff;
      text-align: center;
      padding:  20px;
      border-radius: 10px;
      margin: 10px 0;
    }
    .cta-section h2 {
      font-size: 2rem;
      margin-bottom: 10px;
    }
    .cta-section p {
      font-size: 1.1rem;
      margin-bottom:10px;
    }
    .btn-primary {
      background-color: #ffc107;
      border: none;
      color: #000;
      font-weight: 600;
      padding: 10px 25px;
    }
    .btn-primary:hover {
      background-color: #e0a800;
    }
.nav-tabs .nav-link {
	
	color:#000;
	
}


.img_left{
	
	height:60% !important;
	width:100% !important;

}


.services-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: auto;
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  }

  /* Columns 50/50 */
  .services-image, 
  .services-content {
    width: 50%;
  }

  .services-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
  }

  .services-content {
    padding-left: 30px;
  }

  .services-content h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #222;
  }

  .services-list {
    list-style-type: disc;
    padding-left: 20px;
  }

  .services-list li {
    font-size: 16px;
    margin-bottom: 15px;
    color: #555;
    line-height: 1.6;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .services-section {
      flex-direction: column;
      text-align: left;
    }
    .services-image,
    .services-content {
      width: 80%;
      padding: 0;
    }
  }




.services-container {
    max-width: 1400px;
    margin: auto;
    padding: 20px;
  }

  .services-container h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 40px;
    color: #222;
  }

  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }

  .service-box {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
  }




  .icon {
    font-size: 30px;
    margin-bottom: 12px;
    color: #813A96;
    transition: color 0.3s ease;
  }



  .service-content h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #222;
  }

  .service-content p {
    font-size: 15px;
    color: #555;
    margin-bottom: 12px;
  }

  .service-content ul {
    margin: 0;
    padding-left: 18px;
  }

  .service-content li {
    font-size: 14px;
    color: #555;
    margin-bottom: 6px;
    line-height: 1.5;
  }

  /* Responsive */
  @media (max-width: 1024px) {
    .services-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .services-grid {
      grid-template-columns: 1fr;
    }
  }





 .timeline-container {
    max-width: 900px;
    margin: auto;
    padding: 50px 20px;
  }

  .timeline-container h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
    color: #222;
  }

  .timeline {
    position: relative;
    margin: 0;
    padding: 0;
  }

  /* Vertical line */
  .timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #813A96;
    transform: translateX(-50%);
  }

  .timeline-item {
    position: relative;
    margin: 40px 0;
    width: 50%;
    padding: 0 30px;
  }

  .timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
  }

  .timeline-item:nth-child(even) {
    left: 40%;
    text-align: left;
  }

  .timeline-icon {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translate(-50%, -10%);
    background: #813A96;
    color: #fff;
    font-size: 22px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .timeline-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
  }

  .timeline-content h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #222;
  }

  .timeline-content p {
    margin: 0;
    font-size: 15px;
    color: #555;
  }

  .timeline-content:hover {
    background: #813A96;
    color: #fff;
  }

  .timeline-content:hover h3,
  .timeline-content:hover p {
    color: #fff;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .timeline::before {
      left: 20px;
    }
    .timeline-item {
      width: 100%;
      padding-left: 60px;
      text-align: left !important;
    }
    .timeline-item:nth-child(even) {
      left: 0;
    }
    .timeline-icon {
      left: 0px;
      transform: translate(0, -10%);
    }
  }



.cta-section {
  width: 100%;
  background: #f2f2f2; /* light gray */
  padding: 80px 20px;
}

.cta-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.cta-content h2 {
  font-size: 32px;
  font-weight: 700;
  color: #222;
  margin-bottom: 20px;
}

.cta-content p {
  font-size: 18px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 30px;
}

.cta-content p span {
  color: #813A96;
  font-weight: 600;
}









.expertise-section {
    background: #f8f9fc;
    padding: 60px 20px;
  }

  .section-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #1a2d6d;
    margin-bottom: 40px;
  }

  .expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Always 3 per row on desktop */
    gap: 25px;
  }

  /* Responsive - stack on smaller screens */
  @media (max-width: 992px) {
    .expertise-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 600px) {
    .expertise-grid {
      grid-template-columns: 1fr;
    }
  }

  .expertise-box {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(26, 45, 109, 0.2);
    box-shadow: 0 4px 15px rgba(26, 45, 109, 0.1);
    transition: all 0.3s ease-in-out;
  }

  .expertise-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(26, 45, 109, 0.25);
  }

  .expertise-box h5 {
    font-weight: 700;
    color: #1a2d6d;
    margin-bottom: 12px;
    font-size: 18px;
  }

  .expertise-box p {
    margin: 0;
    color: #333;
    line-height: 1.6;
  }






.why-choose-us {
  width: 100%;
  background: #f8fafe; /* Light background */
  padding: 60px 20px;
}

.section-title {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 40px;
  color: #12225b; /* Dark blue */
}

.choose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

.choose-box {
  position: relative;
  background: #fff;
  padding: 30px 25px;
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  border-left: 6px solid #813A96;
  transition: transform 0.3s ease;
}

.choose-box:hover {
  transform: translateY(-5px);
}

.choose-box h3 {
  font-size: 20px;
  font-weight: 700;
  color: #12225b;
  margin-bottom: 10px;
}

.choose-box p {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

/* Tick Icon */
.tick-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #813A96; /* Changed to your color */
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}




.timeline-slider {
  position: relative;
  max-width: 1200px;
  margin: 50px auto;
  overflow: hidden;
  padding: 0 30px;
}

.timeline-track {
  display: flex;
  gap: 30px;
  transition: transform 0.6s ease-in-out;
}

.step-card {
  flex: 0 0 calc(30% - 20px);
  background: #fff;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  border-top: 5px solid #813A96;
  position: relative;
  transition: all 0.3s ease;
}

.step-card .step-icon {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: #813A96;
  color: #fff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.step-card h3 {
  color: #813A96;
  margin: 35px 0 12px;
  font-size: 18px;
}

.step-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #813A96;
  color: #fff;
  border: none;
  border-radius: 50%;
  width:60px;
  height: 60px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 10;
}

.arrow:hover {
  background: #5d2870;
}

.arrow.left { left: 5px; }
.arrow.right { right: 5px; }





.uiimage{
	margin-left:20%;
	width:330px!important;
	height:50% !important;
	
}








/* Section 2 (Branding) - Grid */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.expertise-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}
.expertise-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Section 3 (Infographic) - Side Card */
.infographic-section {
  background: #f9f9f9;
}

.info-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: 0.3s ease;
}
.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.icon-box {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #813A96;
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}





/* Section 5 - Partner Cards */
.partner-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}
.partner-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.partner-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: #813A96;
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Section 6 - Timeline */
.timeline {
  position: relative;
  padding-left: 0px;
  border-left: 3px solid #813A96;
}
.timeline-step {
  position: relative;
  margin-bottom: 30px;
}
.timeline-icon {
  position: absolute;
  left: -30px;
  top: 0;
  width: 40px;
  height: 40px;
  background: #813A96;
  color: #fff;
  border-radius: 50%;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-content {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}







/* Why Us Section */
.why-us {
  background: #f9f9f9;
}

.why-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.why-card h5 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #813A96; /* brand purple */
}

.why-card p {
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
}







/* Process Section */
.process-section {
  background: #f9f9f9;
}

.process-timeline {
  position: relative;
  margin: 0 auto;
  padding-left: 30px;
  border-left: 3px solid #813A96; /* brand purple line */
  max-width: 800px;
}

.process-step {
  position: relative;
  margin-bottom: 40px;
}

.step-number {
  position: absolute;
  left: -50px;
  top: 0;
  background: #813A96;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.step-content {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.step-content h5 {
  color: #813A96;
  font-weight: 600;
  margin-bottom: 10px;
}

.step-content p {
  color: #555;
  line-height: 1.5;
}




.section {
  width: 100%;
  padding: 60px 20px;
  box-sizing: border-box;
}

.section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  font-weight: 700;
  color: #222;
}

.box-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

.box {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

.box h3 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #111;
}

.box p {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

/* Responsive */
@media (max-width: 768px) {
  .box-container {
    grid-template-columns: 1fr; /* Stack on small screens */
  }
}






.section {
  width: 100%;
  padding: 60px 20px;
  box-sizing: border-box;
}

/* Section Titles */
.section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  font-weight: 700;
  color: #222;
}

/* === Infographic Section (Grid, Gradient Borders) === */
.infographic-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.infographic-box {
  background: #f9f9f9;
  border-left: 6px solid #0077ff; /* Accent stripe */
  padding: 25px 20px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.infographic-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

.infographic-box h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: #0077ff;
}

.infographic-box p {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}


/* === Partner Section (Card Style) === */
.partner-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

.partner-card {
  background: linear-gradient(135deg, #ffffff, #f1f1f1);
  border: 1px solid #e0e0e0;
  padding: 30px 20px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.partner-card h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #333;
}

.partner-card p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
}


/* Responsive */
@media (max-width: 768px) {
  .infographic-container {
    grid-template-columns: 1fr;
  }
}





/* === Advanced Process Section === */
.process-section {
  background: #f7f9fb;
}

.process-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
}

/* Step wrapper */
.process-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
}

/* Step number circle */
.step-number {
  background: #813A96;   /* Brand color */
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  width: 45px;
  height: 45px;
  min-width: 45px;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  z-index: 2;
}

/* Step content */
.step-content {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  flex: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-content:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.step-content h3 {
  margin-bottom: 10px;
  font-size: 1.1rem;
  color: #813A96;   /* Brand color */
}

.step-content p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
}

/* Timeline line (vertical) */
.process-container::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d0d8e0;
}

/* Responsive: stack nicely */
@media (max-width: 600px) {
  .process-step {
    flex-direction: column;
    align-items: flex-start;
  }

  .step-number {
    margin-bottom: 10px;
  }

  .process-container::before {
    left: 22px;
  }
}




.service-box {
  transition: all 0.3s ease;
}

.service-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Make image fill full column */
.object-fit-cover {
  object-fit: cover;
  height: 100%;
}






/* Timeline Section */
.timeline {
  position: relative;
  margin-left: 2rem;
  padding-left: 1.5rem;
  border-left: 2px solid #813A96; /* vertical line */
}

.timeline-item {
  position: relative;
  margin-bottom: 2rem;
  display: flex;
  align-items: flex-start;
}

.timeline-icon {
  position: absolute;
  left: -1.6rem;
  color: #813A96; /* brand color */
  font-size: 1.6rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.timeline-content {
  padding-left: 1rem;
}

.timeline-content h5 {
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #111827;
}

.timeline-content p {
  margin: 0;
  color: #4b5563;
  font-size: 0.95rem;
  line-height: 1.6;
}




.why-choose {
  background: #f9f9fb;
}

.feature-block {
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  border-top: 4px solid #813A96;
}

.feature-block:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.feature-block h3 {
  color: #2b2b2b;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 1rem 0;
  position: relative;
}

.feature-block p {
  font-size: 1rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 0;
}

.feature-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #813A96, #9d58b1);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.Itmangaedimg{
	
	width:80%;
	height:60%;
	
	
}











/* Section Styling */
.it-services {
  background: #f9f9ff;
  padding: 80px 40px;
  font-family: 'Segoe UI', sans-serif;
}

.it-services h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 40px;
  color: #222;
}

/* Card Layout */
.it-services .service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 45px;
}

.it-services .card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.it-services .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

/* Icons */
.it-services .card i {
  font-size: 48px;
  margin-bottom: 15px;
  color: #4a6cf7; /* default blue */
}

.it-services .card h5 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

.it-services .card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
}






.process-steps {
  background: linear-gradient(135deg, #f6f8ff, #ffffff);
  padding: 60px 20px;
  font-family: 'Segoe UI', sans-serif;
}

.process-steps h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 50px;
  color: #222;
}

.steps-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  position: relative;
}

/* Connector Line */
.steps-wrapper::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 60px;
  right: 60px;
  height: 3px;
  background: #4a6cf7;
  z-index: 0;
}

.step {
  flex: 1 1 18%;
  min-width: 200px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.step-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: #4a6cf7;
  color: #fff;                /* white numbers */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.step h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

.step p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
  text-align: left;
}

.fw-bold{
	
	color:black;
	
}



.dbaas-list-numbered {
  background: #f0f4ff;
  padding: 80px 20px;
  font-family: 'Segoe UI', sans-serif;
}

.dbaas-list-numbered h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #222;
}

.dbaas-list-numbered p {
  text-align: center;
  font-size: 1rem;
  color: #555;
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.feature-list::before {
  content: '';
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #4a6cf7;
  border-radius: 2px;
}

.feature-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
}

.feature-list .icon {
  width: 60px;
  height: 60px;
  background: #4a6cf7;  /* blue circle */
  color: #fff;           /* white numbers */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 20px;
  position: relative;
  z-index: 1;
}

.feature-list .content {
  background: #fff;
  padding: 20px 25px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  flex: 1;
}

.feature-list .content h4 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
}

.feature-list .content p {
  margin: 0;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
}

.cta {
  text-align: center;
  margin-top: 50px;
}

.cta-btn {
  display: inline-block;
  background: #4a6cf7;
  color: #fff;
  padding: 14px 35px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-btn:hover {
  background: #3b54d1;
}




  .circle-box {
    text-align:center;
    max-width:250px;
    transition:0.3s;
  }
  .circle-box .circle {
    width:120px; height:120px;
    border-radius:50%;
    background:#813A96;
    display:flex; align-items:center; justify-content:center;
    font-size:40px; color:#fff;
    margin:0 auto 20px;
    transition:0.3s;
    box-shadow:0 6px 15px rgba(0,0,0,0.15);
  }
  .circle-box h3 {
    font-size:20px;
    font-weight:600;
    color:#813A96;
    margin-bottom:10px;
  }
  .circle-box p {
    font-size:15px;
    color:#333;
  }
  .circle-box:hover {
    transform: translateY(-10px);
  }
  .circle-box:hover .circle {
    background:#fff;
    color:#813A96;
    border:3px solid #813A96;
  }




.dops-why {
    --brand: #813A96;
    --bg: #f8f6fb;
    --card-bg: #fff;
    --text: #444;
    --muted: #555;

    background: var(--bg);
    padding: 30px 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    width: 100%; /* Full width */
  }
  .dops-why__container {
    width: 100%; /* full width */
    padding: 0 30px; /* add spacing inside */
    text-align: center;
  }
  .dops-why__title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: var(--brand);
  }
  .dops-why__subtitle {
    color: var(--muted);
    font-size: 18px;
    margin: 0 0 50px 0;
  }
  .dops-why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    width: 100%;
  }
  .dops-why__card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 28px 22px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: transform .25s ease, box-shadow .25s ease;
    text-align: center;
  }
  .dops-why__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    background: var(--brand);
    color: #fff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(129,58,150,0.35);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
  }
  .dops-why__card-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--brand);
    margin: 0 0 10px 0;
  }
  .dops-why__card-text {
    font-size: 15px;
    color: var(--text);
    margin: 0;
    line-height: 1.55;
  }
  .dops-why__card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }
  .dops-why__card:hover .dops-why__icon {
    background: #fff;
    color: var(--brand);
    border: 2px solid var(--brand);
  }

  /* Small screens */
  @media (max-width: 480px) {
    .dops-why__title { font-size: 28px; }
    .dops-why__subtitle { font-size: 16px; }
    .dops-why__container { padding: 0 20px; }
  }






.dops-cta {
    --brand: #813A96;
    width: 100%; /* Full width */
    background: #eaeaea; /* Gray background */
    padding: 80px 20px;
    text-align: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  }

  .dops-cta__content {
    max-width: 900px;
    margin: 0 auto;
  }

  .dops-cta__title {
    font-size: 36px;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 15px;
  }

  .dops-cta__desc {
    font-size: 18px;
    color: #444;
    margin: 0 auto 30px auto;
    max-width: 700px;
    line-height: 1.6;
  }

  .dops-cta__btn {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 14px 36px;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  }

  .dops-cta__btn:hover {
    background: #5d2970;
    transform: translateY(-3px);
  }

  /* Small screens */
  @media (max-width: 480px) {
    .dops-cta__title { font-size: 28px; }
    .dops-cta__desc { font-size: 16px; }
  }









.why-partner-numbers {
  background: #f4f4f4;
  padding: 100px 20px;
  font-family: system-ui, sans-serif;
}

.section-heading {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: #813A96;
  margin-bottom: 60px;
}

.number-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.number {
  font-size: 48px;
  font-weight: 800;
  background: linear-gradient(135deg, #813A96, #d98efc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 80px;
  flex-shrink: 0;
}

.content h5 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.content p {
  margin: 0;
  font-size: 15px;
  color: #555;
}

/* Responsive */
@media (max-width: 768px) {
  .number-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .number {
    margin-bottom: 10px;
  }
}














.expertise-dark {
  background: linear-gradient(135deg, #111827, #1f2937, #000);
  color: #fff;
  padding: 80px 20px;
  font-family: "Segoe UI", sans-serif;
}

/* Container */
.expertise-dark .container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Heading */
.expertise-dark h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 50px;
}

/* Grid */
.expertise-dark .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* Cards */
.expertise-dark .card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  text-align: left;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.expertise-dark .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(99,102,241,0.4);
}

/* Icon style */
.expertise-dark .icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 20px;
  font-size: 22px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Gradient backgrounds */
.gradient-indigo { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.gradient-emerald { background: linear-gradient(135deg, #10b981, #059669); }
.gradient-sky { background: linear-gradient(135deg, #0ea5e9, #3b82f6); }
.gradient-yellow { background: linear-gradient(135deg, #f59e0b, #d97706); }
.gradient-pink { background: linear-gradient(135deg, #ec4899, #ef4444); }
.gradient-purple { background: linear-gradient(135deg, #a855f7, #6366f1); }

/* Titles */
.expertise-dark .card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Paragraphs */
.expertise-dark .card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #d1d5db;
}



.single-services {
     display :flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.list-style {
    color:#000;
}
.banner-content h1	{
    color:#000;
}


 

    /* Navbar 
    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 40px;
     /* background: white;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      flex-wrap: wrap;
    }
    nav ul {
      list-style: none;
      display: flex;
      gap: 25px;
      margin: 0;
      padding: 0;
      flex-wrap: wrap;
    }
    nav ul li a {
      text-decoration: none;
      color: #444;
      font-weight: bold;
    }
    .contact-btn {
      background: #813A96;
      color: #fff;
      padding: 10px 20px;
      border-radius: 20px;
      text-decoration: none;
    }
**/
   




/**
.single-services {
     display :flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.list-style {
    color:#000;
}
.banner-content h1	{
    color:#000;
}**/


  

    /* Navbar 
    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 40px;
      /*background: white;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      flex-wrap: wrap;
    }
    nav ul {
      list-style: none;
      display: flex;
      gap: 25px;
      margin: 0;
      padding: 0;
      flex-wrap: wrap;
    }
    nav ul li a {
      text-decoration: none;
      color: #444;
      font-weight: bold;
    }
    .contact-btn {
      background: #813A96;
      color: #fff;
      padding: 10px 20px;
      border-radius: 20px;
      text-decoration: none;
    }
**/
    







    *{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins", sans-serif;}
    body{line-height:1.6;color:#333;scroll-behavior:smooth;}

  
.btn{background:#813A96;color:#fff;padding:15px 25px;border:none;border-radius:30px;
         text-decoration:none;font-size:18px;transition:0.3s;}
    .btn:hover{background:#813A96;transform:scale(1.05);}

     .homepage-banner-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(rgba(70, 30, 120, 0.7), rgba(70, 30, 120, 0.7)), 
              url('../../assets/img/banner_img.jpg') center/cover;
  color: white;
  padding: 60px 10%;
  min-height: 90vh;
  gap: 40px;
  flex-wrap: wrap;
}

.homepage-banner-section .hero1-text {
  flex: 1;
  min-width: 280px;
}

.homepage-banner-section .hero1-text h1 {
  font-size: 38px;
  line-height: 1.3;
}

.homepage-banner-section .hero1-text p {
  font-size: 18px;
  margin: 20px 0;
}

    /*form section */
   .form-box {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 350px;
    color: black;
  }
  .form-box input, .form-box textarea {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
  }
  .error-message {
    color: red;
    font-size: 13px;
    display: none;
  }
  .form-box button {
    width: 100%;
    padding: 12px;
    background: #813A96;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 15px;
  }


    .custom-enquiry-form input,
.custom-enquiry-form textarea {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  resize: none;
}

.custom-enquiry-form textarea {
  min-height: 190px;
  line-height: 1.5;
}


    /* Section General */
    .section{padding:100px 7%;}
    .section h2{text-align:center;margin-bottom:60px;font-size:32px;position:relative;}
    .section h2::after{content:"";display:block;width:80px;height:3px;background:#e63946;margin:10px auto;}

   /* Home Section Two */
.home-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* always 3 per row */
  gap: 30px;
}

.homepage-card {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: 0.4s;
  position: relative;
  padding: 20px;
}

.home-product:hover {
  transform: translateY(-10px);
}

.home-product h3 {
  margin: 15px 0 10px;
  font-size: 20px;
}

.home-product h4 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

.home-product p {
  color: #666;
  font-size: 15px;
  text-align: justify;
  margin: 0 10px 15px 10px;
}

    /* Promo Banner */
    .promo{background:url('../../assets/img/image_2b.jpg') center/cover fixed no-repeat;
           color:#fff;text-align:center;padding:100px 20px;position:relative;}
    .promo::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);}
    .promo-content{position:relative;z-index:1;}
    .promo h2{font-size:40px;margin-bottom:15px;}
    .promo p{font-size:20px;margin-bottom:25px;}

   /* Homepage Section Four */
.homepage-section-four {
	margin-bottom:30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  text-align: center;
}

.homepage-section-four .homepage-section {
  background: #fff;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}

.homepage-section-four .homepage-section:hover {
  transform: translateY(-10px);
}

.homepage-section-four .homepage-section i {
  font-size: 40px;
  color: #813A96;
  margin-bottom: 20px;
}

    /* Testimonials */
    .testimonials{display:flex;overflow-x:auto;gap:30px;scroll-behavior:smooth;padding-bottom:20px;}
    .testimonial{min-width:300px;background:#fff;padding:30px;border-radius:15px;
                 box-shadow:0 5px 20px rgba(0,0,0,0.1);text-align:center;flex:0 0 auto;}
    .testimonial p{margin-bottom:15px;font-style:italic;}

    /* Newsletter */
    .newsletter{background:#333;color:#fff;text-align:center;padding:80px 20px;}
    .newsletter input{padding:15px;width:250px;border:none;border-radius:25px;margin-right:10px;}
    .newsletter button{padding:15px 25px;border:none;border-radius:25px;background:#e63946;color:#fff;}

    /* Footer */
    footer{background:#111;color:#ccc;padding:40px 7%;display:grid;
           grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;}
    footer h4{color:#fff;margin-bottom:15px;}
    footer ul{list-style:none;}
    footer ul li{margin-bottom:10px;}
    footer ul li a{color:#ccc;text-decoration:none;font-size:14px;}
    footer p{margin-top:20px;font-size:13px;text-align:center;grid-column:1/-1;}

    /* Scroll to Top */
    #scrollTopBtn {
      position: fixed;
      bottom: 30px;
      right: 30px;
      background: #813A96;
      color: #fff;
      border: none;
      border-radius: 50%;
      padding: 15px;
      font-size: 20px;
      cursor: pointer;
      display: none;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      transition: 0.3s;
      z-index: 1000;
    }
    #scrollTopBtn:hover {
      background: #813A96;
      transform: scale(1.1);
    }





.circle {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #813A96;
  top: -10px;
  left: -10px;
  z-index: 1;
}

.circle.small {
  width: 80px;
  height: 80px;
  top: 60px;
  left: -40px;
  background: #813A96;
}


/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Section */
.home-testimonial-section {
  text-align: center;
  padding: 100px 0;
  background: linear-gradient(135deg, #f9f9ff, #eef1f6);
}

.home-testimonial-section h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #111;
}

.home-testimonial-section .subtitle {
  color: #666;
  font-size: 18px;
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Card Style */
.testimonial-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 40px 25px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  text-align: center;
}

.testimonial-card:hover {
  transform: translateY(-15px) scale(1.03);
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

/* Avatar */
.testimonial-img {
  margin-bottom: 20px;
}

.testimonial-img img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  border: 4px solid #fff;
}

/* Text */
.testimonial-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #813A96;
}

.testimonial-card p {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
  font-style: italic;
}

/* Swiper Pagination */
.swiper-pagination-bullet {
  background: #bbb;
  opacity: 1;
  width: 10px;
  height: 10px;
}

.swiper-pagination-bullet-active {
  background: #813A96;
}

/* Move pagination bullets further below */
.home-testimonial-section .swiper-pagination {
  position: relative !important; /* make it flow below instead of absolute */
  margin-top: 30px;              /* push bullets down */
}

.home-testimonial-section .swiper-pagination-bullet {
  background: #bbb;
  opacity: 1;
  width: 10px;
  height: 10px;
  margin: 0 6px !important;
}

.home-testimonial-section .swiper-pagination-bullet-active {
  background: #813A96;
}
.home-testimonial-section {
    text-align: center;
    padding: 30px 0;
    background: linear-gradient(135deg, #f9f9ff, #eef1f6);
}


/* Homepage Section Four */
.homepage-section-four {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  text-align: center;
  margin-top: 30px;   /* ✅ Added */
}

.homepage-section-four .homepage-section {
  background: #fff;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}

.homepage-section-four .homepage-section:hover {
  transform: translateY(-10px);
}

.homepage-section-four .homepage-section i {
  font-size: 40px;
  color: #813A96;
  margin-bottom: 30px;
}





/* Testimonial Section (renamed) */
.home-testimonial-area {
  padding: 80px 20px;
  background: linear-gradient(135deg, #fdfbfb, #ebedee);
  text-align: center;
}

.final-section {
  background: #fff;
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  position: relative;
  max-width: 1200px;
  margin: auto;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.final-section:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.final-section h2 {
  font-size: 2rem;
  color: #333;
  font-weight: 700;
}

.final-section h2 span {
  color: #813A96; /* purple highlight */
}

.final-section p {
  font-size: 1.2rem;
  color: #444;
  margin: 25px 0;
  line-height: 1.7;
  font-style: italic;
}

.final-section h4 {
  margin-top: 20px;
  font-size: 1.1rem;
  color: #222;
  font-weight: 600;
}

.quote {
  font-size: 2.5rem;
  color: #813A96;
  position: absolute;
  font-weight: bold;
}

.quote.left {
  top: 15px;
  left: 20px;
}

.quote.right {
  bottom: 15px;
  right: 20px;
  transform: rotate(180deg);
}


.homepage-section-four {
    width: 1200px;
    display: grid
;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
}




















:root{
  --brand-start:#833B95; 
  --brand-end:#b76cc9;  
  --ink:#1f2a44;
  --muted:#6b7588;
  --card:#ffffff;
  --soft:#f9f7fb;
}

    html,body{background:var(--soft); color:var(--ink); font-family:"Inter","Segoe UI",system-ui, -apple-system, Roboto, Arial, sans-serif;}


    .hero{
      background: radial-gradient(1200px 600px at 10% -10%, rgba(106,90,249,.25), transparent 60%),
                  radial-gradient(1000px 600px at 110% 0%, rgba(0,212,255,.20), transparent 50%),
                  linear-gradient(135deg, rgba(106,90,249,.08), rgba(0,212,255,.08));
      border-radius: 28px;
      padding: 48px 28px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(31,42,68,.08);
    }
    .hero h1{
      font-weight: 900; letter-spacing: -0.5px; font-size:22px;
      background: linear-gradient(90deg, var(--brand-start), var(--brand-end));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0 0 10px 0;
    }
    .hero p{font-size:1.05rem; color:var(--ink); opacity:.85; margin:0}
    .hero .search{
      margin-top: 22px;
	  text-align:center !important;

      background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 8px 20px rgba(31,42,68,.08); 
    }
    .hero input[type="search"]{border:none; outline:none; padding:12px 14px; width:100%; font-size:1rem}

  
    .cat-pills{gap:8px; flex-wrap: wrap}
    .cat-pills .pill{
      padding:8px 14px; border-radius: 999px; font-weight:600; font-size:.9rem;
      background:#fff; color:var(--ink); border:1px solid rgba(31,42,68,.08);
      transition: .2s transform, .2s box-shadow, .2s background;
    }
    .cat-pills .pill:hover{transform: translateY(-1px); box-shadow:0 8px 18px rgba(31,42,68,.10)}
    .cat-pills .pill.active{background:linear-gradient(90deg,var(--brand-start),var(--brand-end)); color:#fff; border-color:transparent}

    
    .layout{display:grid; grid-template-columns: 300px 1fr; gap:28px}
    @media (max-width: 992px){ .layout{grid-template-columns: 1fr;} }

    
  .body-blog{
	  padding:20px !important;
	  text-align:left !important;
}

  
    .masonry{column-count:3; column-gap: 24px}
    .masonry-item{break-inside: avoid; margin: 0 0 24px 0}
    @media (max-width: 1200px){ .masonry{column-count:2} }
    @media (max-width: 576px){ .masonry{column-count:1} }

  
    .post{background:var(--card); border-radius:22px; overflow:hidden; position:relative; box-shadow:0 10px 24px rgba(31,42,68,.10); transition: transform .28s ease, box-shadow .28s ease}
    .post:hover{transform: translateY(-6px); box-shadow:0 16px 34px rgba(31,42,68,.18)}
    .post .thumb{position:relative; overflow:hidden}
    .post img{width:100%; height:220px; object-fit:cover; transition: transform .5s ease}
    .post:hover img{transform: scale(1.06)}
    .badge-cat{position:absolute; top:14px; left:14px; padding:6px 12px; border-radius:999px; font-size:.8rem; font-weight:700; color:#fff; background:linear-gradient(90deg,var(--brand-start),var(--brand-end)); box-shadow:0 8px 18px rgba(0,0,0,.12)}
    .post .body{padding:18px 18px 16px}
    .post h3{font-size:1.15rem; font-weight:800; color:var(--ink); margin:4px 0 10px}
    .meta{font-size:.85rem; color:var(--muted)}
    .post p{color:#2b3145; opacity:.9; font-size:.96rem; margin-top:10px}
    .read{display:inline-flex; align-items:left; gap:8px; margin-top:12px; font-weight:700; color:#384dff; text-decoration:none !important;font-size:17px}
    .read:hover{text-decoration:underline}

    .cta{background:linear-gradient(135deg, var(--brand-start), var(--brand-end)); color:#fff !important; border-radius:24px; padding:34px 22px; text-align:center; margin-top:34px; box-shadow:0 12px 30px rgba(0,0,0,.18)}
    .cta h2{font-weight:900; letter-spacing:-.3px; margin-bottom:8px; color:#fff !important;}
    .cta p{opacity:.95; }
    .cta .btn{margin-top:12px; background:#fff; color:#833B95; font-weight:800; border:none; border-radius:999px; padding:12px 26px}







.custom-tabs-nav {
      border-bottom: 2px solid #eaeaea;
      display: flex;
      justify-content: center;
     
    }
    .custom-tabs-nav .nav-link {
      border: none;
      background: #f8f9fa;
      margin: 0 5px;
      border-radius: 8px 8px 0 0;
      padding: 12px 25px;
      font-weight: 600;
      color: #333;
      transition: all 0.3s ease;
    }
    .custom-tabs-nav .nav-link.active {
      background: #833B95;
      color: #fff;
      box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    }
    .custom-tab-content {
      border: 1px solid #eaeaea;
      border-radius: 0 0 12px 12px;
      padding: 25px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	  margin-top: 4% !important;
    }
    .custom-tab-content h3 {
      font-size: 1.4rem;
      font-weight: 700;
      color: #833B95;
    }
    .custom-tab-content p {
      font-size: 1rem;
      line-height: 1.6;
      color: #444;
    }








/* Section */
.qa-section {
  max-width: 900px;
  margin: 50px auto;
  padding: 20px;
  font-family: "Segoe UI", sans-serif;
}

.qa-title {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 40px;
  color: #222;
}

/* Stepper container */
.qa-steps {
  display: flex;
  flex-direction: column;
  gap: 25px;
  position: relative;
}

/* Step box */
.qa-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #f9f9ff;
  padding: 20px;
  border-radius: 12px;
  border-left: 6px solid #833B97;
  transition: transform 0.3s ease, background 0.3s ease;
}

.qa-step:hover {
  transform: translateY(-5px);
  background: #eef5ff;
}

/* Number circle */
.qa-step-number {
  min-width: 45px;
  height: 45px;
  background: #833B97;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 45px;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Content */
.qa-step-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #833B97;
}

.qa-step-content p {
  margin: 0;
  font-size: 15px;
  color: #333;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
  .qa-step {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .qa-step-number {
    margin-bottom: 10px;
  }
}



.lic-section {
  width: 100%;
  padding: 80px 20px;
  background: linear-gradient(135deg, #813A96, #813A96);
}

.lic-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
  text-align:center;
}

.lic-subtitle {
  color: #e0e0e0;
  font-size: 1rem;
  text-align:center;
}

.lic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: auto;
}

.lic-card {
  background: #fff;
  border-radius: 18px;
  padding: 30px 25px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  transition: transform 0.35s, box-shadow 0.35s;
  position: relative;
  overflow: hidden;
}

.lic-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}

.lic-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #42a5f5, #478ed1);
  color: #fff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.lic-heading {
  font-weight: 700;
  margin-bottom: 12px;
  color: #813A96;
}

.lic-text {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 15px;
}

.lic-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lic-list li {
  margin-bottom: 8px;
  padding-left: 22px;
  position: relative;
  color: #333;
  font-size: 0.9rem;
}

.lic-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: bold;
}






.tech-section {
  background: #f8f6fb;
  padding: 20px 10px;
  font-family: "Segoe UI", sans-serif;
}

.tech-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.tech-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #813A96;
}

.tech-subtitle {
  color: #555;
  font-size: 18px;
  margin-bottom: 60px;
  text-align:center;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  justify-items: center;
}

.tech-box {
  background: #fff;
  border-radius: 18px;
  padding: 30px 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.35s, box-shadow 0.35s;
  text-align: center;
  position: relative;
}

.tech-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.tech-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #813A96, #C77DFF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
  margin: 0 auto 20px;
  box-shadow: 0 6px 12px rgba(129,58,150,0.3);
}

.tech-heading {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

.tech-text {
  font-size: 15px;
  color: #555;
  line-height: 1.5;
}





.branding-expertise {
  background: #f9f7fc;
  padding: 80px 20px;
  font-family: "Segoe UI", sans-serif;
}

.branding-expertise__container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.branding-expertise__title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 50px;
  color: #813A96;
  position: relative;
}

.branding-expertise__title::after {
  content: "";
  display: block;
  width: 70px;
  height: 4px;
  background: linear-gradient(90deg, #813A96, #C77DFF);
  margin: 15px auto 0;
  border-radius: 3px;
}

.branding-expertise__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}

.branding-expertise__item {
  background: #fff;
  border-radius: 16px;
  padding: 30px 25px;
  text-align: left;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: all 0.35s ease;
  position: relative;
}

.branding-expertise__item:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.branding-expertise__icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #813A96, #C77DFF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 6px 12px rgba(129,58,150,0.3);
}

.branding-expertise__content h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

.branding-expertise__content p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}


.branding-expertise__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* always 4 items in a row */
  gap: 30px;
}

@media (max-width: 992px) {
  .branding-expertise__list {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
  }
}

@media (max-width: 576px) {
  .branding-expertise__list {
    grid-template-columns: 1fr; /* 1 per row on mobile */
  }
}







.software-expertise {
  background: linear-gradient(135deg, #833B95 0%,#833B95 100%);
  padding: 90px 20px;
  font-family: 'Segoe UI', sans-serif;
  color: #fff;
}

.software-expertise__container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.software-expertise__title {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 70px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  
}

.software-expertise__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px;
}

.software-expertise__card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 30px 25px;
  text-align: left;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}

.software-expertise__card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 120px;
  height: 120px;
  background: #833B95;
  border-radius: 50%;
  transition: 0.5s ease;
}

.software-expertise__card:hover::before {
  top: -30px;
  right: -30px;
  background: rgba(255,255,255,0.3);
}

.software-expertise__card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}

.software-expertise__icon {
  font-size: 42px;
  margin-bottom: 20px;
  color: #ffd86f;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.software-expertise__card h3 {
  font-size: 22px;
  margin-bottom: 14px;
  font-weight: 700;
  color: #fff;
}

.software-expertise__card p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
}




/*detail blog design 1**/



.blog-title { font-weight:700; }
    .meta { font-size:0.9rem; color:#64748b; }
    .blog-img { border-radius:1rem; }
    .content-card { background:#fff; border:1px solid #e2e8f0; border-radius:1rem; box-shadow:0 4px 20px rgba(0,0,0,0.06); padding:2rem; }
    
    .gallery-item { margin-bottom:1.5rem; }
    .gallery-item img { border-radius:.75rem; width:100% !important; height:220px; object-fit:cover; }
    figcaption { font-size:.9rem; color:#64748b; margin-top:.25rem; }
.img-fluid{ width:90% !important;}










  
	  /* Full-width horizontal policy links - unique style */
.policy-list {
  list-style: none;
  background-color:#f7f7f7;
  padding: 25px;
  margin: 0;
  display: flex;
  justify-content: space-between; /* Spread across full width */
  flex-wrap: wrap;
}

.policy-list li {
  flex: 1;                         /* Equal width for each link */
  margin: 5px;
}

.policy-list li a {
  display: block;
  background: #F5F0FA;             /* Light background */
  color: #813A96;
  text-align: center;
  padding: 15px 10px;              /* Increase height */
  border-radius: 8px;              /* Rounded corners */
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.policy-list li a:hover {
  background: #813A96;
  color: #fff;
  transform: translateY(-3px);     /* Slight lift effect */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
	
}
	  
	  
	.vendor-steps {
  background-color: #56208c21;
  padding: 60px 20px;
}
.steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}
.step {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 20px 30px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  text-align: center;
  min-width: 220px;
  transition: transform 0.3s ease;
}
.step:hover {
  transform: translateY(-5px);
}
.step .number {
  display: flex;
  align-items: center;
  justify-content: center;
    /* ✅ Purple background */
  color: #fff;           /* ✅ White text */
  font-weight: bold;
  font-size: 45px;
  width: 50px;
  height: 50px;
  
  margin: 0 auto 15px auto;
}
.step p {
  font-size:17px;
 
  text-align:center;
  margin: 0;
 
  color: #333;
}
.iso_wi{
	width:50%;
	height:50%;
	  
}





.commitment-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1100px;
  margin: 60px auto;
  background: #fff;
  border-radius: 12px;
  padding: 40px 30px;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  gap: 40px;
  flex-wrap: wrap;
}

.commitment-left {
  flex: 1.5;
}

.commitment-left h2 {
  font-size: 26px;
  color: #813A96;
  margin-bottom: 15px;
}

.commitment-left p {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

.commitment-right {
  flex: 1;
  background-color: #f2e6f7;
  padding: 25px;
  border-radius: 10px;
  text-align: center;
}

.commitment-right h3 {
  font-size: 20px;
  color: #4a1762;
  margin-bottom: 10px;
}

.commitment-right p {
  font-size: 14px;
  color: #444;
  margin-bottom: 20px;
}

.cta-button {
  display: inline-block;
  background-color: #813A96;
  color: #fff;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #6d2e80;
	color:#fff;
}

/* 30-09-2025 */

.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: #ffffff;
  color: #333;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
  font-family: Arial, sans-serif;
}
.cookie-banner p {
  margin: 0;
  font-size: 14px;
  flex: 1;
}
.cookie-actions {
  display: flex;
  gap: 10px;
}
.cookie-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}
#accept-cookies {
  background: #813A96;
  color: white;
}
#reject-cookies {
  background: #813A96;
  color: white;
}
.cookie-actions button:hover {
  opacity: 0.9;
}
.cookie-message {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  display: none;
  font-size: 14px;
  z-index: 10000;
}
	
	@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  .cookie-banner p {
    font-size: 13px;
    margin-bottom: 10px;
  }
  .cookie-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .cookie-actions button {
    flex: 1 1 auto;
    min-width: 120px;
  }
}

/* ✅ Mobile view (below 480px) */
@media (max-width: 480px) {
  .cookie-banner {
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 15px;
    font-size: 12px;
  }
  .cookie-banner p {
    font-size: 12px;
  }
  .cookie-actions {
    flex-direction: column;
    gap: 8px;
  }
  .cookie-actions button {
    width: 100%;
    font-size: 13px;
    padding: 10px;
  }
}




@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
  .container {
    padding: 10px;
  }
}
.single-services::before{ background:none !important;}