* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



/* Fonts */
:root {
    --default-font: "Open Sans",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Raleway",  sans-serif;
    --nav-font: "Poppins",  sans-serif;
  }
  
  /* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
  :root { 
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #37423b; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #5c84e7; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
  }
  
  /* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
  :root {
    --nav-color: #272828;  /* The default color of the main navmenu links */
    --nav-hover-color: #5fcf80; /* Applied to main navmenu links when they are hovered over or active */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #272828; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #5fcf80; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  }
  
  /* Smooth scroll */
  :root {
    scroll-behavior: smooth;
  }





  /*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background-color: var(--accent-color);
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
  }
  
  .scroll-top i {
    font-size: 24px;
    color: var(--contrast-color);
    line-height: 0;
  }
  
  .scroll-top:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
    color: var(--contrast-color);
  }
  
  .scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 15px;
  }



  
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
    --default-color: #ffffff;
    --background-color: #000000;
    --heading-color: #ffffff;
    width: 100%;
    min-height: 90vh;
    position: relative;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-color);
  }
  
  .hero img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  
  .hero:before {
    content: "";
    background: color-mix(in srgb, var(--background-color), transparent 60%);
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  
  .hero .container {
    position: relative;
    z-index: 2;
  }
  
  .hero h2 {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
  }
  
  .hero p {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin: 10px 0 0 0;
    font-size: 24px;
  }
  
  .hero .btn-get-started {
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 8px 35px 10px 35px;
    border-radius: 50px;
    transition: 0.4s;
    margin-top: 30px;
    border: 2px solid var(--default-color);
    color: var(--default-color);
  }
  
  .hero .btn-get-started:hover {
    background: var(--accent-color);
    border: 2px solid var(--accent-color);
  }
  
  @media (max-width: 768px) {
    .hero h2 {
      font-size: 32px;
    }
  
    .hero p {
      font-size: 18px;
    }
  }

/* --------------Navbar Section------------ */

.navbar {
    z-index: 997;
}

.testimonial-container {
    z-index: 0;
}

.nav-item a {
    color: white;
    font-weight: 500;
}

.nav-item ul li a {
    color: #3b6be5;
}







/* --------------Hero Section-------------- */

/* @media screen and (max-width: 600px) {
    .hero-section-parent {
        padding: 0 !important;
    }
    .hero-section {
        padding: 0 !important;
    }
    .hero-section-child {
        align-items: center !important;
    }
   
}

.hero-section {
    height: 80vh;
    max-height: 90vh;
    width: 100%;
}

.video-part {
    max-height: 60vh !important;
    max-width: 100%;
}

.video {
    height: 100%;
    width: 60%;
}

.text-part {
    height: 69vh;
    padding: 10px 0 !important;
}

.video video {
    height: 100%;
    width: 60%;
} */


/* Hide mobile section by default */
.mobile-only {
    display: none;
}

/* Show desktop section by default */
.desktop-only {
    display: block;
}

/* Media query for screens less than 768px */
@media screen and (max-width: 768px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
}



/* -------------Introduction-------------- */

/*@media screen and (max-width: 992px) {*/
/*    .hero-section h2 {*/
/*        display: none;*/
/*    }*/
/*}*/

@media screen and (max-width: 768px ) {
    /* #introduction {
        margin-top: 220px !important;
    } */
    .media-line span {
        width: 125px !important;
    }
}

@media screen and (min-width: 993px) and (max-width: 1100px) {
    .hero-section .text-part {
        height: 80vh;
    }
    #indtroduction h2 {
        margin-top: 0px !important;
    }
    #introduction {
        margin: 0px !important;
        padding-top: 10px !important;
    }
}

@media screen and (max-width: 992px ) {
    .hero-section .text-part {
        height: 45vh;
    }
    /* #introduction {
        margin-top: 310px !important;
    } */
    /* #introduction h2 {
        margin-top: 154px !important;
    } */
}
@media screen and (max-width: 942px ) {
    /* #introduction {
        margin-top: 300px !important;
    }
    #introduction h2 {
        margin-top: 154px !important;
    } */
}
@media screen and (max-width: 892px ) {
    /* #introduction {
        margin-top: 250px !important;
    }

    #introduction h2 {
        margin-top: 154px !important;
    } */
}
@media screen and (max-width: 842px ) {

    /* #introduction {
        margin-top: 180px !important;
    }

    #introduction h2 {
        margin-top: 164px !important;
    } */
}

