@font-face {
    font-family: 'Sofia-Pro-Black-Italic';
    src: url('../fonts/Sofia-Black-Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 400;
}

@font-face {
    font-family: 'Sofia-Pro-Black';
    src: url('../fonts/Sofia-Black.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Sofia-Pro-Bold-Italic';
    src: url('../fonts/Sofia-Pro-Bold-Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 700;
}

@font-face {
    font-family: 'Sofia-Pro-Bold';
    src: url('../fonts/Sofia-Pro-Bold.otf') format('opentype');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Sofia-Pro-ExtraLight-Italic';
    src: url('../fonts/Sofia-Pro-ExtraLight-Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 200;
}

@font-face {
    font-family: 'Sofia-Pro-ExtraLight';
    src: url('../fonts/Sofia-Pro-ExtraLight.otf') format('opentype');
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: 'Sofia-Pro-Light-Italic';
    src: url('../fonts/Sofia-Pro-Light-Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 300;
}

@font-face {
    font-family: 'Sofia-Pro-Light';
    src: url('../fonts/Sofia-Pro-Light.otf') format('opentype');
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Sofia-Pro-Medium-Italic';
    src: url('./fonts/sofia-pro/Sofia-Pro-Medium-Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 500;
}

@font-face {
    font-family: 'Sofia-Pro-Medium';
    src: url('../fonts/Sofia-Pro-Medium.otf') format('opentype');
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: 'Sofia-Pro-Regular-Italic';
    src: url('../fonts/Sofia-Pro-Regular-Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 400;
}

@font-face {
    font-family: 'Sofia-Pro-Regular';
    src: url('../fonts/Sofia-Pro-Regular.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Sofia-Pro-Semi-Bold-Italic';
    src: url('../fonts/Sofia-Pro-Semi-Bold-Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 600;
}

@font-face {
    font-family: 'Sofia-Pro-Semi-Bold';
    src: url('../fonts/Sofia-Pro-Semi-Bold.otf') format('opentype');
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: 'Sofia-Pro-UltraLight-Italic';
    src: url('./fon/sofia-pro/Sofia-Pro-UltraLight-Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 100;
}

@font-face {
    font-family: 'Sofia-Pro-UltraLight';
    src: url('../fonts/Sofia-Pro-UltraLight.otf') format('opentype');
    font-style: normal;
    font-weight: 100;
}
:root {
    --sofia-black-italic: 'Sofia-Pro-Black-Italic';
    --sofia-black: 'Sofia-Pro-Black';
    --sofia-pro-bold-italic: 'Sofia-Pro-Bold-Italic';
    --sofia-pro-bold: 'Sofia-Pro-Bold';
    --sofia-pro-extra-light-italic: 'Sofia-Pro-ExtraLight-Italic';
    --sofia-pro-extra-light: 'Sofia-Pro-ExtraLight';
    --sofia-pro-light-italic: 'Sofia-Pro-Light-Italic';
    --sofia-pro-light: 'Sofia-Pro-Light';
    --sofia-pro-medium-italic: 'Sofia-Pro-Medium-Italic';
    --sofia-pro-medium: 'Sofia-Pro-Medium';
    --sofia-pro-regular-italic: 'Sofia-Pro-Regular-Italic';
    --sofia-pro-regular: 'Sofia-Pro-Regular';
    --sofia-pro-semi-bold-italic: 'Sofia-Pro-Semi-Bold-Italic';
    --sofia-pro-semi-bold: 'Sofia-Pro-Semi-Bold';
    --sofia-pro-ultra-light-italic: 'Sofia-Pro-UltraLight-Italic';
    --sofia-pro-ultra-light: 'Sofia-Pro-UltraLight';


    --white:#FFFFFF;
    --light-gray:#f9f9f9;
    --light:#f8fff3;
    --dark-gray:#141414;
    --gary:#565656;
    --black:#00041B;
    --blue:#0000FF;
    --primary-color:rgb(121, 198, 225);
}
::-webkit-scrollbar{
    width: 0;
}
body,html{
    font-size: 16px;
    font-family:var(--sofia-pro-regular);
    color: var(--black);
    scroll-behavior: smooth;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========loader============= */
#loader{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: var(--light);
    transition: 1s linear;
}
.fadeOut{
    opacity: 0;
}
#loader .progress{
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;
    height: 100%;
    background-color: var(--primary-color);
    transition: 1s;
}

  .textDur {
    animation-duration: 1050ms;
  }
  
  .waveDur {
    animation-duration: 2100ms;
  }
  
  .container {
    position: absolute;
    width: 27rem;
    height: 10rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .text {
    text-transform: uppercase;
    color: var(--black);
    font-size: 6rem;
    font-weight: 900;
    display: inline-block;
    position: absolute;
    bottom: 0;
    animation: text 1850ms ease-in infinite;
    transform: translatez(0);
  }
  
  .text-l {
    left: 0rem;
    transform: translate3d(0, -4rem, 0);
    /* animation: text-w 1050ms ease-in infinite; */
}

.text-o {
    left: 3.2rem;
    animation-delay: 150ms;
}

.text-a {
    left: 7.9rem;
    animation-delay: 230ms;
}
  
  .text-d {
      left: 11.8rem;
      animation-delay: 310ms;
  }
  
  .text-i {
      left: 16rem;
      animation-delay: 390ms;
    }
    
    .text-n {
        left: 17.4rem;
        animation-delay: 470ms;
    }
    .text-g {
        left: 21.2rem;
        animation-delay: 550ms;
    }
    .text-dot {
        left: 25.5rem;
        animation-delay: 590ms;
  }
  .text-dot2 {
    left: 26.9rem;
    animation-delay: 650ms;
  }
  
  .coast {
    position: absolute;
    left: 1.3rem;
    bottom: 1.7rem;
    width: 6.2rem;
    height: 2.2rem;
    display: inline-block;
    animation: coast 2100ms linear infinite;
    transform: translateZ(0);
  }
  
  .wave-rel-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 3rem;
    perspective-origin: 0%, 50%;
  }
  
  .wave {
    position: absolute;
    width: 6.2rem;
    height: 2.2rem;
    border-radius: 1.1rem;
    background: radial-gradient(ellipse at center, rgba(116, 241, 252, 1) 0%, rgba(50, 230, 255, 1) 73%, rgba(21, 199, 250, 1) 100%);
    display: inline-block;
    animation: wave 2100ms linear infinite;
    will-change: width;
    transform: translateZ(0) scale(0);
  }
  
  .delay {
    animation-delay: calc(1050ms / 2);
  }
  
  @keyframes text {
    0%, 30%, 100% {
      transform: translate3d(0, 0, 0);
    }
    45% {
      transform: translate3d(0, -4rem, 0);
    }
  }
  
  

/* ==========loader============= */

/* ============nav============ */
a{
    text-decoration: none;
}
.logo{
    display: flex;
    height: 100%;
    align-items: center;
}
.logo img{
    height: 85%;
}
.logo .brand{
    color: var(--dark-gray);
    text-transform: uppercase;
    font-family: var(--sofia-pro-bold);
    font-size: 1.8rem;
}
.logo .brand span{
    background-color: var(--primary-color);
    padding: 5px 8px;
    border-radius: 8px;
}
#navbar.small-nav{
    height: 75px;
    box-shadow: 5px 5px 20px -15px gray;
}
#navbar{
    padding:0 5rem;
    transition: .4s;
    width: 100%;
    height: 100px;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
    z-index: 100;

}
#navbar .links{
    display: flex;
    align-items: center;
    gap: 45px;
    text-transform: uppercase;
}
#navbar .links .link{
    font-family: var(--sofia-pro-semi-bold);
    color: var(--black);
    position: relative;
    padding: 6px;
}
#navbar .link-btn{
    font-family: var(--sofia-pro-semi-bold);
    color: var(--black);
    padding: 10px 15px;
    background: var(--primary-color);
    border-radius:18px;

}
#navbar .links .link::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transform: scaleX(30%);
    transition: .4s;
}
#navbar .links .link.active::before,
#navbar .links .link:hover::before{
    transform: scaleX(100%);
}
.nav-toggler{
    display: none ;
}
.dropdown{
    position: relative;
}
#navbar .dropdown-menu .link::before{
    display: none;
}
#navbar .dropdown-menu li:hover,
#navbar .dropdown-menu li.active
{
    background-color: var(--primary-color);
    border-left: 4px solid var(--black);
}
#navbar .dropdown-menu li{
    border-left: 4px solid transparent;
    padding: 10px 15px;
}
#navbar .dropdown-menu .link{
    padding: 0;
}
.dropdown-menu{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background-color: var(--light);
    border-radius: 0 0 8px 8px;
    min-width: 230px;
    padding: 10px 0;
    box-shadow: 5px 5px 20px -15px gray;
    transform: scaleY(0);
    opacity: 0;
    transition: .5s ease-in-out;
    z-index: 1;
}
.dropdown:hover .dropdown-menu{
    transform: scaleY(1);
    opacity: 1;
}
.dropdown:hover .link::before{
    transform: scaleX(100%) !important;
}
ul{
    list-style: none;
}

