@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --black : #101010;
    --white : #fff;
    --blue : #166EE5;
    --sky : #00BBFF;

}
*{
    font-family: "Poppins", sans-serif;
    border: none;  outline: none;
    list-style: none;
    text-decoration: none; 
    box-sizing:  border-box;

}

*::selection{

  background-color: var(--blue);

  color: var(--white);

}
*:focus {

    outline: none;

}
body{

    overflow: inherit;

    scroll-behavior: smooth;
    padding: 0  !important;

}

body::-webkit-scrollbar,
.after-test p::-webkit-scrollbar {

    width: 8px;

}
.after-test p::-webkit-scrollbar{

    width: 2px;

}
body::-webkit-scrollbar-track,
.after-test p::-webkit-scrollbar-track{

    box-shadow: inset 0 0 6px #f5600069;

}
p {
    text-transform: lowercase;
}

p::first-letter {
    text-transform: uppercase;
}

body::-webkit-scrollbar-thumb,
.after-test p::-webkit-scrollbar-thumb  {

    background-color:  var(--blue);

    outline: 1px solid var(--blue);

}

.relative{

    position: relative;

}

.absolute{

    position: absolute;

}



a , a:hover{

    text-decoration: none;

}

ul{

  padding: 0;

  margin: 0;

}

h1,h2,h3,h4,h5,h6,p,ul,span{
    margin-bottom: 0;
}
span,a,li,p {

    font-size: 16px;
    margin-bottom: 0;
}
p{
    text-transform: math-auto;
    line-height: 22px;
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
}
.container{
    max-width: 1170px
}
section{
    padding: 80px 0;
}
.text-white{
    color: var(--white);
}
.text-black{
    color: var(--black);
}
.text-blue{
    color: var(--blue);
}
.text-sky{
    color: var(--sky);
}
.bg-white{
    background-color: var(--white);
}
.bg-black{
    background-color: var(--black);
}
.bg-blue{
    background-color: var(--blue);
}
.bg-sky{
    background-color: var(--sky);
}
.home__wrap{
    background: url(../../assets/images/home-banner.webp) center top / cover no-repeat;
    padding-top: 200px;
    position: relative;
    z-index: -1;
}
header {
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    z-index: 999;
}
header .navbar-nav {
    background-color: var(--blue);
    color: white;
    border-radius: 50px;
}
header .navbar-light .navbar-nav .nav-link {
    color: var(--white);
    font-size: 14px;
    font-weight: 300;
    padding: 0;
    position: relative;
    padding: 20px 0;
}
header .navbar-light .navbar-nav .nav-item{
    padding: 0 10px;
}
header .navbar-light .navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    width: 0;
    height: 5px;
    background-color: #f1fdfe;
    top: 0;
    transition: all .2s linear;
}

header .navbar-light .navbar-nav .nav-link:hover::before{
    width: 100%;
    transition: all .2s linear;

}
header .container{
    justify-content: center !important;
}
header .navbar-light .navbar-nav .nav-link:hover {
    color: #ffffffba;
}
.home__wrap .content__wrap h4 , .inner__content h3{
    font-size: 40px;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--white);
}
.home__wrap .content__wrap h1 , .inner__content h2{
    font-size: 80px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--sky);
    line-height: 75px;
}
.home__wrap .content__wrap h2  , .inner__content h2 span{
    font-size: 80px;
    font-weight: 200;
    text-transform: uppercase;
    color: white;
    line-height: 80px;
}
.home__wrap .content__wrap p  , .inner__content p{
    font-size: 16px;
    color: var(--white);
    padding-top: 10px;
    font-weight: 300;
}
.inner__content h5 {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--white);
}
.creative__txt {
    position: relative;
    left: -18%;
    top: 42px;
}
.award-btn {
    position: relative;
}

.award-btn::before {
    position: absolute;
    content: '';
    background: url(../../assets/images/icons/arwad-txt.svg) center left / cover no-repeat;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    animation: circle 30s linear infinite;
}
.award-btn {
    position: relative;
    width: max-content;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
}
.gradient__color {
    background: linear-gradient(138deg, rgb(0 0 0 / 0%) 35%, rgb(44 75 195 / 56%) 61%, rgb(63 172 234 / 86%) 91%, rgb(72 200 246) 100%);
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    z-index: -1;
    animation: taadaa 1s infinite alternate;
}
.brand__text {
    transform: rotate(-1deg);
    margin-top: -20px;
    background-color: var(--blue);
}
.brand__text li {
    font-size: 30px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0;
    display: flex !important;
    justify-content: center;
    color: var(--white);
}
.brand__text .slick-slide {
    width: max-content !important;  
    padding: 20px 5px;
}   
.about__company h5 {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
}
.about__company h2 , .about__company h2 span  , .testimonial h5 , .testimonial h5 span{
    font-size: 50px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 50px;
    padding: 10px 0;
}
.about__company ul {
    display: grid;
    grid-template-columns: auto auto;
    padding: 13px 0;
}

.about__company ul li {
    font-size: 15px;
    font-weight: 600;
    position: relative;
    padding-left: 15px;
    line-height: 30px;
}

.about__company ul li::before {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    background-color: var(--blue);
    border-radius: 20px;
    left: 0;
    top: 30%;
    border: 1px solid var(
    --black);
    padding: 4px;
}

.cta__wrap .container {
    background: url(../../assets/images/cta-bg.png) center left / cover no-repeat;
    padding: 0 50px;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}
