styles.css

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
* {
    box-sizing: border-box;
}
/* iframe styling */
body {
    margin: 0;
}
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
    float: left;
    padding: 20px 0px;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-1-5 {width: 12.5%;}
    .col-1-7 {width: 14.28%;}
    .col-2 {width: 16.66%;}
    .col-2-4 {width: 20%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    [class*="col-"] {
        padding: 10px;
    }
}
@media only screen and (max-width: 767px) {
    [class*="col-"] {
        text-align: center;
    }
}
[class*="col-"] img{
    max-width: 100%;
}
.row {
    padding: 10px 0px 10px 0px;
}
.row::after, .row-2::after {
    content: "";
    clear: both;
    display: table;
}
@media only screen and (max-width: 767px) {
    .row {
        padding: 0;
    }
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
}
h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}
h2, h3, h4, h5, h6, a, p, q, li, #caption, .breadcrumb, span, table, th, tr, td {
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1 {
    font-size: 48px;
    margin: 0;
}
.hero.homepage h1 {
    font-size: 48px;
}
@media only screen and (max-width: 767px) {
    h1, .hero.homepage h1 {
        font-size: 30px;
    } 
}
h2 {
    font-size: 30px;
}
@media only screen and (max-width: 767px) {
    h2 {
        font-size: 25px;
    }
}
h3 {
    font-size: 22px;
}
@media only screen and (max-width: 767px) {
    h3 {
        font-size: 20px;
    }
}
h4 {
    font-size: 16px;
}
p, q, li {
    color: #000000;
    font-size: 16px;
    line-height: 1.5rem;
}   
hr {
    width: 50px;
    height: 5px;
    border: none;
    background-color: #791E89;
    /* border-width: 2px;
    border-style: solid;
    background: linear-gradient(90deg, #340d3b, rgb(204, 0, 0, 1)) */
}
.container-1140 {
    max-width: 1140px;
    margin: auto;
}
.container-1080 {
    max-width: 1080px;
    margin:auto;
}
.container-1000 {
    max-width: 1000px;
    margin:auto;
}
.container-700 {
    max-width: 700px;
    margin:auto;
}
.header {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 25px 20px -20px;
    background-color: #ffffff;
}
@media only screen and (min-width: 768px) {
    .header {
        z-index: 1000;
        position:sticky;
        top:0px;
    }
}
.header .logo {
    text-align: left;
}
.header .row {
    padding: 0;
}
@media only screen and (max-width: 767px) {
    .header {
        padding: 0 20px;
    }
    .header .logo img {
        max-width: 150px;
    }
    .header .logo {
        text-align: center;
    }
    .header .col-2, .header .col-10 {
        padding-bottom: 10px;
    }
}
/* Add a red background color to the top navigation */
.topnav {
    /* background-color: #340d3b; */
    overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #340d3b;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
}
/* Change the color of links on hover */
.topnav a:hover {
    /* background-color: #ddd;
    color: black; */
    /* font-weight: 700; */
    /* text-decoration: underline; */
    color:#000000;
}
/* Add an active class to highlight the current page */
/* .topnav a.active {
    background-color: #000000;
    color: white;
} */
@media only screen and (min-width: 768px) {
    .nav {
        float: right;
    }
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
} 
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: #340d3b;
    padding: 10px 16px;
    background-color: inherit;
    font-family: 'Lato', sans-serif;
    margin: 0;
    font-weight: 700;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: #340d3b;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-weight: 400;
}
/* Add a dark background on topnav links and the dropdown button on hover */
/* .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #340d3b;
    color: white;
} */
/* Add a grey background to dropdown links on hover */
/* .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
} */
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
@media screen and (min-width: 768px) {
    .dropdown:hover .dropdown-content {
      display: block;
    }
  }