/* ============nav============ */
/*=============== fixed items=============== */

#fixed_items{
    position: fixed;
    bottom: 5%;
    right:0;
    background-color: var(--light);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    box-shadow: 5px 5px 20px -10px;
    border-radius: 8px 0 0 8px;
}
#fixed_items .item i{
    font-size: 1.2rem;
    color: var(--primary-color);
}
#fixed_items .item a:hover i{
    transform: scale(1.5);
    font-size: 1.4rem;
}
#fixed_items .item a{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#fixed_items .item {
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 8px;
    box-shadow: 5px 5px 20px -10px;
    background-color: var(--dark-gray);
}

/*=============== fixed items=============== */
/* ===============hero============= */
#hero{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: url('../images/hero_bg.svg') no-repeat center center/cover;
}
#hero .hero-img {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
}
#hero .content .texts{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#hero .content{
    position: relative;
    width: 50%;
    padding: 100px 0px 0 5rem;
    height: 100%;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    z-index: 1;
}
#hero .content::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    min-width: 400px;
    width: 50%;
    height: 95%;
    background: var(--primary-color);
    opacity: .3;
    z-index: -1;
    border-radius: 8% 92% 64% 36% / 30% 28% 72% 70%  ;
    box-shadow: 3px 3px 20px -15px rgba(128, 128, 128, 0.342);
    transition: .4s;
    animation:bubble 3s linear infinite alternate ;
}
#hero .content::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    min-width: 400px;
    width: 50%;
    height: 90%;
    background: var(--primary-color);
    opacity: 0.6;
    z-index: -1;
    border-radius:22% 78% 100% 0% / 0% 57% 43% 100%  ;
    box-shadow: 3px 3px 20px -15px  rgba(128, 128, 128, 0.402);
    transition: .4s;
    animation:bubble1 3s linear infinite alternate ;
}
.technology{
    height: 230px;
    margin-top: 1rem;
}
.tabs{
    display: flex;
    gap:25px;
}
.tabs .tab{
    font-family: var(--sofia-pro-light);
    color: var(--black);
    position: relative;
    padding: 6px 0;
    font-size: 1.1rem;
    cursor: pointer;
    text-transform: uppercase;
}
.tabs .tab.active::before{
    background-color: var(--gary);
}
.tabs .tab::before
{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color:transparent;
    border-radius: 2px;
    transition: .4s;
}
.tabs-content{
    position: relative;
}
.tab-content.active{
    opacity: 1;
    z-index: 1;
}
.tab-content{
    width: 100%;
    padding: 1.5rem 0px 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .5s;
}