@media screen and (max-width: 750px) {
    /* #introduction h2 {
        margin-top: 120px !important;
    } */
}
@media screen and (max-width: 700px ) {
    /* .hero-section .text-part {
        height: 40vh;
    }
    #introduction h2 {
        margin-top: 84px !important;
    }
    #introduction {
        margin-top: 210px !important;
    } */
}
@media screen and (max-width: 650px ) {
    /* #introduction {
        margin-top: 100px !important;
    }
    #introduction h2 {
        margin-top: 76px !important;
    } */
}
@media screen and (max-width: 600px ) {
    /* #introduction {
        margin-top: 80px !important;
    }
    #introduction h2 {
        margin-top: 66px !important;
    } */
     .main-title {
        font-size: 20px !important;
     }
     .main-logo {
        width: 52px !important;
     }
}
@media screen and (max-width: 540px ) {
    /* .hero-section .text-part {
        height: 40vh;
    }
    #introduction {
        margin-top: 80px !important;
    } */
    /* #introduction h2 {
        margin-top: 40px !important;
    } */
    .media-line span {
        width: 100px !important;
    }

    .text-part {
        padding: 16px 0 !important;
    }
    .breadcrumb {
        height: 200px !important;
    }
    .breadcrumb img {
        height: 200px !important;
    }
}

@media screen and (max-width: 400px) {
    #introduction {
        margin-top: 0 !important;
    }
}

.media-line {
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-line span {
    height: 4px;
    width: 150px;
    background-color: #3b6be5;
    margin-top: 0;
    border-radius: 2px;
}

/* ------------------explainerVideos---------------- */

.media-line2 span {
    height: 4px;
    width: 50px;
    background-color: #3b6be5 !important;
    margin-top: 0;
    border-radius: 2px;
}

section {
    /* margin: 10px 0 !important; */
    padding: 45px 0 !important;
    text-align: center;
}

.readmore:hover {
    color: blue;
    background-color: white;
    border: none;
    border-radius: 16px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}




.breadcrumb {
    height: 350px;
    width: auto;
}

.breadcrumb img {
    height: 100%;
    width: 100%;
}

/* Testimonials */

.owl-carousel .item {
    max-height: 300px;
    width: 100%;
    display: inline-block;
    /* background-color: aqua; */
    /* margin: 35px 23px; */
}

.owl-carousel .item img {
    object-fit: cover;

}


/* our video editing service  */

.icon {
    width: 30%;
    height: 30%;
    margin: 5px 0;
}

.outer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    height: 170px;
    width: 170px;
    border-top: 15px solid black;
    border-left: 15px solid white;
    border-right: 15px solid white;
    border-bottom: 15px solid black;
    border-radius: 50%;
    /* margin: 2px 12px; */
    margin-bottom: 18px;
    transition: 1.5s ease;
}


.inner-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    border: 15px solid yellow;
    border-radius: 50%;
}

.outer-box:hover {
    border: 15px solid grey;
}

.outer-box:hover .icon {
    animation: rotate360 0.5s linear ;
}

@keyframes rotate360 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
}

.form-mini-group {
    /* margin-left: 4px; */
    text-align: left !important;
}

.accordion-body {
    text-align: left !important;
}












/* -------------------Footer------------------ */

footer {
    padding: 30px 0;
}
.social-media-links {
    margin: 3px 8px;
    height: 40px;
}



.social-media-links a i {
    font-size: 16px;
    margin: 0 3px;
    color: white;
    border-radius: 50%;
    background-color: blue;
    padding: 6px;
}


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
    padding-top: 8px;
    padding-bottom: 40px;
  }
  
  .contact .info-item+.info-item {
    margin-top: 40px;
  }
  
  .contact .info-item i {
    color: var(--contrast-color);
    background: var(--accent-color);
    font-size: 20px;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
    margin-right: 15px;
  }
  
  .contact .info-item h3 {
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
  }
  
  .contact .info-item p {
    padding: 0;
    margin-bottom: 0;
    font-size: 14px;
  }
  
  .contact .php-email-form {
    height: 100%;
  }
  
  .contact .php-email-form .error-message {
    display: none;
    background: #df1529;
    color: #ffffff;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
  }
  
  .contact .php-email-form .sent-message {
    display: none;
    color: #ffffff;
    background: #059652;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
  }
  
  .contact .php-email-form .loading {
    display: none;
    background: var(--background-color);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
  }
  
  .contact .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid var(--accent-color);
    border-top-color: var(--background-color);
    animation: animate-loading 1s linear infinite;
  }
  
  .contact .php-email-form input[type=text],
  .contact .php-email-form input[type=email],
  .contact .php-email-form textarea {
    font-size: 14px;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 0;
    color: var(--default-color);
    background-color: color-mix(in srgb, var(--background-color), transparent 50%);
    border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  }
  
  .contact .php-email-form input[type=text]:focus,
  .contact .php-email-form input[type=email]:focus,
  .contact .php-email-form textarea:focus {
    border-color: var(--accent-color);
  }
  
  .contact .php-email-form input[type=text]::placeholder,
  .contact .php-email-form input[type=email]::placeholder,
  .contact .php-email-form textarea::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 70%);
  }
  
  .contact .php-email-form button[type=submit] {
    color: var(--contrast-color);
    background: var(--accent-color);
    border: 0;
    padding: 10px 30px 12px 30px;
    transition: 0.4s;
    border-radius: 50px;
  }
  
  .contact .php-email-form button[type=submit]:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
  }
  
  @keyframes animate-loading {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }