body {font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px;  font-style: normal;  font-weight: normal; color: #727272;} 
h1, h2, h3, h4, h5, h6 {font-weight: 800; color: #727272;}
h1 {font-size: 60px;}
h2 {font-size: 50px;}
h3 {font-size: 40px;}
h4 {font-size: 30px;}
h5 {font-size: 20px;}
h6 {font-size: 14px;}
.container-fluid {padding: 5%;}
.navbar {background-color: rgba(0,0,0,0.5);}
.navbar-brand img {max-width: 80%;}
.nav-item .nav-link {text-transform: uppercase; color: #fff; text-align: center; padding: 15px 30px!important; line-height: normal; font-size: 14px; letter-spacing: 5px; transition: 0.3s ease-in-out;} 
.nav-item .nav-link:hover {color: #f5821f; background: transparent!important; box-shadow: none!important;}
.nav-item .btn {background: #f5821f; border-radius: 27px; transition: 0.3s ease-in-out;} 
.nav-item .btn:hover {background-color: #df6802; color: #fff;}
.hero {width: 100%; height: 100vh; background-color: #000; overflow: hidden; display: block;}
.hero-overlay {width: 100%; height: 100%; position: absolute;  top: 0;  left: 0; background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);}
.carousel-caption {position: absolute; width:34.5%; left: 5%; top: 15%; text-align: left;}
.carousel-caption H1 {font-size: 900%; font-weight: 800; line-height: 105%; margin-bottom: 20px; color: #fff;}
.carousel-caption H1 span, .carousel-caption p span {color: #f5821f; transition: 0.3s ease-in-out;}
.carousel-caption p span:hover {color: #fff; text-decoration: underline;}
.btn, .form button {background: #f5821f; border-radius: 30px; text-transform: uppercase; color: #fff; text-align: center; padding: 15px 30px; line-height: normal; font-size: 14px; letter-spacing: 5px; transition: 0.3s ease-in-out;} 
.btn:hover, .form button:hover {background-color: #df6802; color: #fff; transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);} 

.dropdown-menu {margin-top: 27px!important;  padding: 0; border: none; border-radius: 0;}
.dropdown-item {padding: 20px 40px; transition: 0.3s ease-in-out;}
.dropdown-item:hover {background-color: #000; color: #fff;}
.custom-navbar {
  transition: background-color 0.4s ease, box-shadow 0.4s ease; /* Smooth transition */
}

/* Styles applied automatically on scroll */
.nav-item.dropdown:hover .nav-link, .custom-navbar.navbar-scrolled {
  background-color: #212529 !important; /* Solid dark color (Matches Bootstrap bg-dark) */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Adds elevation depth on scroll */
}
.nav-item.dropdown:focus-within .nav-link {color: #f5821f; background-color: transparent!important; box-shadow: none!important;}
/* This only changes this particular animation duration 
@keyframes animate__fadeInLeft {
  from {
    opacity: 0;
    transform: translate(0, 20%); 
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.carousel-caption {
  animation-name: animate__fadeInLeft;
}
*/
/* Define a custom CSS property '--num' that can be animated as an integer */
@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

/* Base style for number animation elements */
/* Initializes --num to 0 and resets the CSS counter 'num' to that value */
.number-animation {
  --num: 0;
  counter-reset: num var(--num);
}

/* Use the ::after pseudo-element to display the current value of the counter */
.number-animation::after {
  content: counter(num);
}

/* Keyframe animations to animate --num from 0 up to the target number */
/* Example animation from 0 to 50 */
@keyframes counter--8 {
  from {
    --num: 0;
  }
  to {
    --num: 8;
  }
}
@keyframes counter--4 {
  from {
    --num: 0;
  }
  to {
    --num: 4;
  }
}
@keyframes counter--100 {
  from {
    --num: 0;
  }
  to {
    --num: 100;
  }
}
@keyframes counter--360 {
  from {
    --num: 0;
  }
  to {
    --num: 360;
  }
}

/* You can add more animations for different target numbers as needed */

/* Animation classes that apply the corresponding keyframe animations */
.animate--8 {
  animation: counter--8 2s ease forwards;
}
.animate--4 {
  animation: counter--4 2s ease forwards;
}
.animate--100 {
  animation: counter--100 2s ease forwards;
}
.animate--360 {
  animation: counter--360 2s ease forwards;
}
.carousel-stat {position: absolute; width: 45%; right: 5%; bottom: 20%; color: #fff; border-top: solid 1px #f5821f; padding-top: 40px;}
.carousel-stat h4, .carousel-stat span {font-size: 300%; color: #f5821f; font-weight: 800; display: inline;}
.carousel-stat h4, .carousel-stat p {text-align: center; text-transform: uppercase;}
.fcorange {color: #f5821f;}
.fcgray {color: #727272;}
.bglight {background-color: #f8f7f4;}
.title {color: #f5821f; text-transform: uppercase; letter-spacing: 5px;}
.w-10 {width: 10%;} .w-20 {width: 20%;} .w-30 {width: 30%;} .w-40 {width: 40%;} .w-60 {width: 60%;} .w-70 {width: 70%;} .w-80 {width: 80%;} .w-90 {width: 90%;}


.trusted {background-color: #f8f7f4; padding: 0 5%;}
.trusted .col-md-4 {border-right: solid 1px #f5821f;}
.trusted .col-md-8 {padding: 0 0 0 5%;}
.pills {margin: 0; padding: 0; list-style: none;}
.pills li {background-color: #fff; padding: 10px 30px; margin: 10px; border: solid 1px #ddd; border-radius: 60px; font-size: 16px; text-transform: uppercase; display: inline-block; transition: 0.3s ease-in-out;}
.pills li img {margin-right: 15px;}
.pills li:hover, .pills1 li:hover {transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);}
.pills1 {margin: 10px 0; padding: 0;}
.pills1 li {background-color: #ebebeb; padding: 10px 30px; margin: 10px 0; border: solid 1px #ddd; border-radius: 60px; font-size: 16px; text-transform: uppercase; display: block; transition: 0.3s ease-in-out;}
.card-container {display: flex;  flex-direction: column;}
.services .card {padding: 5%;}
.card {padding: 40px; border: solid 1px #ddd; border-radius: 50px; display: flex; transition: 0.3s ease-in-out; margin-bottom: 40px; flex-grow: 1;}
.services .pills li {background-color: #ebebeb;}
.card:hover h3, .card:hover h4 {color: #f5821f!important;}
.card .icon1 {border-radius: 50%; padding: 20px; position: relative; left: -20px; display: inline-block; transition: 0.3s ease-in-out;}
.card .icon1 img {filter: invert(); opacity: 0.2; transition: 0.3s ease-in-out;}
.card:hover .icon1 {background-color: #f5821f; left: 0;}
.card:hover .icon1 img {filter: none; opacity: 1;}
.card .icon2 {border-radius: 50%; padding: 20px; display: inline-block; width: 67px; height: 67px; text-align: center; vertical-align: middle; transition: 0.3s ease-in-out;}
.card .icon2 i {font-size: 30px; line-height: 0; color: #fff; position: relative; top: 10px; left: -10px; opacity: 0; transition: 0.3s ease-in-out;}
.card:hover .icon2 i {transform: rotate(45deg); color: #727272; top: 0; left: 0; opacity: 1;}/*-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .1));   filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .1));*/
.card:hover {background-color: #fbfbfb;}
.why, .lets {background-color: #0b0b0c; color: #fff;}
.why h1, .lets h1 {color: #fff;}
.why h1 span, .lets h1 span, .reach h1 span {color: #f5821f;}
.whycontent .col-lg-6, .whycontent .col-md-4 {margin: 40px 0; transition: 0.3s ease-in-out;}
.whycontent .col-lg-6 img, .whycontent .col-md-4 img {transition: 0.3s ease-in-out;}
.whycontent .col-lg-6:hover img, .whycontent .col-md-4:hover img {filter: grayscale(1) brightness(400%); transform: translateY(-10px);}
.process img {width: 100px; transition: 0.3s ease-in-out; float: right;}
.process .col:hover img, .process .col-md-4:hover img {filter: brightness(0%); transform: scale(1.1);}
.industries, .reach {background-color: #f8f7f4;}
.card .icon1 {transform: scale(0.8);}
.biz-size .card {border-left: solid 1px #ddd!important; border: none; border-radius: 0;}
.biz-size .card:hover {border-left: solid 1px #f5821f!important; background-color: transparent;}
.reach ul {margin: 0; padding: 0; list-style: none;}
.reach ul li {
  list-style: none; /* Remove default bullet */
  position: relative;
  padding-left: 36px; /* Create space for the custom icon */
	font-size: 20px;
	margin-bottom: 16px;
}

.reach ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  transform: translateY(-50%); /* Perfectly center vertically */
  width: 20px;
  height: 20px;
  background-image: url('../images/location.svg');
  background-repeat: no-repeat;
  background-size: contain;
}
.reach .card h4 {margin-bottom: 0;}
.logos::before, .logos::after {
            content: '';
            width: 300px;
            height: 100%;
            position: absolute;
            top: 0;
            z-index: 2;
        }

        .logos::before {
            left: 0;
            background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
        }

        .logos::after {
            right: 0;
            background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
        }

        .logos-slide {
            animation: 20s slide infinite linear;
        }

        .logos:hover .logos-slide {
            animation-play-state: paused;
        }

        .logos-slide img {
            height: 30px;
            margin: 0 50px;
        }

        @keyframes slide {
            from{
                transform: translateX(0);
            }

            to {
                transform: translateX(-100%);
            }
        }


.accordion-item {border-radius: 60px!important; padding: 20px!important; margin-bottom: 20px!important; border: solid 1px #ddd!important;}
.accordion-button {font-size: 24px; font-weight: 800; color: #727272!important; transition: 0.3s ease-in-out;}
.accordion-button:not(.collapsed) {background-color: transparent; color: #f5821f!important; box-shadow: none!important; border-bottom: solid 1px #ddd; padding: 20px 20px 40px 20px!important;}
.accordion-body {padding: 40px 20px;}
button:focus:not(:focus-visible) {
box-shadow: none;
}


footer {background-color: #0b0b0c;}
footer .container-fluid {padding: 2% 5%;}
footer img {width: 150px; opacity: 0.5;}
footer a {color: #727272; margin: 0 30px; text-decoration: none;}
footer a:hover {color: #fff;}
footer div {vertical-align: middle;}


.scrollToTopBtn {
  background-color: black;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 18px;
  line-height: 48px;
  width: 48px;
	padding: 0!important;
border-radius: 8px;
  /* place it at the bottom right corner */
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* keep it at the top of everything else */
  z-index: 100;
  /* hide with opacity */
  opacity: 0;
  /* also add a translate effect */
  transform: translateY(100px);
  /* and a transition */
  transition: all 0.5s ease;
}

.showBtn {
  opacity: 1;
  transform: translateY(0);
}

.innerhero {width: 100%; height: 730px; background-color: #000; overflow: hidden; display: block;}
.inner-services {background: url(../images/services-bg.jpg) no-repeat center center; background-size: cover;}
.inner-seo {background: url(../images/banner-seo.jpg) no-repeat center center; background-size: cover;}
.inner-web {background: url(../images/banner-seo.jpg) no-repeat center center; background-size: cover;}
.inner-ppc {background: url(../images/banner-seo.jpg) no-repeat center center; background-size: cover;}
.inner-smm {background: url(../images/banner-seo.jpg) no-repeat center center; background-size: cover;}
.inner-ui {background: url(../images/banner-seo.jpg) no-repeat center center; background-size: cover;}
.inner-graphic {background: url(../images/banner-seo.jpg) no-repeat center center; background-size: cover;}
.inner-dedicated {background: url(../images/banner-seo.jpg) no-repeat center center; background-size: cover;}
/*.innerhero:before {content: ''; width: 100%; height: 730px; background-color: rgba(0,0,0,0.5); position: absolute; z-index: 0; top: 0; left: 0; display: inline-block;}*/
.innerhero div div {position: absolute; left: 5%; top: 23%; text-align: left;}
.innerhero H1 {font-size: 900%; font-weight: 800; line-height: 105%; margin-bottom: 20px; color: #fff;}
.innerhero H1 span {color: #f5821f; transition: 0.3s ease-in-out;}
.services .accordion-header .title {font-size: 16px!important; font-weight: 400!important; margin-bottom: 5px;}
.services .accordion-button, .services .accordion-button:not(.collapsed) {padding-left:0!important; padding-top: 0!important; padding-bottom: 20px!important;}
.services .accordion-header .icon1 {border-radius: 50%; padding: 20px; position: relative; left: 15px; display: inline-block; transition: 0.3s ease-in-out;}
.services .accordion-header .icon1 img {filter: invert(); opacity: 0.2; transition: 0.3s ease-in-out;}
.services .accordion-header:hover .icon1 {background-color: #f5821f;}
.services .accordion-header:hover .icon1 img {filter: none; opacity: 1;}
.services .accordion-button {padding-bottom: 0!important;}
.services .card {padding: 7%; background-color: #f1f1f1;  border: solid 1px #ddd; border-radius: 50px; display: flex; transition: 0.3s ease-in-out; margin-bottom: 20px; flex-grow: 1;}
/*.services .card p {margin-bottom: 0;}*/
.services .accordion-button:not(.collapsed) .icon1 {background-color: #f5821f;}
.services .accordion-button:not(.collapsed) .icon1 img {filter: brightness(800%); opacity: 1;}
.inner-stat {color: #fff; padding-top: 40px; text-align: center;}
.inner-stat h4 {font-size: 300%; color: #f5821f; font-weight: 800;}
.inner-stat h4, .carousel-stat p {text-align: center; text-transform: uppercase;}

.form label {font-size: 12px; font-weight: 800; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 8px; display: block;}
::placeholder {color: #ccc;}
input:focus, select:focus, textarea:focus {background-color: #f9f9f9; border: solid 1px #bbb; outline: 0; }
.form button {width:100%; outline: 0; border: none!important; padding: 25px 30px!important; border-radius: 50px;}
.form-group {margin-bottom: 40px;}
input, select, textarea {width: 100%; background-color: #f1f1f1; border:solid 1px #ddd; font-size: 24px; color: #000; padding: 15px 30px; border-radius: 100px; display: block;}
textarea {border-radius: 40px!important;}
select option:first-child {color: #ccc!important;}
select {appearance: none; /* Hides default browser arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;

  /* Embed a custom SVG arrow as a background image */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 25px center; /* Position 15px from the right edge */
  background-size: 24px; /* Controls the size of the SVG arrow */}
.locations h4 {margin-bottom: 0;}
.locations h4 .title {font-size: 14px!important; margin-left: 10px;}
.locations .card {padding: 5%; margin-bottom: 10px;}
.locations .card p {margin-bottom: 0;}
.contactbtm .col-md-4 {border-right: solid 1px #ddd;}
.contactbtm .col-md-4:hover img {opacity: 1;}
.contactbtm img {opacity: 0.2;   transition: all 0.5s ease;}
.no-border {border: none!important;}

.parallax {
	width: 100%;
	position: relative;
	background-color: #0a0a28;
	background: url('../images/seo-img2.jpg') no-repeat #0a0b29;
	background-size: 100%;
	background-position: center 0px;
	background-attachment: fixed;
}
.parallax ul {margin: 0; padding: 0;}
.parallax ul li {color: #fff; margin-bottom: 20px;}















@media (min-width: 1601px) and (max-width: 2560px)  {
	.navbar {padding: 10px 5%;}
	
	
}

@media (max-width: 1920px) {
	.navbar {padding: 10px 5%;}
	
}

@media (max-width: 1600px) {
	.carousel-caption {width:45%; top: 20%;}
	.carousel-caption H1 {font-size: 600%;}
	.carousel-stat {bottom: 10%;}
	.carousel-stat h4 {font-size: 200%;}
	.carousel-stat p {font-size: 14px;}
	.hero {height: auto; overflow: auto;}
	.why p {width: 100%;}
	.why img {padding-right: 10%;}
}


@media (max-width: 1366px) {
.carousel-caption {width:40%;}
	.parallax {background-size: 140%; background-position: -400px 50px;}
	
}

@media (max-width: 1280px) {
	
	
}



@media (max-width: 1024px) {
	body {font-size: 14px;}
.carousel-caption H1 {font-size: 400%;}
	.parallax {background-size: 130%; background-position: -780px 50px;}

}

@media (max-width: 992px) {
	
	.navbar, .hero {background-color: #000;}
	.hero {margin-top: 100px;}
.carousel-caption {width:90%; position: relative;  top: 0; padding: 30px 0;}
	.carousel-stat {width: 100%; position: relative; left:0; right: 0; bottom: 0; margin: 30px 0; }
	.pills li {padding: 10px 20px; margin: 5px;}
	.parallax {background-size: 230%; background-position: 900px 700px!important;}
	.parallax {background-image: none!important;}
	
}


@media (max-width: 768px) {
	
}

@media (max-width: 768px) {		
	.nav-item {padding: 10px 0; border-bottom: solid 1px #444;}
	h1 {font-size: 40px;}
h2 {font-size: 32px;}
h3 {font-size: 28px;}
h4 {font-size: 24px;}	
.w-10, .w-20, .w-30, .w-40, .w-50, .w-60, .w-70, .w-80, .w-90, .w-75 {width: 100% !important;} 
	.whycontent .col-md-12 {margin: 10px 0;}
	.logos::before, .logos::after {width: 60px;}
	footer {padding: 5% 0;}
	footer .text-start {text-align: center!important;}
	footer .text-end {text-align: center!important;}
	footer .text-center {margin: 15px 0!important;}
	.card .mb-4 {margin-bottom: 10px!important;}
	.card .icon1 {transform: scale(0.8);}
	.innerhero h1 {font-size: 600%;}
	.parallax .col-md-6 {width: 100%!important;}
	
	
	
	
	
}

@media (max-width: 576px) {    
	.container-fluid {padding:10% 5%;}
	.navbar-brand, .navbar-brand img {width: 60%;}
	.hero {margin-top: 80px;}
	.innerhero, .innerhero:before {height: 400px;}
	.carousel-caption H1 {font-size: 300%;}
	.trusted .col-md-4 {border-bottom: solid 1px #f5821f; border-right: none; padding-bottom: 20px;}
.trusted .col-md-8 {padding: 20px 0;}
	.card {margin-bottom: 20px; padding: 25px;}
	.why img {padding-right: 0;}
	.process .col-md-4 {flex: none!important; margin-bottom: 30px; border-bottom: solid 1px #ddd;}
	.process img {width: 80px;}
	.accordion-item {padding: 10px!important; margin-bottom: 10px!important;}
.accordion-button, .reach ul li {font-size: 16px;}
	.services .accordion-header .icon1 {transform: scale(0.7);}
	.services .accordion-button, .services .accordion-button:not(.collapsed) {padding-top: 10px!important; background-color: transparent!important;}
	.services .accordion-header .title {font-size: 12px!important;}
	.form-group {margin-bottom: 20px;}
	input, select, textarea {font-size: 16px; padding: 12px 20px;}
	.contactbtm .col-md-4 {border-right: none; margin-bottom: 30px;}
	.innerhero h1 {font-size: 350%;}
	.innerhero div div {top: 15%;}
	footer a {margin: 0 15px;}
	.whycontent .col-md-4 {margin: 20px 0;}
	
	
	
}

@media (max-width: 480px) {
  
   
}

@media (max-width: 414px) {
   
    
}

@media (max-width: 375px) {
	
	
}

@media (max-width: 360px) {
	.hero {margin-top: 70px;}
    
}

@media (max-width: 320px) {
	
}