.commitmentSwiper, feedbacks {
    width: 100%;
    /* height: 170px; */
}
.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44* 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px -(var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.commitmentSwiper .swiper-slide,
.feedbacks .swiper-slide
 {
    width: 70%;
    background-color: var(--light);
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tab-content .swiper-button-prev,
.tab-content .swiper1-button-prev
{
    left: initial;
    right: 60px;
}
.tab-content .swiper-button-next,
.tab-content .swiper1-button-next,
.tab-content .swiper-button-prev,
.tab-content .swiper1-button-prev
{
    top: 0;
    width: 35px;
    height: 35px;
    background-color: var(--primary-color);
    border-radius: 50%;
    box-shadow: 5px 5px 20px -15px rgb(84, 84, 84);
}
.tab-content .swiper-button-next:after, 
.tab-content .swiper-button-prev:after,
.tab-content .swiper1-button-next:after, 
.tab-content .swiper1-button-prev:after
{
    font-size: 13px !important;
    text-shadow: 0px 0px 1px black;
}

.commitmentSwiper .icon{
    width: 45px;
    height: 45px;
    background-color: var(--white);
    padding: 5px;
    border-radius: 50%;
    box-shadow: 5px 5px 20px -15px rgb(78, 78, 78);
}
.commitmentSwiper .icon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.feedbacks .swiper-slide .row{
    display: flex;
    justify-content: space-between;
}
.feedbacks .swiper-slide .client img{
    width: 50px;
}
.feedbacks .swiper-slide .source img{
    width: 30px;
}
.feedbacks .client .details .name{
    font-size: 1.2rem;
    font-family: var(--sofia-pro-medium);
}
.feedbacks .client .details .date{
    color: rgb(84, 84, 84);
}
.feedbacks .client{
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.feedbacks .client .stars {
    margin-top: 5px;
}
.feedbacks .client .stars i{
    color: rgb(255, 208, 0);
}
.feedbacks .para{
    font-size: .9rem;
    font-family: var(--sofia-pro-extra-light);
}

.commitmentSwiper .heading{
    color: var(--gary);
}
.commitmentSwiper .para{
    font-family: var(--sofia-pro-extra-light);
    font-size: .9rem;
}
@keyframes bubble{
    0%{
        border-radius: 8% 92% 64% 36% / 30% 28% 72% 70%  ;
    }
    50%{
        border-radius: 10% 95% 64% 36% / 30% 28% 72% 60%  ;
    }
    100%{
        border-radius: 15% 100% 64% 36% / 30% 28% 72% 50%  ;
    }
}
@keyframes bubble1{
    0%{
        border-radius:22% 78% 100% 0% / 0% 57% 43% 100%  ;
    }
    50%{
        border-radius:25% 70% 100% 0% / 0% 57% 43% 90%  ;
    }
    100%{
        border-radius:30% 78% 95% 0% / 0% 57% 43% 85%  ;
    }
}
#hero .hero-img img{
    width: 95%;
    object-fit: cover;
    animation: blink 3s linear infinite alternate;
}
@keyframes blink {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.03);
    }
}

