/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

/* Default Styling */
body {
    margin: 0;
    padding: 0;
    font-family: "El Messiri";
}
body p {
    font-size: 20px;
    
    color: #252B33;
}
body a {
 font-size: 20px !important;
}

.logo {
    height: 80px;
}

a {
    font-weight: 500;
    color: #8031a7;
    text-decoration: none;
}

.text-primary {
    color: #8031a7 !important;
}

.fs-14 {
    font-size: 14px;
    line-height: 24px;
}
.fs-18 {
    font-size: 18px;
    line-height: 28px;
}
.fs-19 {
    font-size: 19px;
    line-height: 30px;
}

.fs-20 {
    font-size: 20px;
    line-height: 30px;
}

.fs-22 {
    font-size: 22px;
    line-height: 28px;
}

.fs-26 {
    font-size: 22px;
    line-height: 28px;
}

.fs-40 {
    font-size: 40px;
    color: #252B33;
}

.text-justify {
    text-align: justify;
}

.navbar-expand-lg {
    padding: 20px 30px;
}

.navbar.fixed{
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    padding: 20px !important;
    transition: all 0.5s ease-out;
}

.navbar-expand-lg .navbar-nav .nav-link,
.navbar-expand-lg .dropdown-menu .dropdown-item {
    font-weight: 500;
    color: #000000;
    padding: 10px 15px;
}

.dropdown-menu {
    padding: 10px 0px;
}

.dropdown-item:active,
.dropdown-item.active {
    background-color: #8031a7;
    color: #FFFFFF !important;
}

.navbar-expand-lg dropdown-item

.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-expand-lg .navbar-nav .nav-link.active {
    color: #8031a7;
}
.navbar-expand-lg a {
    font-size: 20px;
}

.btn-primary {
    padding: 12px 30px;
    background-color: #8031a7;
    color: #fff;
    font-weight: 600;
    border-radius: 30px;
    border: none;
}
.btn-primary:hover {
    background-color: #9365AB;
    color: #fff;
    box-shadow: 0px 5px 10px rgba(0,0,0,0.05);
}

p,span {
    color: #252B33;
}

.hero-title {
    font-size: 60px;
    line-height: 90px;
    font-weight: 800;
}

.default-section {
    padding: 40px 0px;
}

#hero-sec {
    position: relative;
}

#hero-sec::before {
    position: absolute;
    width: 850px;
    height: 100%;
    content: '';
    z-index: -1;
    background: url(../../img/home/hero-bg.png) no-repeat;
    background-size: contain;
}

#about-page-sec::before {
    position: absolute;
    width: 100%;
    height: 833px;
    content: '';
    background: url(../../img/about-page-bg.png) no-repeat;
    background-size: cover;
    margin-top: -225px;
    z-index: -1;
}

#about-page-sec.app-page::before {
    position: absolute;
    width: 100%;
    height: 997px;
    content: '';
    background: url(../../img/app-page-bg.png) no-repeat;
    background-size: cover;
    margin-top: -225px;
    z-index: -1;
}

#website-page-sec::before {
    position: absolute;
    width: 100%;
    height: 833px;
    content: '';
    background: url(../../img/fx-website-page-bg.png) no-repeat;
    background-size: cover;
    margin-top: -225px;
    z-index: -1;

}

#smm-page-sec::before {
    position: absolute;
    width: 100%;
    height: 833px;
    content: '';
    background: url(../../img/smm-hero-bg.png) no-repeat;
    background-size: cover;
    margin-top: -225px;
    z-index: -1;

}

#fx-seo-page-sec::before {
    position: absolute;
    width: 100%;
    height: 828px;
    content: '';
    background: url(../../img/fx-seo-hero-bg.png) no-repeat;
    background-size: cover;
    margin-top: -225px;
    z-index: -1;

}

#vertex-page-sec::before {
    position: absolute;
    width: 100%;
    height: 833px;
    content: '';
    background: url(../../img/vertex-hero-bg.png) no-repeat;
    background-size: cover;
    margin-top: -225px;
    z-index: -1;

}

#fx-crm-page-sec::before {
    position: absolute;
    width: 100%;
    height: 833px;
    content: '';
    background: url(../../img/fx-crm-bg.png) no-repeat;
    background-size: cover;
    margin-top: -225px;
    z-index: -1;

}

#admin-risk-hero-sec::before {
    position: absolute;
    width: 100%;
    height: 833px;
    content: '';
    background: url(../../img/admin-risk-hero-bg.png) no-repeat;
    background-size: cover;
    margin-top: -225px;
    z-index: -1;

}