.cta__wrap .content span , .cta__wrap .content p {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--white);
}
.cta__wrap .content p {
    text-transform: lowercase;
    font-weight: 400;
}
.cta__wrap .content h3 {
    font-size: 40px;
    color: var(--white);
    line-height: 40px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 5px 0;
}
.top__services .content h3, .top__services .content h3 span , .service__list li h6  ,
.tabs__wrap .tabs__title h3{
    font-size: 36px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 36px;
    padding: 10px 0;
    letter-spacing: -1px;
}
.query__form .right__content h5 , .query__form .right__content h5 span{
    font-size: 45px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 45px;
    padding: 10px 0;
    letter-spacing: -1px;
}
.top__services{
    background: linear-gradient(157deg, rgba(255, 255, 255, 1) 11%, rgba(68, 200, 246, .1) 53%, rgba(255, 255, 255, 1) 96%);
}
.service__list li {
    display: flex;
    justify-content: space-between;
}
.service__list li p {
    max-width: 470px;
}
.top__services .row:nth-child(1) , .service__list li{
    border-bottom: 2px solid #C9C9C9;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.service__list li img {
    width: 110px;
    object-fit: scale-down;
    height: 100px;
}
.service__list li:last-child{
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
.case__stydy h3  , .industries__wrap h4{
    font-size: 170px;
    font-weight: bold;
    color: black;
    line-height: 150px;
    text-align: center;
    position: relative;
    letter-spacing: -5px;
}
.case__stydy .accordion-button {
    background-color: transparent;
    font-size: 30px;
    font-weight: 500;
    color: black;
    border: none;
    padding-left: 0;
}
.case__stydy .accordion-item , .case__stydy .accordion-button:focus , .case__stydy  .accordion-button:not(.collapsed){
    border: 0;
    border-color: transparent;
    box-shadow: none;
    box-shadow: none;
}
.case__stydy .accordion-body {
    padding: 0;
}
.case__stydy  .accordion-body ul li {
    list-style: disc;
    margin-left: 20px;
}
.case__slider {
    display: flex;
    justify-content: space-between;
}
.case__slider span {
    font-size: 16px;
    font-weight: 600;
    color: var(--blue);
    text-align: center;
    display: block;
    padding-top: 5px;
    line-height: 22px;
}
.case__slider h4 {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: black;
}
.case__slider a {
    position: relative;
    width: max-content !important;
    margin-top: 10px;
}
.case__slider a::before {
    position: absolute;
    content: '';
    width: 0;
    border-top: 5px solid var(--blue);
    top: -10px;
    transition: all .3s linear;
}

.case__slider a:hover::before {
    width: 100%;
    transition: all .3s linear;
}
.skill-percentage {
    height: 14px;
    background: var(--sky);
    border-radius: 3px;
    position: relative;
    animation: fillBars 2.5s 1;
  }
  
  .skill-percentage::before{
    content: attr(per);
    position: absolute;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px;
    top: -35px;
    right: 0;
    transform: transition(50%)  
  }
  
  .skill-percentage::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--sky);
    top: -20px;
    right: 0;
    transform: translateX(50%) rotate(45deg);
    border-radius: 2px;
  }
  
  @keyframes fillBars {
    from{
      width: 0;
    }
    to{
     width: 100%; 
    }
}
.result__wrap{
    background: url(../../assets/images/footer.webp) center left / cover no-repeat;
}
.result__wrap .content h3  , .result__wrap .content h3  span{
    font-size: 45px;
    font-weight: 600;
    text-transform: uppercase;
    line-height:44px;
    padding: 10px 0;
    letter-spacing: -1px;
}
.result__wrap .content .txt {
    max-width: 75%;
}
.resut__list {
    display: flex;
    justify-content: space-between;
}
.div {
    display: flex;
    margin: 20px 0;
}

.result__box {
    background-color: white;
    margin: 0 10px;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    width: 120px;
    height: 120px;
}

.result__box p {
    font-weight: 600;
    line-height: 15px;
    font-size: 16px;
    padding-top: 7px;
}
.result__wrap .content .para {
    max-width: 80%;
    font-size: 15px;
}
.skills {
    width: 120%;
}
.about-img {
    margin-top: -4%;
}
.call span {
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: -2px;
    color: #CBCBCB;
    text-align: center;
    display: block;
    margin-top: 20px;
    font-weight: 500;
}
.call svg {
    color: var(--sky);
    padding-right: 5px;
    animation: dzRing 1.2s infinite ease-in-out;
}
.call p {
    font-size: 43px;
    text-align: center;
    padding-top: 5px;
    font-weight: 500;
    color: white;
}

.industries__wrap .txt {
    font-size: 45px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 25px 0;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
}