.demo-up {
    display: flex;
    width: fit-content;
    align-items: center;
    text-align: left;
    color: var(--dark-gray);
    background-color: var(--light);
    box-shadow: 5px 5px 20px -15px gray ;
    padding: 8px 20px;
    gap: 10px;
    border-radius: 25px;
    border:1px solid var(--primary-color);
    font-family: var(--sofia-pro-semi-bold);
}
.text-light{
    font-family: var(--sofia-pro-ultra-light);
}
 /** Server status css **/
 .server-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
  }
  .server-status::before,
  .server-status::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .server-status[type="up"],
  .server-status[type="up"]::before,
  .server-status[type="up"]::after {
    background: #2ECC71;
  }
  
  .server-status::before {
    content: "";
    animation: bounce 1.5s infinite;
  }
  .server-status::after {
    content: "";
    animation: bounce 1.5s -0.4s infinite;
  }
  
  @keyframes bounce {
    0% {
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(2);
      -webkit-transform: scale(2);
      opacity: 0;
    }
  }

  .hero-heading{
    font-size: 3.5rem;
  }
  .d-flex{
    display: flex;
  }
  .highlight-texts{
    font-size: 1.5rem;
    font-family: var(--sofia-pro-extra-light);
  }
/* ===============hero============= */

/* ==============few words============ */
#fewWords{
    width: 100%;
    background-color: var(--light-gray);
    position: relative;
    z-index: 1;
}

#fewWords::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    min-width: 400px;
    width: 30%;
    height: 100%;
    background: var(--primary-color);
    opacity: 0.6;
    z-index: -1;
    box-shadow: 3px 3px 20px -15px rgba(128, 128, 128, 0.402);
    transition: .4s;
    border-radius: 50% 0 0 50%;
}
#fewWords .section-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 2.5vw 6vw;
    gap: 20px;
}
#fewWords .section-container .contents{
    flex: 6;
}
#fewWords .section-container .contents .texts{
    max-width: 550px;
}
#fewWords .section-container .img{
    flex: 4;
    padding: 15px;
    overflow: hidden;
}
#fewWords .section-container .img img{
    width: 100%;
    border-radius: 15px;
    height: 100%;
    object-fit: cover;
    box-shadow: 5px 5px 20px -15px gray;
}
.few-words-typing-text
{
    position: relative!important;
    margin-top: -150px!important;
    color: var(--white);
    font-size: 2rem;
    text-align: center;
    align-items: center;
    margin: auto;
    text-shadow: 5px 5px 5px black;
}
.primary_heading{
    font-size: 2.5rem;
    padding: 15px 0;
    line-height: 1.1;
  
}
.section_heading{
    position: relative;
    display: inline-block;
    padding: 6px 10px;
    border: 2px solid var(--dark-gray);
    background-color: var(--primary-color);
    overflow: hidden;
    border-radius: 25px;
    text-transform: uppercase;
    z-index: 1;
}
.section_heading::before{
    content: '';
    position: absolute;
    top: 0;
    right:0;
    width: 40%;
    height: 100%;
    background-color: var(--light);
    z-index: -1;
    animation: fill-up 3s ease-in infinite alternate;

}
@keyframes fill-up {
    0%{
        width: 20%;
    }
    100%{
        width: 90%;
    }
}
.seo{
    font-family: var(--sofia-pro-bold);
    color: inherit;
}
.few-word-points{
    display: flex;
    column-gap: 4vw;
    row-gap: 1vw;
    flex-wrap: wrap;
    margin-top: 2rem;
    overflow: hidden;
}
.few-word-points .point{
    width: calc(50% - 4vw);
    border-top: 3px solid var(--primary-color);
    padding:1.2rem;
    background-color: var(--light);
    box-shadow: 5px 5px 20px -15px gray;
}
.few-word-points .point .num{
    font-size: 2.4rem;
}
.few-word-points .point .para{
    font-family: var(--sofia-pro-light);
    font-size: .9rem;
}

/* ==============few words============ */

/* ===================services============= */
#services {
    position: relative;
}
.service-page{
    padding: 100px 0 0 0 ;
}
#services::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    top: initial;
    left: initial;
    width: 350px;
    height: 400px;
    background: var(--primary-color);
    z-index: -1;
    box-shadow: 3px 3px 20px -15px rgba(128, 128, 128, 0.402);
    transition: .4s;
    border-radius: 50% 0 0 0%;
    z-index:-3;
}
#services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 250px;
    background: var(--primary-color);
    opacity: 0.6;
    z-index: -1;
    box-shadow: 3px 3px 20px -15px rgba(128, 128, 128, 0.402);
    transition: .4s;
    border-radius: 0 50% 50% 0;
}
#services .service-container{
    padding: 2.5vw 6vw;
}
#services .service-container .services{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 3vw;
}
#services .service-container .service{
    width: calc(33% - 1.8vw);
}
.services .service-option{
    position: relative;
    box-shadow: 5px 5px 20px -15px gray;
    min-height: 300px;
    overflow: hidden;
}
.services .service-option .img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    
}
.services .service-option:hover .img img{
    transform: scale(1.1);
}
.services .service-option::before{
    /*content: '';*/
    width: 100%;
    height: 100%;
     background:linear-gradient(to bottom,  #033157a6,#193a60b7); 
    background-color: var(--light);
    position: absolute;
    top:0;
    left: 0;
    z-index: -1;
}
.services .service-option .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1.2s;
}
.services .service-option .content{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 25px;
    color: var(--light);
    gap: 12px;
}
.services .service-option .content .heading{
    font-size: 1.8rem;
    text-shadow: 2px 2px 5px rgb(91, 91, 91);
}


/* ===================services============= */

/* =================why us ============== */
#why_us{
    min-height: 80vh;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: var(--primary-color);
}
#why_us::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background:url(../images/why_us.webp) no-repeat right bottom/45%;
}

#why_us .bubble1{
    position: absolute;
    top: 10%;
    right: 30%;
    opacity: .4;
    background-color: var(--light);
    width: 200px;
    aspect-ratio: 1/1;
    z-index: -2;
    border-radius: 50%;
}
#why_us .bubble2{
    position: absolute;
    top: 25%;
    right: 20%;
    opacity: .4;
    background-color: var(--light);
    width: 120px;
    aspect-ratio: 1/1;
    z-index: -2;
    border-radius: 50%;
}
#why_us .bubble3{
    position: absolute;
    top: 0;
    left: 0;
    /* opacity: .4; */
    background-color: var(--white);
    width: 150px;
    aspect-ratio: 1/1;
    z-index: -2;
    border-radius:0 0% 50% 0;
}
#why_us .bubble4{
    position: absolute;
    bottom: 5%;
    right: 25%;
    opacity: .4;
    background-color: var(--light);
    width: 230px;
    aspect-ratio: 1/1;
    z-index: -2;
    border-radius: 50%;
}
#why_us .section-container{
    padding: 2.5rem 6rem;
}
#our_partners .section-container,
#our_clients .section-container
{
    padding: 2.5rem 6rem;
}
#why_us .texts {
    max-width: 800px;
}
#why_us .primary_heading{
    max-width: 800px;
}
.why_options{
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.why_options .option .heading{
    margin-bottom: 5px;
}
.why_options .option{
    padding: 15px;
    background-color: rgb(244, 255, 194) ;
    border-radius: 15px;
    border-left: 6px solid var(--black);
    
}

.why_options .option:not(:first-child):not(:last-child) {
    margin-right: 3rem;
}
.why_options .option:nth-child(even){
    background-color: rgb(235, 255, 206);
}
/* =================why us ============== */

/* =============contact us================== */

input,textarea,select{
    padding: 10px;
    border: none;
    border-radius: 2px;
    outline: none;
}

.contact-form input,.contact-form textarea,.contact-form select{
    border: 2px solid rgb(228, 228, 228);
    transition: .4s;
}
.contact-form input:focus, .contact-form textarea:focus,.contact-form select:focus{
    border: 2px solid rgb(217, 255, 0);
}
.input-div{
    margin-bottom: 15px;
}
.input-div input, .input-div textarea,.input-div select{
    width: 100%;
}
.contact-form{
    width: 30%;
    max-width: 800px;
    min-width: 300px;
    flex: 2;
    padding: 2.5rem 2.5rem 2.5rem 6rem;
    background-color: #000000;
}
#contact .primary_heading{
    color: var(--white);
}
#contact .contents{
    display: flex;
}
#contact .contents .details-card{
    flex: 4;
}

#contact .submit-btn{
    width: 100%;
    display: block;
    padding: 10px;
    background-color: var(--primary-color);
    color: var(--dark-gray);
    cursor: pointer;
    font-family: var(--sofia-pro-semi-bold);
}
#location{
    height: calc(100% - 100px);
    background:var(--black);
}
.details-card{
    display: flex;
    flex-direction: column;
}
.address_box{
    width: 100%;
    padding: 25px;
    background-color: var(--black);
    display: flex;
    gap: 15px;
}
.single-address .address{
    font-size: .9rem;
}
.address_box .icon{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: .5rem;
}
.address_box .icon i{
    color: var(--dark-gray);
}
.address_box .single-address{
    border-left:2px solid rgb(73, 73, 73) !important;
    padding-left: 15px;
    color: var(--white);
    font-family: var(--sofia-pro-light);
    flex: 1;
}
footer{
    background:var(--black);
    color: var(--white);
    padding: 3.5rem 6.5rem 0 6.5rem;
    border-top: 1px solid rgb(174, 255, 24) !important;
}
.footer-container{
    display: flex;
    justify-content: space-between;
    gap: 3rem;
}
.footer_logo img{
    width: 120px;
    border-radius: 12px;
    margin-bottom: 10px;
}
.footer-container .col:first-child{
    padding-left:0rem !important;
    border-left: none;
}
.footer-container .col{
    flex: 3;
    padding-left:3rem;
    border-left: 1px solid #2c3800;
}
.footer-container .col-2{
    flex: 5;
}

.text-m{
    font-family: var(--sofia-pro-light);
}
.link-heading{
    font-family: var(--sofia-pro-semi-bold);
    font-size: 1.2rem;
    margin-bottom: 10px;
    padding: 5px ;
    border-bottom: 1px solid #384700;
}
.footer-container .links li{
    display: flex;
    gap: 10px;
    align-items: center;
}
.footer-container .links li> img{
    width: 15px;
}
.footer-container .links li> a{
    color: var(--white);
    font-family: var(--sofia-pro-light);
    transition: .4s;
}
.footer-container .links li> a:hover{
    transform: translateX(10px);
}
.copyright{
   border-top: 1px solid #2c3800;
   margin-top: 15px;
   display: flex;
   justify-content: space-between;
   padding: 30px 0;
}
/* ===================about===================== */
.about-hero{
    padding: 100px 0 0 0;
}
.row1{
    display: flex;
    align-items: center;
    gap: 15px;
}
.row1 .brand{
    text-transform: uppercase;
    font-size: 6vw;

}
.row1 .para{
    font-size: .87vw;
}
.highlight{
    color: var(--dark-gray);
}
.row2{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
}
.about-hero::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    min-width: 400px;
    width: 30%;
    height: 100%;
    background: var(--primary-color);
    opacity: 0.6;
    z-index: -1;
    box-shadow: 3px 3px 20px -15px rgba(128, 128, 128, 0.402);
    transition: .4s;
    border-radius: 0 50% 50% 0;
}
/* ===================about===================== */

