@charset "UTF-8";

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/DMSans-Regular.woff) format('woff'); /* Change to match your local font location */
}
@font-face {
    font-family: 'DM Sans';
    font-style: medium;
    font-weight: 500;
    src: url(/fonts/DMSans-Bold.woff) format('woff'); /* Change to match your local font location */
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/Rajdhani-Regular.woff) format('woff'); /* Change to match your local font location */
}

@font-face {
    font-family: 'Rajdhani';
    font-style: medium;
    font-weight: 900;
    src: url(/fonts/Rajdhani-Bold.woff) format('woff'); /* Change to match your local font location */
}


body{
    font-family: 'DM Sans', sans-serif; /* DM Sans for p */
    font-size: 18px;
    line-height: 1.6;
}
section{
    padding-top:5%;
    padding-bottom: 5%;
    overflow-x: hidden;
}

pre {
    color: #fff;
    background: #313131;
    padding: 2% 5%;
}

code {
    color: #00fff9;
}

.case-study-cta-section,.project-grid-section {
    overflow: visible;
}
.large-section-padding {
    padding: 8vw 6vw;
}
img.phone-icon {
    max-width: 14px;
    filter: brightness(0);
    margin-right: 5px;
}

h1,h2,h3,h4,h5,h6,.small,.h1,.h2,.h3,.h4,.h5,.h6{
    font-family: 'Rajdhani', sans-serif;
}