/* When the screen is less than 767 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 767px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {display: none;}
    .topnav a, .dropdown .dropbtn {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
      background-color: #FFC721;
    }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 767px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
      background-color: #FFC721;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
        }
}
/* .topnav i {
    font-size: 16px;
    color:#ffffff;
} */
.topnav .fa-solid.fa-angle-down {
    font-size: 16px;
    color:#791E89;
    padding-left: 6px;
}
.topnav .fas.fa-bars {
    font-size: 16px;
    color:#000000;
}
.show {display: block;}
.nav {
    /* background-color: #340d3b; */
    padding: 10px;
}
@media only screen and (max-width:767px) {
    .nav {
        padding: 0px;
    }
}
.nav .menu {
    text-align: center;
}
.nav li {
    display: inline;
}
.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu-item a {
    color: #ffffff;
}
.hero {
    background-color: #561562;
    /* background-image: linear-gradient(0deg, #7B1E8C, #340d3b); */
    background-size: cover;
    background-repeat: no-repeat;
    padding: 60px 20px;
}
.hero h1, .hero h2, .hero h3, .hero h4, .hero p {
    color: #ffffff;
}
.hero h2 {
    font-size: 18px;
    font-weight: 400;
}
.hero h3 {
    font-size: 16px;
    font-weight: 700;
}
.hero i {
    padding: 0 10px;
    font-size: 18px;
    color: #FFC721;
}
.emphasis {
    color: #FFC721;
    /* font-style: oblique; */
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.section {
    padding: 20px;
}
.clients {
    text-align: center;
    /* background: linear-gradient(90deg, #340d3b, rgb(204, 0, 0, 1)); */
}
.clients video {
    filter: drop-shadow(0px 4px 40px rgba(0, 0, 0, 0.25));
}
.portfolio h2 {
    margin-top: 0;
}
.testimonials {
    padding-top: 40px;
}
/* .testimonials img {
    height: 80px;
    padding-top: 16px;
} */
.testimonial-card {
    text-align: center;
    background-color: #efefef;
    margin: 0px 5px;
    padding: 30px;
    border-radius: 6px;
}
.certifications {
    text-align: center;
}
.contact {
    /* background: linear-gradient(0deg, #791E89, #340d3b) */
    background-color: #561562;
}
@media screen and (min-width: 768px) {
    .btn-contact {
        background-color: #FFC721;
        color: #000000 !important;
        /* padding: 10px 40px !important; */
        /* border-radius: 6px; */
        text-decoration: none;
        text-align: center;
        margin-left: 10px;
        font-weight: 700;
    }
    .btn-contact:hover {
        background-color: #1e1e1e;
        color:#ffffff !important;
    }
}
.contact h3, .contact p {
    color: #ffffff;
    margin-top: 0;
    /* text-align: center; */
}
.contact .col-4 {
    text-align: center;
}
.footer {
    background-color: #1e1e1e;
    color: #ffffff;
}
.footer p, .footer a {
    color: #ffffff;
    font-weight: 400;
}
.footer p {
    margin: 6px 0;
}
@media only screen and (min-width: 768px) {
    .footer h4 {
        text-align: left;
    }
}
.footer .logo {
    text-align: center;
}
.footer i {
    padding-right: 10px;
    color: #ffffff;
}
.footer img {
    max-height: 100px;
}
.footer a {
    text-decoration: none;
}
.copyright a {
    color: #340d3b
}
.copyright p {
    font-size: 14px;
}
.grey {
    background-color: #f6f6f6;
}
.violet {
    background-color: #340d3b;
}
.shadow-box {
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.07);
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px;
}
.shadow-box-2 {
    box-shadow: 0px 4px 40px 0px rgba(121, 29, 136, 0.13);
    background-color: #ffffff;
    border-radius: 12px;
    margin: 40px 0px;
}
@media only screen and (max-width: 768px) {
    .shadow-box-2 .col-5 {
        padding: 0 0 20px 0;
    }
    .shadow-box-2 .col-7 {
        padding: 0 30px;
        text-align: left;
    }
    /* .shadow-box-2 img {
        border-radius: 12px 12px 0 0;
    } */
}
.shadow-box-2:hover {
    box-shadow: 0px 4px 40px 0px rgba(121, 29, 136, 0.25);
    transition: box-shadow 1s;
}
i {
    color:#791E89;
    font-size: 32px;
}
.smalli {
    font-size: 18px;
}
.center {
    text-align: center;
}
.center img {
    max-width: 100%;
}
.left-align {
    margin-left:0;
}
/* .btn-contact {
    border: 1px solid #ffffff;
    background-color: #340d3b;
    color: #ffffff;
    padding: 15px 40px;
    border-radius: 6px;
    text-decoration: none;
    margin-top: 30px;
    text-align: center;
}
.btn-contact a {
    color: #ffffff;
}
.btn-contact:hover {
    color: #340d3b;
    border: 1px solid #ffffff;
    background-color: #ffffff;
} */
.btn-primary {
    background-color: #FFC721;
    color: #000000;
    padding: 15px 28px;
    /* border-radius: 6px; */
    text-decoration: none;
    margin-top: 30px;
    text-align: center;
    font-weight: 700;
}
.btn-primary:hover {
    background-color: #1e1e1e;
    color: #ffffff;
}
.btn-secondary {
    font-weight: 700;
    color: #340d3b;
    text-decoration: none;
    padding: 15px 28px;
    border: 1px solid #561562;
    text-align: center;
}
.btn-secondary:hover {
    background-color: #561562;
    color: #ffffff;
}
@media only screen and (max-width: 479px) {
    .btn-primary, .btn-contact, .btn-secondary {
        margin-top: 0px;
        width: 100%;
        display: block;
    }
}
.padding-bottom {
    padding-bottom: 30px;
}
.padding-top {
    padding-top: 20px;
}
@media only screen and (max-width: 768px) {
    .padding-bottom {
        padding-bottom: 20px;
    }
    .padding-top {
        padding-top: 20px;
    }
}
.padding-btn {
    padding-top: 30px;
    padding-bottom: 30px;
}
@media only screen and (max-width: 479px) {
    .padding-btn {
        padding-top: 10px;
        padding-bottom: 20px;
    } 
}
::-moz-selection { /* Code for Firefox */
    color: #ffffff;
    background: #FFC721;
}
::selection {
    color: #ffffff;
    background: #FFC721;
}
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.Custom-Polaris-Icon {
    display: block;
    height: 4rem; /* or value equivalent to 20px */
    width: 4rem; /* or value equivalent to 20px */
    max-height: 100%;
    max-width: 100%;
    margin: auto;
}
.Custom-Polaris-Icon__Svg {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    /* Icon color */
    fill: #791E89;
}
@media screen and (min-width: 768px) {
    .smaller {
        font-size: 24px;
    }
}
.section svg {
    color:#340d3b;
    font-size: 36px;
}
.footer svg {
    color: #ffffff;
    font-size: 30px;
    margin-right: 10px;
}
.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    width:100%;
    max-width:250px;
    padding-bottom: 20px;
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 20px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    max-height: 90%;
}
/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    /* height: 150px; */
}
/* Add Animation */
.modal-content, #caption {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}
    @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