/* ===================about-projects============= */
#projects{
    padding: 4.5rem 6.5rem;
    background-color: rgb(36, 36, 36);
    /* min-height: 80vh; */
    position: relative;
    z-index: 1;
}
#projects::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0%;
    min-width: 400px;
    width: 30%;
    height: 100%;
    max-height: 500px;
    background: var(--primary-color);
    z-index: -1;
    box-shadow: 3px 3px 20px -15px rgba(128, 128, 128, 0.402);
    transition: .4s;
    opacity: .8;
    border-radius: 0 0 50% 50% ;
}
.text-white{
    color: var(--white) !important;
}
#projects .primary_heading{
    color: var(--primary-color);
    max-width: 500px;
}
.project-slider{
    padding: 3rem 0 0 0;
    position: relative;
}
.project-slider .swiper-slide{
    background-color: black;
    padding: 1.5rem;
    color: rgb(219, 219, 219);
    width: 40%;
    max-width: 600px;
    min-width: 300px;
}
.project-slider .swiper-slide .row .client {
    display: flex;
    gap: 10px;
}
.project-slider .swiper-slide .row .client .details .stars i{
    color: goldenrod;
}
.project-slider .swiper-slide .row{
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.project-slider .swiper-slide .text-content .para{
    color: #b8b8b8;
    /* text-align: justify; */
}


.project-slider .swiper-slide .source img{
    width: 40px;
}
.project-slider .swiper-slide .client img{
    width: 60px;
}
.project-slider .swiper-button-next, .project-slider .swiper-button-prev{
    top: 0;
    width: 35px;
    height: 35px;
    background-color: var(--dark-gray);
    border-radius: 50%;
    box-shadow: 5px 5px 20px -15px rgb(84, 84, 84);
}
.project-slider .swiper-button-prev{
    left: initial;
    right: 70px;
}
.project-slider .swiper-button-next:after, .project-slider .swiper-button-prev:after{
    font-size: 14px;
    color: var(--white) !important;
}
.project-slider .project_link_btn{
    padding: 8px 20px;
    background-color: var(--primary-color);
    display: inline-block;
    margin-top: 10px;
    color: var(--black);
}
/* ===================about-projects============= */
.open_service i{
    color: var(--white);
}
.open_service{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0) ;
    background-color: rgba(204, 255, 0, 0.496);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: .4s;
    z-index: 111;
}
.services .service-option:hover .open_service{
    transform: translate(-50%,-50%) scale(1) rotate(-385deg);
}
.service-hero{
    padding: 100px 1rem 1rem 1rem;
    height: 50vh;
    background: url('../images/app.webp') no-repeat center center/cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    gap: 5px;
    z-index: 1;
}
.service-hero::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:linear-gradient(120deg ,#465900,#6c8a014a);
    z-index: -1;
}
.service-hero-heading{
    font-size: 3rem;
    text-align: center;
}
.row-2{
    display: flex;
    align-items: center;
}
.row-2 .left
{
    flex: 3;
}
.row-2 .right{
    flex: 4;
}
.row-2 .img img{
    width: 100%;
}
.row-2 .content {
    padding: 8rem 3rem 3rem 0rem;
}
.row-2 .content h3{
    font-size: 2rem;
    margin-bottom: .6rem;
}
.key_features{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 2rem;

}
.key_features .feature{
    min-width: 300px;
    flex: 0  0 48%;
    background-color: #f7ffda;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 2px 2px 15px -12px;
}