.link-light:hover, .link-light:focus {
    color: var(--bs-primary) !important;
    
}
.link-light{
    text-decoration: none;
}
.bg-network-nodes{
    background: url(../assets/network-nodes.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat; 
}
.bg-network-nodes-2{
    background: url(../assets/bg-nodes.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat; 
}
.bg-network-nodes-3{
    background: url(../assets/wave-white.webp);
    background-size: 60%;
    background-position: bottom left;
    background-repeat: no-repeat; 
}
.bg-network-nodes-4{
    background: url(../assets/black-nodes.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat; 
}

.bg-network-nodes-5{
    background: url(../assets/bg-node.webp);
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat; 
}
.bg-network-nodes-6{
    background: url(../assets/bg-node-white.webp);
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat; 
}

.bg-nodes-corner{
    background: url(../assets/bg-node-white-corner.webp);
    background-size: 60%;
    background-position: top right;
    background-repeat: no-repeat; 
}
.bg-wave-nodes{
    background: url(../assets/wave-nodes.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat; 
}
.bg-dark-abstract{
    background: url(../assets/footer-background.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat; 
}

.bg-image {
    border-radius: 10px;
    background-position: top left;
    background-size: cover ;
    background-repeat: no-repeat;
}
.bg-contain{
    background-size: contain ;
    background-position: center center;
}
.dropdown-menu {
    max-width: 350px !important;
    width: max-content !important;
    text-wrap: wrap;
} 
.dropdown-menu .dropdown-item{
    text-wrap: wrap;
}

.dropdown-toggle::after {
    margin-left: 15px !important;
    vertical-align: 0.2em;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.navbar{
    height:160px;
    font-family: 'Rajdhani', sans-serif;
}
.navbar-brand img{
    max-width: 150px;
}
.navbar-nav li a{
    font-size: 18px;
    color: var(--bs-white);
}
.navbar-nav li a:hover{
    font-size: 18px;
    color: var(--bs-primary);
}
.navbar-nav li.active>a{
    color: var(--bs-primary);
}
.offcanvas-header .btn-close {
    filter: invert(1);
}
button.form-submit:disabled {
    opacity: .3;
}
.hero .btn {
    margin-top: 10%;
}

.btn{
    font-family: 'Rajdhani', sans-serif;
    font-size: 19px;
}

.btn-outline-white {
    color: white;
    border: solid 1px white;
    padding: 11px 44px;
    border-radius: 0;
    text-decoration-style: solid;
}
.btn-outline-primary{
    color: var(--bs-primary);
    border: solid 1px var(--bs-primary);
    padding: 11px 44px;
    border-radius: 0;
    text-decoration-style: solid;
}

.btn-outline-white:hover {
    color: var(--bs-primary);
    border: solid 1px var(--bs-primary);
}

.btn-outline-primary{
    color: var(--bs-primary);
    border: solid 1px var(--bs-primary);
    padding: 11px 44px;
    border-radius: 0;
    font-size: 18px;
    text-decoration-style: solid;
}
.btn-black {
    background: black;
    border-radius: 0;
    color: #fff;
    height: fit-content;
}
.btn-black:hover {
    background: black;
    color: #fff;
    box-shadow: 0px 0px 15px #000;
}
.btn-outline-dark{
    color: black;
    border: solid 1px black;
    padding: 11px 44px;
    border-radius: 0;
    text-decoration-style: solid;
}
.btn-outline-dark:hover{
    color: var(--bs-primary);
    border: solid 1px var(--bs-primary);
}
.btn-primary {
    border-radius: 0;
    padding: 11px 44px;
}
.btn-primary:hover {
    box-shadow: 0px 0px 15px var(--bs-primary);
}
.btn-icon{
    color: white;
    margin-right: 5%;
}
.btn-icon:hover{
    color: var(--bs-primary);
}
.btn-icon img {
    max-width: 17px;
}

.curve-border{
    border-radius: 10px;
}

.nav-buttons {
    min-width: 350px;
}
.hero a.btn {
    float: right;
}
.hero {
    height: 700px;
    display: flex;
    align-content: center;
    align-items: center;
    background-color: black;
    background-image: url(../assets/pitchblackmain.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

span.smaller {
    font-size: 0.25em;
}
.special-text {
  font-size: 0.2em;
}
h1.large-bold span.small {
    font-size: 0.35em;
}
h2.big-display {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2em;
}
.big-display .small{
    font-size: .7em;
}
.hero-text-design .smaller {
    max-width: min-content;
    color: var(--bs-primary);
}
.hero-text-design {
    display: flex;
    align-items: center;
}
.hero-text-design .text-primary {
    margin-right: 2%;
}
a.no-underline {
    text-decoration: none;
}
.container-fluid-text-container {
    padding: 5% 7%;
}
.container-fluid-text-container p {
    max-width: 100%;
}

.home .section-3 {
    box-shadow: 1px 1px #ededed inset;
}
section.py-5 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}
section.large-section-padding {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
}

.dark-section-1 .py-5 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
}
hr {
    margin: 7% 0;
    max-width: 30px;
    border-width: 4px;
    opacity: .75;
}

.home .floating-img img {
    width: 40vw;
    max-width: 700px;
    margin-top: -20%;
    margin-bottom: -20%;
    z-index: 1;
    position: relative;
    right: -40%;
}

.home .section-3 .display-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.home .section-3 .btn.display-block {
    width: fit-content;
}

.form-group-container .form-control {
    background: #00000000;
    color:#ececec;
    border-radius: 0;
    border-width: 0 0 1px 0;
    margin-bottom: 20px;
}
.form-group-container input::placeholder, .form-group-container textarea::placeholder {
    color: #aaa;
}
.form-group-container label {
    display: none;
}
.contact-form button.form-submit {
    background: #00000000;
    border: solid 1px #fff;
    padding: 15px 45px;
    color: #fff;
    font-family: 'Rajdhani';
    font-size: 18px;
}
.contact-form button.form-submit:hover{
    border: solid 1px var(--bs-primary);
    color: var(--bs-primary);
}

img.shadow {
    border-radius: 10px;
}
.floating-img img {
    width: 100%;
    max-width: 350px;
    margin-top: -150px;
    margin-bottom: -150px;
}
.case-study-cta-section .container-float,.project-grid-section .container-float {
    max-width: 80%;
    margin: auto;
}

.service-grid-tiles {
    min-height: 438px;
    background-position: center center;
    background-color: black;
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: baseline;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5% 2% 5% 2%;
    border: #fff 5px solid;
    position: relative;
}
.section-3 .col-md-5 {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: baseline;
}
.service-grid-tiles:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-color: black;
    width: 100%;
    height: 100%;
    opacity: 0.6;
}
.service-grid-tiles>div{
    position: relative;
  }

.section-3 .service-grid .col-md-6.col1{
    background-image: url(../assets/1.webp);
}
.section-3 .service-grid .col-md-6.col2{
    background-image: url(../assets/2.webp);
}
.section-3 .service-grid .col-md-6.col3{
    background-image: url(../assets/3.webp);
}
.section-3 .service-grid .col-md-6.col4{
    background-image: url(../assets/4.webp);
}
.section-4 {
    padding: 7%;
    background-color: #ececec !important;
} 

.cta-section {
    padding: 7% 0;
    background: url(../assets/footer-background.webp);
    background-size: cover;
}
.large-P{
    padding: 0% 5% 0% 5%;
}

.bg-image.margin-neg-left {
    margin-left: -6%;
    margin-right: 6%;
}
.bg-image.margin-neg-right {
    margin-left: 6%;
    margin-right:-6%;
}

.scroll-image {
    overflow:scroll;
    height: 700px;
}
footer {
    padding-top: 10% !important;
    padding-bottom: 3%;
}
.footer-logo img{
    max-width: 300px;
}


footer .social-icon img {
    max-width: 25px;
    margin-right: 20px;
}
footer .small{
    font-family: 'DM Sans', sans-serif !important; /* DM Sans for p */
}
.footer a.nav-link {
    line-height: 1.9;
    padding: 6px 0px;
}

.img-border {
    max-width: 100%;
    border-radius: 15px;
}

.stick-bottom{
    position: relative;
    bottom:-108px;
}

/**** Google ads Landing ****/

.google-ads-landing .navbar-brand img {
    max-width: 300px;
}

.google-ads-landing .nav-buttons {
    width: 100%;
}

.google-ads-landing .hero {
    min-height: 600px;
    padding: 0;
    height: min-content !important;
    display: flex;
    align-content: center;
    align-items: center;
    background-color: black;
    background-image: url(../assets/green-smoke-black-background.webp);
}
.border-white {
  --bs-border-opacity: .2;
}
.hero-text-design {
    font-size: 9rem;
}
.google-ads-landing .hero h1.large-bold{
    font-size: 75px;
}
.text-larger {
  font-size: 1.6em;
}
h1.large-bold {
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
}
h2.large-bold {
    font-weight: 900;
    font-size: 60px;
    line-height: 1.1;
}
h2.larger-bold{
    font-weight: 900;
    font-size: 75px;
    line-height: 1;
}
h3.large-bold {
    font-weight: 900;
    line-height: 1.1;
}
p.card-text {
    font-size: smaller;
}
.google-ads-landing .hero h1,
.google-ads-landing .hero h2{
    line-height: 1;
    margin-bottom: 15px;
}
.google-ads-landing a.btn, .landing-form button.form-submit{
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.google-ads-landing a.btn{
    font-weight: 600;
}

.google .icons-section img {
    max-width: 75px;
}

ul.features {
    list-style-type: none;
    padding: 0;
}
ul.features li {
    margin-bottom: 7px;
}

ul.features img {
    max-width: 24px;
    margin-right: 15px;
}
.google-ads-landing .btn{
    margin-top: 10px;
}

.landing-page-form {
    background: var(--bs-primary);
    padding: 15% 15%;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0px 10px 25px #00fff991;
}
.landing-page-form .large-bold{
    font-weight: 900;
    font-size:60px;
}
.landing-page-form .form-group-container .form-control {
    background: #00000000;
    color:#000000;
    border-radius: 0;
    border-width: 0 0 1px 0;
    border-color:#000000;
    margin-bottom: 20px;
    text-align: center;
}
.landing-page-form .form-group-container input::placeholder, .form-group-container textarea::placeholder {
    color: #555;
}
.landing-page-form .form-group-container label {
    display: none;
}
.landing-page-form .landing-form button.form-submit {
    background: #000;
    border: solid 1px #000000;
    padding: 15px 45px;
    color: #fff;
    font-family: 'Rajdhani';
    font-size: 18px;
    width: 100%;
}
.landing-page-form .landing-form button.form-submit:hover {
    border: solid 1px black;
    color: rgb(255, 255, 255);
    box-shadow: 0px 2px 10px #000000c7;
}

.teal-smoke-bg {
    background-color: #00fff9;
    background-image: url(../assets/teal-white-smoke-bg.webp);
    background-size: cover;
    background-position: center;
}
.centered-container{
    padding: 4%;
    border-radius: 50px;
}
.centered-container .btn, .centered-container h2 {
    margin: 0 !important;
}

.google-ads-landing .bg-image{
    height: 600px;
}

img.phone {
    margin: -40px;
}
.landing-CTA a.btn {
    font-size: 27px;
    padding: 10px 44px;
}

.two-buttons {
    align-items: flex-start;
    display: grid;
}


.affordable-sites-lp .hero-text-design {
    font-size: 5.5rem;
}
/**** Google ads Landing ****/


/***BLOG PAGES***/
.blog-template-single .hero {
    height: auto !important;
    max-height: fit-content !important;
    padding: 10px !important;
    text-align: center;
    background-position: top;
    background-image: url(../assets/abstract-wave-pattern-backgroundcopy1.webp);
}
.blog-template-single .blog-content img {
    margin: 25px auto;
    max-width: 100%;
    margin-bottom: 3.5rem;
}
.blog-template-single .blog-content .row {
    max-width: 900px;
    margin: auto;
}

.blog-template-single .hero h1 {
    max-width: 85%;
    margin: 20px auto;
    text-transform: capitalize;
}

.blog-template-single .blog-content h2 {
    font-size: calc(1.6rem + 1.1vw);
    margin-top: .8em;
}
.blog-template-single .blog-content h3 {
    font-size: calc(1.3rem + 1vw);
    margin-top: .8em;
}
.blog-template-single .blog-content h4 {
    font-size: calc(1rem + 0.8vw);
    margin-top: .8em;
}

.blog-template-single .blog-content p {
    margin-top: 1rem;
    margin-bottom: 2.5rem;
}

.blog-template-single .blog-content ol, 
.blog-template-single .blog-content ul, 
.blog-template-single .blog-content dl {
    margin-top: 1rem;
    margin-bottom: 2.5rem;
}

.blog-template-single .blog-content li {
    margin-bottom: 1.5rem;
}

.card-footer {
    border-top: none;
}

div.card img.card-img-top {
    border-radius: 10px 10px 0px 0px !important;
}

div.card {
    border-radius: 10px !important;
    min-width: 22%;
}

/***BLOG PAGES***/


/***Slider changes****/

.carousel-control-prev,
.carousel-control-next {
  width: 5rem;
  top: 50%;
  transform: translateY(-50%);
}

.carousel-control-prev {
  left: -6rem;
}

.carousel-control-next {
  right: -6rem;
}

.carousel-control-prev-icon,
.carousel-control-next-icon, .carousel-indicators {
  filter: brightness(0) saturate(100%) invert(60%);
}

.carousel-indicators {
    position: absolute;
    bottom: -6.5rem; /* push them below the carousel */
    
    transform: translateY(-50%);
}




/***Slider changes****/

/**Mobile adjustments**/
@media only screen and  (max-width: 600px){
    .hero {
        height: 530px !important;
        padding-top: 120px;
        background-image: none;
        background: rgb(0,0,0);
        background: linear-gradient(198deg, rgba(0,0,0,1) 0%, rgba(1,20,20,1) 30%, rgba(1,48,48,1) 39%, rgba(0,0,0,1) 87%, rgba(0,0,0,1) 100%);
    }
    .blog-template-single .hero {
        height: min-content !important;
        padding-top: 50px;
    }
   
    
    .bg-image {
        width: 90%;
        margin: auto;
    }
    .google-ads-landing .bg-image{
        height: 300px;
    }
    .large-P{
        padding: 10% 7%;
    }
    .case-study-cta-section .container-float, .project-grid-section .container-float{
        max-width: 100%;
        padding-top:5em  !important;
        padding-bottom:5em  !important;
        margin: auto;
    }
    .google-ads-landing a.navbar-brand {
        margin: 0 5%;
        
    }
    .google-ads-landing .navbar-brand img{
        max-width: 200px;
    }
    .google-ads-landing .hero {
        min-height: 0;
        padding-top: 0px;
    }

} 


@media only screen and (max-width:768px){
    .dropdown-menu{
        display: block;
        position: static;
        background-color:transparent;
        border:0 none;
        box-shadow:none;
        margin-top:0;
        position:static;
        width:100%;
    }
    .navbar-nav .dropdown-menu > li > a, 
    .navbar-nav .dropdown-menu .dropdown-header {
        padding:5px 15px 5px 25px;
    }
    .navbar-nav .dropdown-menu > li > a{
        line-height:20px;
    }
    .navbar-default .navbar-nav .dropdown-menu > li > a{
        
        color:#777;
    }
    .dropdown .bg-dark, .dropdown-menu .bg-dark {
        background: black !important;
    }
    li.nav-item {
        border-bottom: 1px solid #111;
    }
    div.card {
        min-width: 30%;
    }
    
}


@media only screen and (max-width: 768px){
    .bg-image.margin-neg-left {
        margin-left: auto;
        margin-right: auto;

    }
    .bg-image.margin-neg-right {
        margin-left: auto;
        margin-right:auto;
    }
    h1.large-bold {
        font-size: 45px;
    }
    .google-ads-landing h2.large-bold {
        font-size: 35px;
        margin-bottom: 20px !important;
    }
    .google-ads-landing h2.larger-bold{
        font-size: 35px;
    }
    .landing-page-form {
        padding: 25% 7%;
    }
    .centered-container {
        padding: 20% 7%;
        border-radius: 50px;
    }
    .hero-text-design {
        font-size: 21vw;
    }
    .google-ads-landing .hero h1.large-bold {
        font-size: 16vw;
    }
    h2.big-display {
        font-size: 3rem;
    }
}

@media only screen and (min-width: 992px){

    .navbar .offcanvas-body {
        align-self: center;
    }
    .large-padding{
        padding:0 5% !important;
    }
    div.card {
        max-width: 22%;
    }
    

}