#hosting-page-sec::before {
    position: absolute;
    width: 100%;
    height: 833px;
    content: '';
    background: url(../../img/hosting-page-hero-bg.png) no-repeat;
    background-size: cover;
    margin-top: -225px;
    z-index: -1;

}


#web-development-process-sec .web-development-card {
    display: flex;
}

#web-development-process-sec .card {
    border: none;
    position: relative;
    padding: 20px;
}

#web-development-process-sec .card img {
    position: relative;
    margin-bottom: 40px;
    z-index: 99;
    height: 80px;
}

.card .card-text {
    line-height: 28px;
    text-align: justify;
}

.card .card-title {
    color: #252B33;
    font-size: 20px;
    /* min-height: 50px; */
}

/* #web-development-process-sec .card img::after {
    position: absolute;
    content: '';
    width: 60%;
    height: 1px;
    background-color: black;
    right: 0;
    top: 0;
    bottom: 0;
} */

#web-development-process-sec .card-group {
    margin-top: 50px;
}

.counter-sec {
    margin-top: 50px;
}

.counter-sec h2 {
    font-size: 80px;
}

.counter-sec h3 {
    font-size: 32px;
    margin-bottom: 30px;
}

#web-sec,#our-services-sec {
    /* background-color: #F8FCFF; */
    background-image: url(../../img/home/bg2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    


}
#web-sec li {
    list-style: none;
 
}
#web-sec a {
  color: #252B33 !important;
  font-size: 22px !important;
  font-weight: 700;
}

/*#app-sec */

#app-sec  li {
    list-style: none;
 
}
#app-sec  a {
  color: #252B33 !important;
  font-size: 22px !important;
  font-weight: 700;
}

#intro-unity-sec p {
    margin-bottom: 15px;
}

.services-slider {
    margin-top: 50px;
    /* margin-left: 300px; */
}

.services-slider .card { 
    position: relative;
}

.services-slider .card .color-dot {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 12px;
    opacity: 0.9;
    z-index: 0;
    top: 60px;
    left: 30px;
}

#why-choose-us-sec .card .card-body{
    padding: 40px 20px;
}

#why-choose-us-sec .card .color-dot {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 12px;
    opacity: 0.5;
    z-index: 1;
    top: 30px;
    left: 10px;
}

#why-choose-us-sec h3,p {
    margin-bottom: 40px;
}


#design-process .process-steps {
    margin: 60px 0;
    display: flex; 
    align-items: center;
    justify-content: center;
}

#design-process .process-card {
    width: 250px;
    height: 250px;
    border-radius: 125px;
    padding: 20px 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-right: -30px;
}

#design-process .process-card:nth-child(odd):before {
    position: absolute;
    content: '';
    width: 220px;
    height: 100%;
    background-image: url('../../img/circle-arrow1\ 1.png');
    background-repeat: no-repeat;
    background-size: contain;
    top: -80px;
}

#design-process .process-card:nth-child(even):before {
    position: absolute;
    content: '';
    width: 220px;
    height: 100%;
    background-image: url('../../img/circle-arrow1\ 2.png');
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -110px;
}

#design-process .process-card.pink {
    background-color: rgba(220, 92, 245, 0.10);
}

#design-process .process-card.pink h4{
    color: #dc5cf5;
}

#design-process .process-card.blue {
    background-color: rgba(1, 187, 228, 0.10);
}

#design-process .process-card.blue h4{
    color: #01BBE4;
}

#design-process .process-card.green {
    background-color: rgba(17, 197, 98, 0.10);
}

#design-process .process-card.green h4{
    color: #11C361;
}

#design-process .process-card.orange {
    background-color: rgba(255, 145, 0, 0.10);
}

#design-process .process-card.orange h4{
    color: #FF9000;
}

#design-process .process-card.red {
    background-color: rgba(255, 87, 118, 0.10);
}

#design-process .process-card.red h4{
    color: #FF5777;
}

#design-process p {
    margin-bottom: 0px;
    text-align: center;
    line-height: 20px;
}

#intro-unity-sec #intro-title {
    margin-bottom: 100px;
}

#intro-unity-sec #intro-title p{
    margin-bottom: 30px;
}

.website-page#this-is-us-sec {
    background: url(../../img/forex\ copy\ 1.png) no-repeat;
    background-position: bottom right;
    background-size: 295px;
    background-color: #e3f9fc33;
}


#slide-services::before {
    position: absolute;
    content: '';
    background: url(../../img/unity\ hub\ logo\ copy\ 1.png) no-repeat;
    background-position: 350px 50px;
    width: 100%;
    height: 100%;
}

#slide-services .services-slider {
    margin-left: 700px;
}

#slide-services .services-slider .card{
    padding: 50px 20px;
}

#slide-services .owl-carousel .owl-stage-outer{
    overflow-X: scroll;
    padding-bottom: 10px;
}

#slide-services .owl-carousel .owl-stage-outer::-webkit-scrollbar {
    height: 8px;
    width: 300px;
}

#slide-services .owl-carousel .owl-stage-outer::-webkit-scrollbar-track {
    background: rgba(255,73,0,0.10);
    border-radius: 4px;
}

#slide-services .owl-carousel .owl-stage-outer::-webkit-scrollbar-thumb {
    background: #8031a7;
    border-radius: 4px;
}

.card.sky1 .color-dot {
    background-color: #9dee87;
}

.card.sky1:hover {
    background-color: #5ac3ff1a;
    border-color: #9dee87 !important;
}

.card.sky .color-dot {
    background-color: #5AC2FF;
}

.card.sky:hover {
    background-color: #5ac3ff1a;
    border-color: #5AC2FF !important;
}

.card.purple .color-dot {
    background-color: #CAB1FF;
}

.card.purple:hover {
    background-color: #CAB1FF1a;
    border-color: #CAB1FF !important;
}

.card.orange .color-dot {
    background-color: #FF8076;
}

.card.orange:hover {
    background-color: #FF80761a;
    border-color: #FF8076 !important;
}

.card.yellow .color-dot {
    background-color: #FBC136;
}

.card.yellow:hover {
    background-color: #FBC1361a;
    border-color: #FBC136 !important;
}

.card.blue .color-dot {
    background-color: #0885F6;
}

.card.blue:hover {
    background-color: #0885F61a;
    border-color: #0885F6 !important;
}

.services-slider .card-body {
    padding: 15px;
}

.services-slider img {
    width: 80px;
    height: 80px ;
    margin: 30px 0;
}

.services-slider p {
    min-height: 100px;
    margin-bottom: 30px;
}

.services-slider a {
    display: none;
    text-decoration: underline;
    color: #8031a7;
}

.services-slider .card:hover a {
    display: block;
}

#video-sec {
    background-color: #F2F5F9;
}

#video-sec .video-thumb {
    position: relative;
    margin-bottom: 30px;
}

#video-sec .video-thumb .play-button{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.testimonial-slider {
    padding: 40px 0px;
}

.testimonial-slider img{
    width: 235px !important;
}

.testimonial-slider .card{
    position: relative;
}

.testimonial-slider .client-message{
    margin: 30px 100px 0px;
}

.testimonial-slider .card::before{
    position: absolute;
    content: '';
    top: 40px;
    left: 20px;
    width: 110px;
    height: 110px;
    background: url('../../img/qoutes.png') no-repeat;
}

.testimonial-slider .owl-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #00000010;
    color: #fff;
    margin: 0px 10px;
}

.testimonial-slider .owl-arrow:hover {
    background-color: #8031a7;
    color: #FFFFFF;
}

.testimonial-slider .owl-nav {
    margin-top: 30px;
    text-align: center;
}

.card {
    border-color: #DEDEDE !important;
}

#informative-sec {
    padding: 125px 0;
    background: url('../../img/home/cta-bg.png') no-repeat;
    background-size: cover;
}

.app-page#informative-sec {
    padding: 75px 0;
    background: url('../../img/app-mob-bg.png') no-repeat;
    background-size: cover;
}

#blog-sec {
    padding: 100px 0;
}

#contact-sec {
    padding: 200px 0 100px;
    /* background: url('../../img/home/contact-bg.png') no-repeat; */
    background: url('../../img/home/bg2.png') no-repeat;
    background-size: cover;
}

#contact-sec .form-label{
    font-size: 14px;
    color: #252B33;
}

#contact-sec .form-control,.form-select{
    background-color: #FFFFFF !important;
    border-color: #E4E0E7 !important;
    height: 50px;
    font-size: 14px;
    color: #252B33;
}

#contact-sec img{
 margin: -50px;
}
footer {
    background-color: #252B33;
    color: #BBB6BF !important;
}

footer .row{
    padding: 35px 0;
}

footer p{
    font-size: 18px;
    color: #BBB6BF !important;
}

footer ul{
    list-style: none;
    padding-left: 0px;
}

footer ul a{
    color: #BBB6BF;
    font-weight: 300;
}

footer ul li{
    padding-bottom: 10px;
}

footer ul a:hover{
    color: #8031a7;
}

footer .social-icon a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    border-radius: 18px;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
}

footer .social-icon a:hover{
    border: 1px solid #8031a7;
    background-color: #8031a7;
    color: #FFFFFF;
}

footer #bottom-footer p{
    font-size: 18px;
    padding: 10px 0;
}

#img-gallery {
    padding: 50px 100px;
}

.web-development-card.about-page {
    margin-top: 30px;
}

#web-development-process-sec .about-page .card {
    padding: 0;
    position: relative;
}

#web-development-process-sec .about-page .card hr{
    position: relative;
    margin-bottom: 20px;
}

#web-development-process-sec .about-page .card::before{
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    background-color: #8031a7;
    border-radius: 6px;
    z-index: 10;
    margin: 0 auto;
    top: 65px;
    left: 0;
    right: 0;
}

#web-development-process-sec .about-page .card img {
    margin: 0;
}

.about-page#web-sec {
    background-color: unset;
}

.award-slider {
    margin: 30px 0;
}

#award-slider.owl-carousel .owl-item img {
    width: 220px;
    margin: 0 auto;
}

.about-page#informative-sec {
    background-image: url('../../img/about-cta-bg.png');
}

#key-feature-sec .key-feature {
    margin-top: 60px;
}

#highlight-cards-sec .card:hover {    
    background-color: #8031a7;
}   

#highlight-cards-sec .card:hover h5,    
#highlight-cards-sec .card:hover p{    
    color: #FFFFFF;
} 

#payment-page-sec {
    padding: 175px 0;
}

#payment-page-img-sec {
    height: 600px;
    background-image: url('../../img/payment-page-sec-img.png');
    background-repeat: no-repeat;
    background-size: cover;
}

#payment-key-benifits-sec {
    background-color: #FAFAFA;
}

.key-feature-admin-risk {
    margin-bottom: 40px;
}

#future-verte-sec .card{
    padding: 60px 90px;
    background-color: #0885F6;
    position: relative;
}

#future-verte-sec .card::before{
    position: absolute;
    content: '';
    top: -150px;
    left: 50px;
    background-image: url('../../img/sitting-cartoon.png');
    background-repeat: no-repeat;
    z-index: 99;
    width: 141px;
    height: 253px;
}

#feature-cta-card .card {
    padding: 60px 75px;
    background-color: #59636C;
}

.card-blue {
    padding: 0px 55px;
    background-color: #0885F6;
}

.btn-white {
    background-color: #FFFFFF;
    color: #8031a7;
    font-size: 16px;
    padding: 12px 40px;
    border-radius: 40px;
}

.btn-white:hover {
    background-color: #8031a7;
    color: #FFFFFF;
    box-shadow: 0px 5px 10px rgba(0,0,0,0.05);
}

.fs-34 {
    font-size: 34px;
}

.fs-24 {
    font-size: 24px;
}

#contact-details .mobile-part{
    border-right: 1px solid #D6D1DB;
}

#contact-us-page-form .form-label {
    font-size: 18px;
    

}


#contact-us-page-form .form-control,.form-select {
    height: 53px;
    border-color: #E4E0E7;
}

#contact-us-page-form .form-select:focus,.form-control:focus {
    box-shadow: none;
}

#contact-us-page-form {
    margin-top: 150px;
}

#ready-to-sec .ready-card {
    background-color: #8031a7;
    padding: 30px;
    text-align: center;

}

#admin-last-sec {
    background-color: #eff6fe4d;
}

#fusion-part-vertex{
    position: relative;
}

#fusion-part-vertex.fixed {
    position: fixed;
    top: 20%;
    left: 16%;
    width: 33%;
}

#design-setps .step-img {
    position: relative;
    width: 100%;
    /* height: 530px; */
}

#design-setps .step-img .design-content{
    z-index: 99;
    position: absolute;
}

/* #design-setps .step-img::before {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    background-image: url('../../img/Mask group (1).png');
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: -1;
} */

#design-setps .step-img::after {
    position: absolute;
    content: '';
    height: 60%;
    width: 100%;
    background: linear-gradient(#d9d9d900, #8031a7 80%);
    bottom: 0;
    z-index: 0;
}

#design-process-steps .accordion-item {
    background-color: #F5F5F5;
    border: none !important;
    border-radius: 10px;
}

#design-process-steps .accordion-button:not(.collapsed) {
    background-color: #F5F5F5;
    color: #252B33 !important;
    border: none !important;
    border-radius: 10px;
}

#design-process-steps .accordion-button {
    background-color: #FFFFFF;
    color: #252B33 !important;
    border: none !important;
}

.fade-in {
	opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.web-development-card .web-development-step {
    position: relative;
}

.web-development-card .web-development-step::after {
    position: absolute;
    content: '';
    top: -30px; left: 60%; right: 0; bottom: 0;
    width: 100%;
    background: url('../../img/home/Line 1.png') no-repeat center / contain;
}

.web-development-card .web-development-step.last::after {
    position: unset;
    content: none;
}