.close:hover,
.close:focus,
[class^="arrow"]:hover,
[class^="arrow"]:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
[class^="arrow"] {
    color: #f1f1f1;
    position: absolute;
    top:50%;
    font-size: 28px;
    font-weight: bold;
    transition: 0.3s;
}
.arrow-left {
    left: 35px;
}
.arrow-right {
    right: 35px;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        /* padding-left: 40px;
        padding-right: 40px; */
        max-height: none;
        max-width: 80%;
    }
    .modal {
        padding-top: 100px;
    }
    .arrow-left, .arrow-right {
        top: 44%;
    }
    .arrow-left {
        left: 5px;
    }
    .arrow-right {
        right: 5px;
    }
    .myImg {
        margin:auto;
    }
}
.design {
    justify-content: space-between;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.offer-card {
    padding: 30px;
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background-color: #ffffff;
}
.blog-card {
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
}
.blog-card img {
    border-radius: 6px 6px 0 0;
}
.blog-card-text {
    padding: 30px;
}
.offer-card:hover, .blog-card:hover {
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.2);
    transition: box-shadow 1s;
}
.partners img {
    max-width: 80%;
}
@media only screen and (max-width: 767px) {
    .partners img {
        max-width: 200px;
    }
}
/* Testimonial styling */

/* Add an italic font style to all quotes */
q {font-style: italic;}
.screenshot {
    max-width: 100%;
    padding: 20px 0px;
}
.announcement-bar {
    background-color: #1e1e1e;
    /* background-color: transparent; */
    /* background-image: linear-gradient(90deg, #340d3b, rgb(204, 0, 0, 1)); */
    /* background-size: cover; */
    /* background-repeat: no-repeat; */
    text-align: right;
    padding: 10px 80px;
}
.announcement-bar a, .announcement-bar span, .announcement-bar i {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
}
.announcement-bar i {
    padding: 0 10px;
}
@media only screen and (max-width: 768px) {
    .announcement-bar {
        text-align: center;
        padding: 10px 20px;
    }
}
/* Logo carousel */
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%)
    }
}
.logos {
    text-align: center;
    margin: auto;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
@media only screen and (min-width: 768px) {
    .logos:before, .logos:after {
        position:absolute;
        top: 0;
        width: 200px;
        height: 100%;
        content: "";
        z-index: 2;
    }
    .logos:before {
        left: 0;
        background: linear-gradient(to left, rgba(255, 255, 255, 0),white);
    }
    .logos:after {
        right: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0),white);
    }
}
.logos:hover .logos-slide {
    animation-play-state: paused;
}
.logos-slide {
    padding: 40px 0;
    display: inline-block;
    animation: 150s slide infinite linear;
}
.logos-slide img {
    height: 50px;
    margin: 0 40px;
    filter: grayscale(100%);
}
.logos-slide img:hover {
    filter: grayscale(0%);
}
.customer-logos img {
    height: 50px;
    margin: 20px 0 0 0;
}
@media screen and (max-width: 767px) {
    .customer-logos img {
        height: 50px;
        margin: 20px 0;
    }
}
.breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb li {
    display: inline-block;
    font-size: 14px;
}
.right-align {
    float: right;
}
.customer {
    font-weight: 700;
}
.blog-title {
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    color:#000000;
    line-height: 1.5;
}
.star {
    height: 16px;
}
th, td {
    border: 1px solid #d9d9d9;
    padding: 16px;
}
th {
    text-align: left;
}
table {
    border-collapse: collapse;
}
.founders-note {
    border-radius: 500px;
    border: 8px solid #FFC721;
    width: 300px;
    max-width: 100%;
}
.case-study-screenshot {
    width:400px;
    padding: 20px 0;
}
@media screen and (max-width: 767px) {
    .case-study-screenshot {
        max-width: 100%;
    }
}
.logo a {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 52px;
    color: #561562;
    text-decoration: none;
}
.blog-date {
    font-size: 14px;
}
.blog-excerpt {
    color: #333333;
}
.padding-bottom-20px {
    padding-bottom: 20px;
}
.collapsible {
    background-color: #f6f6f6;
    color: #000000;
    cursor: pointer;
    padding: 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    font-family: Lato;
}
.collapsible:after {
    content: '\002B';
    color: #000000;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}
.active:after {
    content: "\2212";
}
.content {
    padding: 8px 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #ffffff;
    border: none;
}
.caption {
    font-style: italic;
    font-size: 14px;
    color:#333333;
}
.contact-me {
    text-align: left !important;
}
.contact-me i {
    font-size: 16px;
    padding-right: 8px;
}
iframe {
    border-width: 0px;
    width: 100%;
    height: 1420px;
}