.industries__wrap .txt span {
    font-size: 70px;
    font-weight: bold;
    color: var(--blue);
    text-transform: uppercase;
}
.indus__box {
    padding: 40px;
    border-radius: 15px;
    --angle: 0deg;
    padding: 40px;
    border: 4px solid #2d3c8c;
    border-radius: 16px;
    background: linear-gradient(#2d3e94, #15192b) padding-box, conic-gradient(from var(--angle), #dfdfdf, #1d6ee1) border-box;
  
}
.indus__box:hover{
    border: 4px solid transparent;
    -webkit-animation: rotate-gradient 3s infinite linear;
    animation: rotate-gradient 3s infinite linear;
}
.indus__box h3 {
    font-size: 45px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0;
    color: white;
    text-align: center;
}

.indus__box img {
    display: block;
    margin: auto;
    margin: 25px auto;
}

.indus__box p  , .footer__wrap{
    font-size: 16px;
    color: white;
    line-height: 22px;
}
.award__title p {
    font-size: 55px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: left;
    position: relative;
    top: 97px;
}
.industries__wrap .row .col-12:nth-child(2) .indus__box ,
.industries__wrap .row .col-12:nth-child(4) .indus__box,
.industries__wrap .row .col-12:nth-child(6) .indus__box{
    margin-top: 40px;
}
.award__slider .brand__text {
    transform: rotate(5deg);
}
.award__slider{
    padding: 60px 0;
}
.test-content {
    border: 1px solid #80808082;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}
.test-content p:nth-child(3) {
    font-size: 14px;
    color: #606060;
    height: 127px;
    overflow: auto;
    padding-right: 5px;
    line-height: 20px;
}
.test-content svg {
    color: #FE9800;
}
.test-content p:nth-child(3)::-webkit-scrollbar {
    width: 1px;
}

.test-content p:nth-child(3)::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.test-content p:nth-child(3)::-webkit-scrollbar-thumb {
background-color: var(--sky);
outline: 1px solid var(--sky);
}
.primary-btn-wrap {
    font-size: 16px;
    font-weight: 500;
    color: var(--black);
    padding: 10px 25px;
    display: block;
    border: 1px solid var(--black);
    border-radius: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
}
img.rev {
    max-width: 100%;
}
.testimonial{
    background: url(../../assets/images/review-bg.webp) center left / cover no-repeat;
}
.one , .two{
    position: relative;
    top: 100px;
}
.three , .four{
    position: relative;
    top: -40px; 
}
.test-content span {
    font-size: 20px;
    display: block;
    line-height: 22px;
    padding: 10px 0;
    font-weight: 500;
}
.tabs__wrap {
    background: url(../../assets/images/choose-bg.png) center left / cover no-repeat;
}
.tabs__wrap  .nav-tabs .nav-link.active {
    color: #495057;
    background-color: transparent;
    border-color: transparent;
    font-size: 27px;
    font-weight: bold;
    color: var(--sky);
    display: flex;
    align-items: center;
    gap: 20px;
}
.tabs__wrap .nav-tabs .nav-link.active object {
    position: relative;
    top: 5px;
    opacity: 1;
}
.tabs__wrap .nav-tabs .nav-link.active {
    font-size: 25px;
    font-weight: 600;
    color: var(--sky);
}
.tabs__wrap  .nav-tabs {
    border-bottom: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
}
.tabs__wrap .nav-tabs .nav-link {
    font-size: 25px;
    font-weight: 300;
    color: white;
    display: flex;
    align-items: center;
    gap: 20px;
}
.tabs__wrap .nav-tabs .nav-link object {
    opacity: 0;
}
.tabs__wrap .nav-tabs .nav-link:focus, .tabs__wrap .nav-tabs .nav-link:hover {
    border-color: transparent;
}
.tabs__box{
    position: relative;
}
.tabs__box p {
    position: absolute;
    bottom: 15px;
    color: white;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
}
.tabs__box img {
    border-radius: 15px;
    max-width: 100%;
}
.query__form form h4 {
    font-size: 55px;
    font-weight: 800;
    -webkit-text-stroke: 2px #000000de;
    -webkit-text-fill-color: white;
    -webkit-animation: fill 0.5s infinite alternate;
    font-family: poppins;
    text-transform: uppercase;
}
.query__form form {
    border: 15px solid black;
    border-radius: 30px;
    text-align: center;
    padding: 30px;
}

.query__form form input ,  .query__form form textarea{
    display: block;
    width: 100%;
    border: 1px solid #BBBBBB;
    height: 45px;
    margin: 10px 0;
    border-radius: 20px;
    padding: 19px;
    font-size: 14px;
}
.query__form form textarea{
    height: 100px;
}
.query__form form button {
    font-size: 16px;
    font-weight: 600;
    background-color: black;
    color: white;
    width: 100%;
    height: 45px;
    border-radius: 40px;
}
.footer__wrap{
    background: url(../../assets/images/footer.webp) center top / cover no-repeat;
}

.brand__ser__slider li {
    font-size: 60px;
    color: white;
    font-weight: 500;
    letter-spacing: -3px;
    display: flex;
    align-items: center;
}
.brand__ser__slider li span {
    font-size: 60px;
    color: #00BBFF;
}
.brand__ser__slider.slick-slide {
    width: max-content !important;
    padding: 20px 5px;
}
.brand__texts li {
    color: white;
    font-size: 40px;
    font-weight: 300;
    letter-spacing: 0;
    display: flex !important;
    align-items: center;
    gap: 20px;
    line-height: 50px;
    padding-left: 20px;
}

.brand__texts li span {
    font-size: 60px;
    color: var(--blue);
    line-height: 0;
    padding-top: 15px;
    padding-bottom: 0;
}
.brand__texts .slick-slide {
    width: max-content !important;
}
.cube__animation ul li {
    display: flex;
}
/* .cube__animation ul li img:nth-child(1) {
    animation: cube 2s infinite alternate;
}
.cube__animation ul li img:nth-child(2) {
    animation: cube2 2s infinite alternate;
}
.cube__animation ul li img:nth-child(3) {
    animation: cube 2s infinite alternate;
}
@keyframes cube{
    20%{ transform: translate(0px, 0px);}
   30%{ transform: translate(-15px, -15px);}
   100%{ transform: translate(0px, 0px);}
}
@keyframes cube2{
    0%{ transform: translate(0px, 0px);}
   30%{    transform: translate(15px, -15px);}
   100%{ transform: translate(0px, 0px);}
} */

.dropdown-menu.show {
    display: flex !important;
    padding: 0;
}
.web-dev {
    width: 50px;
    min-height: 100%;
    position: relative;
    font-size: 20px;    
}
.one_1::before{
    content: 'Development';
}
.two_2::before{
    content: 'Ecommerce';
}
.three_3::before{
    content: 'Brand';
}
.four_4::before{
    content: 'Apps';
}
.five_5::before{
    content: 'Marketing';
}
.web-dev::before {
   
    position: absolute;
    left: 0;
    writing-mode: sideways-lr;
    font-size: 25px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 50px;
    background-color: #1d6ee1;
    color: white;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    right: 0;
}
.dropdown-menu ul {
    padding: 20px 0;
}
.navbar-nav .dropdown-item {
    padding: 6px 1rem;
    transition: all .3s linear;
    font-size: 14px !important;
}
.navbar-nav .dropdown-item:focus, .dropdown-item:hover {
    color: #1e2125;
    background-color: transparent;
}
.dropdown-item:hover {
    transform: translateX(5px);
    transition: all .3s linear;
    color: #1d6ee1;
}
.marketing__img {
    position: relative;
    width: 120%;
    top: 35px;
}


@-webkit-keyframes dzRing {
    0% {
      -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
  
    10% {
      -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }
  
    20% {
      -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }
  
    30% {
      -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }
  
    40% {
      -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }
  
    50% {
      -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
  
    100% {
      -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
  
  }
  
  @-webkit-keyframes dzRing {
    0% {
      -webkit-transform: rotate(0) scale(1) skew(1deg);
      transform: rotate(0) scale(1) skew(1deg);
    }
  
    10% {
      -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
      transform: rotate(-25deg) scale(1) skew(1deg);
    }
  
    20% {
      -webkit-transform: rotate(25deg) scale(1) skew(1deg);
      transform: rotate(25deg) scale(1) skew(1deg);
    }
  
    30% {
      -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
      transform: rotate(-25deg) scale(1) skew(1deg);
    }
  
    40% {
      -webkit-transform: rotate(25deg) scale(1) skew(1deg);
      transform: rotate(25deg) scale(1) skew(1deg);
    }
  
    50% {
      -webkit-transform: rotate(0) scale(1) skew(1deg);
      transform: rotate(0) scale(1) skew(1deg);
    }
  
    100% {
      -webkit-transform: rotate(0) scale(1) skew(1deg);
      transform: rotate(0) scale(1) skew(1deg);
    }
  
  }
@property --angle {
	syntax: '<angle>';
	inherits: true;
	initial-value: 0deg;
}

@-webkit-keyframes rotate-gradient {
	from { --angle: 0deg; }
	to { --angle: 360deg; }
}

@keyframes rotate-gradient {
	from { --angle: 0deg; }
	to { --angle: 360deg; }
}
.social_list li a{
    font-size: 20px;
    background-color: white;
    padding: 9px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer__wrap span {
    font-size: 25px;
    font-weight: 600;
    padding-bottom: 30px;
    display: block;
    padding-top: 25px;
}
.services__list li a {
    font-size: 16px;
    color: white;
    line-height: 35px;
    font-weight: 300;
}
.contact__list li a svg {
    font-size: 20px;
    background-color: white;
    padding: 13px;
    clip-path: circle(45%);
}

.contact__list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
}

.contact__list li a h6 {
    font-size: 16px;
    font-weight: 600;
    color: var(--blue);
}
.query__form  .contact__list li a p {
    color: black;
}
.contact__list li a p {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: white;
}
.contact__list li a span {
    padding: 0;
}
.social_list li a:hover  , .contact__list li a svg:hover{
    color: var(--blue);
    transform: scale(1.1);
}
.copy-right p {
    font-size: 20px;
    text-align: center;
    font-weight: 300;
    padding-top: 20px;
}
.scroll__industries {
    position: sticky;
    top: 10px;
}
.inner__banner {
    background: url(../../assets/images/web-banner.webp) center left / cover no-repeat;
    padding-top: 200px;
}
.inner__banner  .live__chat  , .cta__dev .live__chat{
    background-color: white;
    z-index: 999;
}
.bg-light-blue{
    background-color: #F0F9FF;
}
.development__process h5  , .pricing__wrap .content h6{
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.development__process h5 span {
    width: 35px;
    display: block;
    border: 2px solid #2173E4;
}
.development__process h4 , .dev__services .title h5,
.dev__build .title h5 , .pricing__wrap .content h4 , .pricing__wrap .content h4 span{
    font-size: 45px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 50px;
    padding: 10px 0 15px 0;
    color: black;
}
.development__process ul li strong {
    font-size: 18px;
    font-weight: bold;
}

.development__process ul li strong svg {
    color: #1d6ee1;
    padding-right: 5px;
}
.development__process ul li {
    padding-bottom: 10px;
}
.audit__form{
    background: url(../../assets/images/web-form.webp) center left / cover no-repeat;
}
section.audit__form h4 {
    font-size: 55px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    text-align: center;
    line-height: 55px;
    letter-spacing: -2px;
}

section.audit__form p {
    font-size: 20px;
    text-align: center;
    color: white;
    font-weight: 500;
    padding: 5px 0;
}
section.audit__form ul {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

section.audit__form input {
    height: 40px;
    max-width: 240px;
    background: transparent;
    border: 1px solid white;
    color: white;
    padding-left: 10px;
}

section.audit__form input::placeholder {
    font-size: 15px;
    color: #ffffffc4;
}
section.audit__form button {
    height: 40px;
    width: 100%;
    background-color: #2173E4;
    color: white;
}
.dev__services .dev__box h4 {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 19px 0 5px 0;
}
.dev__list {
    display: grid;
    grid-template-columns: auto auto auto;
}

.dev__list .dev__box {
    border-right: 1px solid #00000030;
    padding: 30px;
}
.dev__services .row .dev__box:nth-child(4) , .dev__services .row .dev__box:nth-child(5) , .dev__services .row .dev__box:nth-child(6){
    border-bottom: none;
}
.dev__list li:hover{
    color: white;
    background-color:#166ee5;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.cta__dev .container{
    background: url(../../assets/images/web-cta.webp) center center / cover no-repeat;
    border-radius: 15px;
}
.cta__dev h4 {
    font-size: 55px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    line-height: 55px;
    letter-spacing: -2px;
}
.dev__build .row {
    margin-top: -30px;
}
.pricing__box h5 {
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
}

.pricing__box {
    text-align: center;
    max-width: 370px;
    background-color: white;
}
.pricing__box .p-head {
    padding: 20px;
}
.pricing__box .price {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: #303030;
    color: white;
    align-items: center;
}

.pricing__box .price h4 {
    font-size: 35px;
    font-weight: 600;
}

.pricing__box .price h6 {
    font-size: 30px;
    font-weight: 400;
    position: relative;
}

.pricing__box .price h6::before {
    position: absolute;
    content: '';
    border: 1px solid #ffffffeb;
    width: 100%;
    top: 41%;
}
.pricing__box ul.pricing-list {
    text-align: left;
    height: 180px;
    overflow: auto;
    margin: 20px;
}
.pricing__box ul.pricing-list li {
    font-size: 16px;
    line-height: 36px;
    border-bottom: 1px solid #80808096;
    margin-right: 20px;
    display: flex;
    padding: 9px 0;
}

.pricing__box ul.pricing-list li object {
    margin-right: 8px;
    filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(34%) hue-rotate(326deg) brightness(105%) contrast(102%);
    transform: scale(.8);
}
.pricing-list::-webkit-scrollbar {
    width: 5px;
  }
   
  .pricing-list::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  }
   
  .pricing-list::-webkit-scrollbar-thumb {
    background-color: #2173E4;
    outline: 1px solid #2173E4;
  }
  .pricing__box .btns {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 30px;
    border-bottom: 5px solid #f0f9ff;
    padding-bottom: 20px;
}
.p-footer .btns a:nth-child(1) {
    background-color: #303030;
}
.p-footer .btns a {
    font-size: 15px;
    font-weight: 500;
    color: white;
    padding: 8px 25px;
    border-radius: 50px;
    border: 2px solid transparent;
}

.partners__wrap .row {
    display: flex;
    align-items: center;
}
.p-footer .btns a:nth-child(2) {
    border-color: black;
    color: black;
}
.pricing__box .call {
    font-size: 25px; 
    font-weight: bold;
    color: #303030;
    letter-spacing: -1px;
}
.p-footer {
    padding-bottom: 20px;
}
.pricing__box:hover .price ,
.pricing__box:hover .p-footer .btns a:nth-child(1){
    background-color: #2673e0;
}
.pricing__box:hover object{
    filter: brightness(0) saturate(100%) invert(55%) sepia(75%) saturate(5963%) hue-rotate(202deg) brightness(91%) contrast(95%);
}
.pricing__box:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.pricing__box:hover .call {
    color: #2673e0;
}
.pricing__box:hover .p-footer .btns a:nth-child(2) {
    border-color: #2673e0;
    color: #2673e0;
}

/*Our Portfolio Section Begin*/

.our_portfolio_Sec {
    background: var(--light_white);
}

.inner_portfolio .our_portfolio_Sec {
    background: var(--white);
}

.tab_content_sec ul {
    border: 0;
    text-align: center;
    justify-content: center;
}

.tab_content_sec ul li {
    margin: 0;
}

.tab_content_sec ul li a {
    background: var(--white);
    color: var(--pink);
    border-radius: 45px !important;
    padding: 8px 17px;
    margin: 0 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--pink) !important;
}

.tab_content_sec ul li a:hover,.tab_content_sec ul li a.active {
    background: -moz-linear-gradient(left, rgb(144,41,139) 0%, rgb(163,41,116) 50%, rgb(184,40,90) 100%);
    background: -webkit-linear-gradient(left, rgb(144,41,139) 0%,rgb(163,41,116) 50%,rgb(184,40,90) 100%);
   /* background: linear-gradient(to right, rgb(144,41,139) 0%,rgb(163,41,116) 50%,rgb(184,40,90) 100%);*/
   background: #0a0aa1 !important;
    color: var(--white) !important;
    border-color: transparent !important;
}

.portfolio_box_img {
    display: inline-block;
    height: 500px;
    width: 100%;
    overflow: hidden;
    margin-bottom: -6px;
}


.portfolio_box_img figure img {
    width: 100%;
}

.our_portfolio_Sec .container-fluid {
    padding: 0;
}

.portfolio_box_img:hover a:after {
    opacity: 1;
    position: absolute;
    content: "\f067";
    font-family: FontAwesome;
    left: 50%;
    top: 48%;
    width: 48px;
    margin-left: -24px;
    margin-top: -24px;
    color: #fff;
    font-size: 48px;
    line-height: 48px;
    text-align: center;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    text-shadow: 0 0 10px rgb(0 0 0 / 25%);
    z-index: 999;
}

.portfolio_box_img:hover a:before{
  content: '';
  background: rgb(0 0 0 / 25%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 99;
}

.portfolio_box_img a:hover img {
    top: -100%;
}

.portfolio_box_img a figure img {
    width: 100%;
    position: relative;
    top: 0;
    transition: 2s all;
}

.portfolio_box_img a {
    width: 100%;
    height: 100%;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    position: relative;
    display: inline-block;
}

.portfolio_box_img a figure {
    margin-bottom: 0;
    height: 500px;
}



/* new styling  */
.case__studies h3{
    font-size: 150px;
    font-weight: bold;
    color: black;
    line-height: 138px;
    text-align: center;
    position: relative;
    letter-spacing: -5px;
}
.case__studies .nav-tabs .nav-link:hover {
    background-color: #1d6ee1;
    color: white;
}
.case__studies .nav-tabs .nav-link {
    font-size: 16px;
    font-weight: 600;
    color: black;
    border: 1px solid black;
    border-radius: 50px;
    padding: 10px 20px;
}
.case__studies  .nav-tabs .nav-link.active {
    background-color: #2173E4;
    border-color: #2173E4 ;
    color: white;
}
.casestudy__content {
    margin-top: 35px;
}

.casestudy__content h5 {
    font-size: 20px;
    font-weight: 600;
    color: black;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 0;
    line-height: 20px;
}
.casestudy__img {
    position: relative;
}

.casestudy__img::before {
    position: absolute;
    content: 'View';
    font-size: 20px;
    font-weight: 600;
    background-color: white;
    padding: 30px;
    clip-path: circle(13%);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.casestudy__img:hover::before {
    opacity: 1;
    z-index: 999;
}
.casestudy__img:hover::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background-color: #00000063;
    z-index: 99;
    right: 0;
    border-radius: 10px;
}

.sticky__social {
    position: fixed;
    right: 0;
    top: 40%;
    z-index: 999;
}
section.audit__form ul li {
    width: 100%;
}
.sticky__social li a {
    font-size: 22px;
    background-color: #166ee5;
    color: white;
    padding: 15px 20px;
    display: block;
    margin: 10px 0;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.sticky__social li a:hover {
    background-color: #1d6ee1;
}
.inline__form strong , .inline__form strong a {
    font-size: 13px;
    line-height: 14px;
    color: white;
    font-weight: 300;
}

.inline__form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inline__form input {
    width: 23px;
}
.cube__animation {
    animation: shake 15s ease infinite;
  }
  @keyframes shake {
      0%, 100% {transform: translateX(0);}
      10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
      20%, 40%, 60%, 80% {transform: translateX(10px);}
  }

.large-padding .content-head {
    padding: 15px 0 5px 0;
}
.case-studies-bg {
    background: url(../../assets/images/case-studies/case-study-banner.png) center left / cover no-repeat;
        z-index: 9;
}
.case-studies-content .accordion-button::after {
    background-image: url(../../assets/images/case-studies/plus.svg);
    width: 2.25rem;
    height: 2.25rem;
    background-size: 100%;
}

.case-studies-content .accordion-button:not(.collapsed)::after {
    background-image: url(../../assets/images/case-studies/minus.svg);
    width: 2.25rem;
    height: 2.25rem;
    background-size: 100%;
    transform: rotate(-180deg);
}
.case-studies-wrap .title span {
    font-size: 16px;
    font-weight: 600;
    color: #929292;
    text-align: center;
    display: block;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.case-studies-wrap .title h5 ,.case-studies-wrap .title h5 span {
    font-size: 45px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    line-height: 50px;
}
.case-studies-wrap .title h5 span {
    color: #166EE5;
    display: inline;
}
.case-studies-wrap .accordion-button {
    padding: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: transparent;
}
.case-studies-wrap .accordion-button:focus {
    box-shadow: none;
}
.case-studies-wrap .container-fluid {
    padding: 0;
}
.case-studies-wrap .case-box img {
    max-width: 100%;
}

.case-studies-wrap .case-box h4 {
    font-size: 30px;
    font-weight: 600;
    padding: 15px 0 5px 0;
}
.case-studies-wrap .case-box .bts {
    font-size: 14px;
    font-weight: 500;
    background-color: #2173E4;
    color: white;
    padding: 8px 20px;
    display: block;
    width: max-content;
    border-radius: 60px;
    margin-top: 10px;
    border: 2px solid transparent;
}
.case-studies-wrap .case-box .bts:hover {
    border-color: #2173E4;
    background-color: transparent;
    color: black;
}
.case-studies-wrap .case-box {
    margin-bottom: 25px;
}
.case-studies-wrap .accordion-item {
    border: 1px solid #808080b8 !important;
    margin: 10px 0;
}
.case-studies-bg .live__chat {
    border-color: white;
    color: white;
}
.gymfit-banner {
    background: url(../../assets/images/case/gymfit-banner.webp) center right / cover no-repeat;
}
.case__banner h4 {
    font-size: 70px;
    line-height: 75px;
    font-weight: 600;
    color: white;
    padding: 10px 0;
    letter-spacing: 0px;
}
.case__banner {
    padding-top: 220px;
    padding-bottom: 150px;
    position: relative;
}
.case__banner .live__chat {
    border-color: white;
    color: white;
}
.case-about h4 , .case-challenges h4 , .case-solutions h4  , .case-result h4{
    font-size: 45px;
    font-weight: 600;
    letter-spacing: -1px;
    
    position: relative;
}
.case-challenges {
    background: url(../../assets/images/case/work-bg.webp) center left / cover no-repeat;
}
.challenges-box h6 {
    font-size: 22px;
    color: white;
    font-weight: 600;
    padding: 10px 0;
}
.challenges-box {
    color: white;
    border: 4px solid white;
    border-radius: 15px;
    padding: 20px;
    position: relative;
}
.challenges-box img {
    margin-top: -80px;
}
section.case-challenges .row {
    margin-top: 90px;
}
.challenges-box img {
    margin-top: -80px;
    margin-left: 10px;
    padding-bottom: 5px;
}
.case-challenges h4::before{
    content: 'Challenges:';
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 120px;
    text-transform: uppercase;
    font-weight: 800;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffffff26;
    color: transparent;
    top: -48px;
    left: -10%;
    font-family: poppins;
}
.solutions-box {
    max-width: 370px;
    border: 2px solid #F2F2F2;
    padding: 30px;
    text-align: left;
    min-height: 100%;
}
.solutions-box:hover {
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.solutions-box h6 {font-size: 22px;font-weight: 600;/* font-family: Manrope; */padding: 1;line-height: 25px;padding: 15px 0; color: #282828;}
.challenges-box p {
    font-size: 14px;
    font-weight: 400;
}
.cta-bg {
    background: url(../../assets/images/case/cta-bg.webp) center left / cover no-repeat;
    text-align: center;
    padding: 60px 0;
    border-radius: 10px;
}
.cta-bg h4 {
    font-size: 30px;
    color: white;
    font-weight: 600;
}
.cta-bg h5 {
    font-size: 45px;
    font-weight: 600;
    color: white;
    padding: 5px 0;
}

.cta-bg a {
    font-size: 16px;
    color: white;
    background-color: #2673e0;
    font-weight: 600;
    padding: 13px 25px;
    display: block;
    width: max-content;
    margin: auto;
    border-radius: 40px;
    margin-top: 20px;
}
.cta-bg a img {
filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(7483%) hue-rotate(334deg) brightness(127%) contrast(123%);
}
.result-box {
    border: 2px solid #F2F2F2;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    background-color: white;
}
.result-box h6 {
    font-size: 22px;
    font-weight: 600;
    color: #43A901;
}

.result-box span {
    font-size: 22px;
    font-weight: 600;
    line-height: 25px;
    margin-bottom: 10px;
    display: block;
}
.result-box:hover {
    background-color: #2a73dc;
    color: white;
}
.case-result {
    background: linear-gradient(180deg, rgb(255 255 255) 20%, rgba(246, 246, 246, 1) 20%);
}
.challenges-box:hover {
    background-color: white;
    color: black;
}

.challenges-box:hover h6 {
    color: black;
}
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: linear-gradient(268deg, rgb(87 199 133 / 0%) 17%, rgba(0, 0, 0, 1) 93%);
    z-index: -1;
}
.pepper-bg {
    background: url(../../assets/images/case/pepper-bg.webp) center left / cover no-repeat;
}
.playmaker-bg  {
    background: url(../../assets/images/case/playmaker-bg.webp) center left / cover no-repeat;
}
.capable-bg {
    background: url(../../assets/images/case/capable-bg.webp) center left / cover no-repeat;
}
.shopus {
    background: url(../../assets/images/case/shopus-bg.webp) center left / cover no-repeat;
}
.aurora-bg {
    background: url(../../assets/images/case/aurora-bg.webp) center left / cover no-repeat;   
}
.nimbus-bg {
    background: url(../../assets/images/case/nimbus-bg.webp) center left / cover no-repeat;      
}
.amazon-bg{
    background: url(../../assets/images/case/amazon-bg.webp) center left / cover no-repeat;      
}
.blue-market-bg {
    background: url(../../assets/images/case/blue-market-bg.webp) center left / cover no-repeat;      
}
.outstand-bg {
    background: url(../../assets/images/case/outstand-bg.png) center center / cover no-repeat;    
}
.fox-hub-bg {
    background: url(../../assets/images/case/fox-hub-bg.webp) center center / cover no-repeat;    
}
.ekommart-bg {
    background: url(../../assets/images/case/emart-bg.webp) center center / cover no-repeat;  
}
.toque-bg {
    background: url(../../assets/images/case/torque-bg.webp) center left / cover no-repeat;  
}
.village-dukaan-bg {
    background: url(../../assets/images/case/dukaan-bg.webp) center center / cover no-repeat;    
}
.stylex-bg {
    background: url(../../assets/images/case/stylex-bg.webp) center center / cover no-repeat; 
}
.it-global-bg {
    background: url(../../assets/images/case/global-bg.webp) center center / cover no-repeat; 
}
.online-store-bg {
    background: url(../../assets/images/case/online-bg.png) center center / cover no-repeat; 
}
.quantum-bg {
    background: url(../../assets/images/case/quantum.webp) center center / cover no-repeat; 
}
.pulse-bg {
    background: url(../../assets/images/case/pulse-bg.webp) center center / cover no-repeat; 
}
.pulse-bg p , .pulse-bg h4{

    color: #000000 !important;
}
.ecucation-bg {
    background: url(../../assets/images/case/education-bg.webp) center center / cover no-repeat; 
}
.ecilipse-bg {
    background: url(../../assets/images/case/education-bg.webp) center center / cover no-repeat; 
}
.king-bg {
    background: url(../../assets/images/case/king.webp) center center / cover no-repeat; 
}
.apexx-bg {
    background: url(../../assets/images/case/apex-bg.webp) center center / cover no-repeat; 
}
.stationero-bg {
    background: url(../../assets/images/case/stationero-bg.webp) center center / cover no-repeat; 
}
.avada-bg {
    background: url(../../assets/images/case/avada-bg.webp) center center / cover no-repeat; 
}
.marketing-bg {
    background: url(../../assets/images/case/marketing-bg.webp) center center / cover no-repeat; 
}
.aurelia-bg {
    background: url(../../assets/images/case/juliana-bg.webp) center center / cover no-repeat; 
}
.asdardia-bg{
    background: url(../../assets/images/case/juliana-bg.webp) center center / cover no-repeat; 
}

.slick-dots li {
    width: 35px;
    height: 5px;
    background-color: #30303063;
  }
  .slick-dots li:active {
    background-color: #2673e0;
  }
.slick-dots li.slick-active button:before {
    background-color: #2673e0;
    width: 35px;
    height: 5px;
  }
  .slick-dots li button:before,
  .slick-dots li.slick-active button:before {
    color: transparent;
  }
 .slick-dots {
    bottom: -50px;
}
.cta__wrap .live__chat {
    border-color: white;
    color: white;
}
.services__list li a:hover {
    color: #1d6ee1;
}

.tabs__box::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000000a3;
    right: 0;
    left: 0;
    border-radius: 15px;
}

.wordpress-bg {
    background: url(../../assets/images/development/wordpress-bg.webp) center center / cover no-repeat; 
}
.php-bg {
    background: url(../../assets/images/development/php-bg.webp) center center / cover no-repeat; 
}
.frontend-bg {
    background: url(../../assets/images/development/front-bg.webp) center center / cover no-repeat; 
}
.backend-bg {
    background: url(../../assets/images/development/back-bg.webp) center center / cover no-repeat;    
}
.open-source-bg {
    background: url(../../assets/images/development/open-source-bg.webp) center center / cover no-repeat;    
}
.cms-bg {
    background: url(../../assets/images/development/cms-bg.webp) center center / cover no-repeat;   
}
.minimal-bg {
    background: url(../../assets/images/development/portal-bg.webp) center center / cover no-repeat;   
}
.ecomm-bg {
    background: url(../../assets/images/ecomm/ecomm-bg.webp) center center / cover no-repeat;   
}
.bg-grey {
    background-color: #F5F5F5;
}
.ecom__services {
    border: 1px solid #C2C2C2;
    border-radius: 8px;
    text-align: center;
    padding: 50px 20px 20px 20px;
    position: relative;
    min-height: 100%;
}
.ecom__services span {
    font-size: 40px;
    font-weight: 900;
    font-family: 'Poppins';
    line-height: 40px;
    background-color: white;
    padding: 0;
    border: 1px solid #C2C2C2;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    border-radius: 100px;
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    margin-top: -112px;
    margin-bottom: 18px;
}
.ecom__services img {
    position: absolute;
    left: 0;
    right: 0;
    width: max-content;
    margin: auto;
    top: -35px;
}

.ecom__services h4 {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: poppins;
}

.ecom__services p {
    font-size: 16px;
    line-height: 22px;
    padding: 10px 0;
}
.ecom__services:hover {
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.shopify-bg{
    background: url(../../assets/images/ecomm/shopify-bg.webp) center center / cover no-repeat;     
}
.bigcomm-bg {
    background: url(../../assets/images/ecomm/bigcommerce-bg.webp) center center / cover no-repeat;        
}
.magento-bg {
    background: url(../../assets/images/ecomm/magento-bg.webp) center center / cover no-repeat;        
}
.opencart-bg {
    background: url(../../assets/images/ecomm/opencart-bg.webp) center center / cover no-repeat;       
}
.woo-bg {
    background: url(../../assets/images/ecomm/woo-bg.webp) center center / cover no-repeat;    
}
.app-bg {
    background: url(../../assets/images/app/app-design-bg.webp) center center / cover no-repeat;   
}
.inner__banner .inner__content h4, .inner__banner .inner__content h4 span{
    font-size: 60px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 75px;
}
.our__mobile__list span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 25px;
    font-weight: 500;
    padding-bottom: 10px;
}

.our__mobile__list li {
    border-bottom: 1px solid grey;
}
ul.our__mobile__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.our__mobile__list li {
    padding-bottom: 20px;
}
.mobile-bg {
    background: url(../../assets/images/app/mobile-app-bg.webp) center center / cover no-repeat;   
}

.strategic-bg  {
    background: url(../../assets/images/app/stra-bg.webp) center center / cover no-repeat;  
}
.mvp-bg {
    background: url(../../assets/images/app/mvp-bg.webp) center center / cover no-repeat;  
}
.brand-bg {
    background: url(../../assets/images/brand/brand-bg.webp) center center / cover no-repeat; 
}
ul.brand__list {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
    align-items: center;
}

ul.brand__list li {
    position: relative;
    border: 1px solid #00000094;
    padding: 45px 20px 20px 20px;
    border-radius: 15px;
}

ul.brand__list span {
    font-size: 30px;
    font-weight: 600;
    border: 1px solid #00000094;
    width: 70px;
    height: 70px;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background-color: white;
    position: absolute;
    top: -36px;
    left: 0;
}

ul.brand__list li h4 {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 600;
    padding-bottom: 5px;
}
ul.brand__list li:hover {
    background-color: #1951a9;
    color: white;
}

ul.brand__list li:hover span {
    color: #1951a9;
}
.logo-design-bg {
    background: url(../../assets/images/brand/logo-bg.webp) center center / cover no-repeat; 
}
.identity-bg {
    background: url(../../assets/images/brand/identity-bg.webp) center center / cover no-repeat; 
}
.ui-bg {
    background: url(../../assets/images/brand/ui-bg.webp) center center / cover no-repeat; 
}
.interactive-bg {
    background: url(../../assets/images/brand/prototypr-bg.webp) center center / cover no-repeat; 
}

.get__started:hover {
    color: white;
}
.pricing__box ul.pricing-list li p {
    line-height: 15px;
    font-size: 14px;
}
.logo__port img {
    width: 100%;
    padding: 0 10px;
}
.brand__list p {
    height: 68px;
    overflow-y: auto;
    font-size: 14px;
    padding-right: 20px;
    line-height: 17px;
}

.video__box video {
    max-width: max-content;
    height: 400px;
    display: flex;
    justify-content: center;
    margin: auto;
    padding: 10px;
    object-fit: cover;
}

.video__box {
    background-color: #dddddd3b;
    border: 1px solid #0000001c;
    border-radius: 10px;
    margin: 10px;
}
.brtxt::first-letter {
    text-transform: lowercase;
}