.content-feature .heading{
    margin-bottom: 10px;
    font-size: 1.2rem;
}
.feature .icon{
    width:50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 10px;
    background-color: var(--white);
    box-shadow: 4px 4px 15px -12px;
    margin-bottom: 10px;
}
.feature .icon img{
    width: 100%;
    height: 100%;
}
.development-process{
    background:url('../images/development.jpg') no-repeat center center/cover;
    padding: 4rem 6rem;
    position: relative;
    z-index: 1;
}
.development-process::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:linear-gradient(120deg ,#263100bb,#6c8a014a);
    z-index: -1;
}
.process-container{
    margin: 3rem 0;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.process-container .process{
    flex: 0  0 23%;
    min-width: 200px;
    padding: 1rem;
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 2px 2px 15px -12px;
}

.process .icon{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin-bottom: 10px;
    box-shadow:5px 5px 20px -15px black;
    font-family: var(--sofia-black);
}
.process.p-1 .icon{
    background-color: rgb(255, 91, 32);
    outline: 4px solid rgb(255, 161, 84);
}
.process.p-2 .icon{
    background-color: rgb(105, 197, 0);
    outline: 4px solid rgb(128, 255, 105);
}
.process.p-3 .icon{
    background-color: rgb(255, 165, 0);
    outline: 4px solid rgb(255, 197, 149);
}
.process.p-4 .icon{
    background-color: rgb(0, 147, 192);
    outline: 4px solid rgb(142, 214, 255);
}
.process.p-5 .icon{
    background-color: rgb(96, 1, 228);
    outline: 4px solid rgb(169, 83, 255);
}
.process.p-6 .icon{
    background-color: rgb(255, 91, 32);
    outline: 4px solid rgb(255, 161, 84);
}
.process.p-7 .icon{
    background-color: rgb(255, 165, 0);
    outline: 4px solid rgb(255, 197, 149);
}

/* vision mission */
#vision-mission{
    /* min-height: 80vh; */
    position: relative;
    z-index: 1;
}
#vision-mission .primary_heading{
    color: var(--primary-color);
    max-width: 500px;
}
.section-header{
    padding: 4.5rem 6.5rem;
}
.vision_mission{
    display: flex;
}
.vision_mission .heading{
    font-size: 2rem;
    margin-bottom: 10px;
}
.vision_mission .left,
.vision_mission .right{
    flex: 1;
    padding: 5rem;
    font-family: var(--sofia-pro-light);
}
.vision_mission .left{
    background-color: #f4ffcd;
}
.vision_mission .right{
    background-color:rgb(41, 41, 41);
    color: var(--white);
}

.mb-2{
    margin-bottom: 10px;
}
.vision_mission ul{
    list-style: disc !important;
    margin-left: 15px;
}
#works{
    padding: 3.5rem 6.5rem;
}
.work-swiper{
    margin-top: 2rem;
}
.work-swiper .swiper-slide{
    width: 250px;
}
.work-swiper .swiper-slide img{
    width: 100%;
}
.project-img{
    width: 100%;
    padding: 1.2rem;
    border-radius: 12px;
    background: rgb(255, 230, 183);
}
.project-img.img-even{
    background: rgb(207, 255, 183);
}
.text-inherit{
    color: inherit ;
}

.online_training{
    position: fixed;
    top: 20%;
    right: 0;
    transform: translateX(76%);
    background-color: var(--dark-gray);
    z-index: 100;
    font-size: 1.4rem;
    padding: 10px 15px;
    border-radius:10px 0px 0px 10px;
    display: flex;
    gap: 12px;
    color: var(--primary-color);
    align-items: center;
    cursor: pointer;
    transition: .4s;
    animation: training 5s linear 2s 1;
}
@keyframes training {
    0%{
        transform: translateX(76%);
    }
    10%{
        transform: translateX(0%);
    }
    90%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(76%);
    }
}

.online_training:hover{
    transform: translateX(0);
}
.online_training a{
    color: var(--primary-color);
}
#our_partners
{
    background-color:var(--light-gray);
}
.partner-slider{
    margin: 2rem 0;
}
.partner_swiper .swiper-slide .img,
.clients_swiper .swiper-slide .img
{
    background-color: var(--white);
    padding: 10px;
    border-radius: 10px ;
    width: 100%;
    aspect-ratio: 16/8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.clients_swiper .swiper-slide .img{
    background-color: var(--light-gray);
}
.partner_swiper .swiper-slide .img img,
.clients_swiper .swiper-slide .img img
{
    width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.clients_swiper .swiper-slide .img img{
     
}
#navbar .links .link.internship{
    font-size: 12px;
    background: #4c1181;
    color: white;
    border-radius: 5px;
}
#navbar .links .link.internship::before{
    display:none;
}