/*-----------------------------------------------
Template Name: Montra - Film & Video Production HTML Bootstrap Template
Author:  https://themeforest.net/user/fox_creation
Description: Montra is a modern and elegant HTML5 Bootstrap template designed for Film & Video Production Studios. This creative template is perfect for any business or service related to film studios, video production, videography, filmmaking, movie creation, film agencies, video editing, production houses, creative studios, short films, cinematic projects, video portfolios, and all other Film & Video Production websites. It provides a clean layout, professional design, and smooth user experience to help showcase your visual projects in the best way possible.

Version: 1.0.0
-----------------------------------------------*/

/*--------------------------------------------------------------
# MAIN STYLESHEET – TABLE OF CONTENTS
--------------------------------------------------------------*/

/* 01. Import Vendor
/* 02. Global Settings
/* 03. Keyframes Animation
/* 04. Base Style
/* 05. Base Section
/* 06. Base Container
/* 07. Font & Color Styles
/* 08. Button Styles
/* 09. Card Styles
/* 10. Image Styles
/* 11. Header Styles
/* 12. Sidebar Styles
/* 13. Form Styles
/* 14. Banner Styles
/* 15. Heading Style
/* 16. Breadcrumb Styles
/* 17. About Style
/* 18. Achievement Style
/* 19. Project Styles
/* 20. Project Detail Style
/* 21. Video Modal Styles
/* 22. Core Service Styles
/* 23. Service Style
/* 24. Service Detail Style
/* 25. Icon Styles
/* 26. Custom List Style
/* 27. Trust Us Style
/* 28. Testimonial Styles
/* 29. Pricing Style
/* 30. Contact CTA Styles
/* 31. Team Style
/* 32. Partners Styles
/* 33. Notfound Page Style
/* 34. FAQs Style
/* 35. Blog Styles
/* 36. Blog Post Styles
/* 37. Contact Style
/* 38. Maps Style
/* 39. Footer Style
/* 40. Accordion Styles
        40.1 Service Accordion
        40.2 FAQ Accordion
/* 41. Spacing Styles
        41.1 Flexbox Spacing
        42.2 Grid Spacing
--------------------------------------------------------------*/

/* 01. Import Vendor */
@import url('../webfonts/font-family-anton.css');
@import url('../webfonts/font-family-inter.css');
@import url('../css/vendor/bootstrap.min.css');
@import url('../css/vendor/fontawesome.css');
@import url('../css/vendor/solid.css');
@import url('../css/vendor/regular.css');
@import url('../css/vendor/brands.css');
@import url('../css/vendor/swiper-bundle.min.css');

/* 02. Global Settings */

:root{
    --primary: #FFFFFF;
    --secondary: #101217;
    --text-color: #C9CED8;
    --accent-color: #168BFF;
    --accent-color-2: #0E6BD1;
    --accent-color-3: #1A1D24;
    --accent-color-4: #02010100;
    --accent-color-5: #050608;
    --accent-color-6: #C9CED8;
    --accent-color-7: #C9CED8;
    --accent-color-8: #FFFFFF75;
    --accent-video-modal: #00000073;
    --accent-sidebar-overlay: #33333380;
    --font-family-1: "Anton", sans-serif;
    --font-family-2: "Inter", sans-serif;
}

/* 03. Keyframes Animation */


@property --progress {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

@keyframes load {
    to {
        --progress: var(var(--value))
    }
}

@keyframes ripple {
    from {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transform-origin: center;
        border-width: 0px;
    }

    to {
        opacity: 0;
        transform: scale3d(1.7, 1.7, 1.8);
        transform-origin: center;
        border-width: 13px;
    }
}

@keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes circle-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

/* 04. Base Style */

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

body{
    font-family: var(--font-family-2);
    font-size: 16px;
    color: var(--primary);
    background-color: var(--secondary);
}

h1{
    font-size: 115px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.1em;
}

h2{
    font-size: 80px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1em;
}

h3{
    font-size: 48px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1em;
}

h4{
    font-size: 32px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.2em;
}
h5{
    font-size: 21px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.2em;
}
h6{
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--font-family-1);
    margin-bottom: 0;
}

p{
    font-family: var(--font-family-2);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6em;
    color: var(--text-color);
}

button, a{
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1em;
    letter-spacing: 1px;
    text-decoration: none;
}

ul{
    list-style: none;
}

/* 05. Base Section */

.section{
    padding: 120px 20px 120px 20px;
}

.section-banner-home{
    padding: 0px;
    position: relative;
    overflow: hidden;
}

.section-core-service{
    padding: 120px 20px 120px 20px;
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
}

.section-small{
    padding: 0px 0px 0px 0px;
}

.section-footer{
    padding: 120px 20px 20px 20px;
    background-color: var(--accent-color);
    color: var(--primary);
}

/* 06. Base Container */

.hero-container{
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* 07. Font & Color Styles */

.font-family-1{
    font-family: var(--font-family-1);
}

.font-family-2{
    font-family: var(--font-family-2);
}

.accent-color{
    color: var(--accent-color);
}

.bg-accent-color{
    background-color: var(--accent-color);
}

.bg-accent-color-5{
    background-color: var(--accent-color-5);
}

/* 08. Button Styles */

.btn{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1em;
    letter-spacing: 1px;
    text-decoration: none;
    text-align: center;
    border-radius: 0px;
    padding: 17px 34px 17px 34px;
    transition: all 300ms;
}

.btn-accent{
    background-color: var(--accent-color);
    color: var(--primary);
}

.btn-accent:hover{
    background-color: var(--accent-color-2);
}

.btn-accent-primary{
    background-color: var(--primary);
    color: var(--accent-color);
}

.btn-accent-primary:hover{
    background-color: var(--accent-color-2);
    color: var(--primary);
}

.btn-service-detail-cta{
    width: 70px;
    min-height: 70px;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--accent-color);
    transform: rotateZ(-45deg);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-self: center;
    transition: all 300ms
}

.btn-service-detail-cta:hover{
    background-color: var(--primary);
    color: var(--accent-color);
    transform: rotate(0deg);
}

.btn-pricing{
    justify-content: center;
}

/* 09. Card Styles */

.card{
    border: none;
    border-radius: 0px;
}

.card-core-service{
    width: 48.5%;
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
    padding: 30px 30px 30px 30px;
    background-color: var(--accent-color-3);
    color: var(--primary);
}

.card-core-service.highlight-core{
    background-color: var(--accent-color);
}

.card-core-service:nth-child(even){
    margin-bottom: -46px;
}

.card-trust-us{
    background-color: var(--secondary);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 100px;
    padding: 30px 30px 30px 30px;
    width: auto;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-trust-us .card-number-wrapper{
    display: flex;
    flex-direction: row;
    position: absolute;
    top: -30px;
    left: -45px;
    width: 220px;
    transform: rotateZ(90deg);
}

.card-trust-us .card-number{
    font-family: var(--font-family-1);
    font-size: 200px;
    line-height: 1em;
    -webkit-text-stroke-width: 2px;
    stroke-width: 2px;
    -webkit-text-stroke-color: var(--accent-color-3);
    stroke: var(--accent-color-3);
    color: var(--accent-color-4);
}

.card-pricing{
    background-color: var(--accent-color-5);
    color: var(--primary);
    padding: 30px 30px 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.card-testimonial{
    background-color: var(--accent-color-3);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 30px 30px 30px;
}

.card-testimonial .testimonial-designation{
    font-family: var(--font-family-2);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5em;
    color: var(--accent-color);
    margin: 0px;
}

.card-post-quote{
    background-color: var(--accent-color-3);
    color: var(--primary);
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 50px 50px 50px 50px;
}

.card-blog{
    background-color: var(--accent-color-3);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 0px;
    position: relative;
    overflow: hidden;
}

.card-blog:hover .blog-image img{
    transform: scale(1.05) rotate(2deg);
    opacity: 0.8;
}

.card-blog-content{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 30px 30px 30px;
}

.card-blog .blog-title{
    color: var(--primary);
    font-family: var(--font-family-1);
    font-size: 32px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.2em;
    letter-spacing: normal;
    transition: all 300ms;
}

.card-blog .blog-title:hover{
    color: var(--accent-color);
}

.card-blog-post{
    background-color: var(--accent-color-5);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 30px 30px 30px 30px;
}

.card-service-detail-include{
    background-color: var(--accent-color-3);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: center;
    padding: 30px 30px 30px 30px;
    width: auto;
    height: 100%;
}

.card-service-detail-include.cta-card{
    background-color: var(--accent-color);
}

.card-project-detail{
    background-color: var(--accent-color-5);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 30px 30px 30px 30px;
}

.card-contact-form{
    display: flex;
    flex-direction: column;
    gap: 30px 30px;
    background-color: var(--accent-color-5);
    color: var(--primary);
    padding: 40px 40px 40px 40px;
}

/* 10. Image Styles */

.image-container{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
}
.image-container img{
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
}

.team-image img{
    width: 100%;
    height: 430px;
}

.core-service-image{
    width: 40%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.testimonial-image{
    display: block;
    width: 60px;
    min-height: auto;
    border: 3px solid var(--accent-color);
    border-radius: 100px;
    position: relative;
    overflow: hidden;
}

.partner-image{
    max-width: 100%;
    height: auto;
    opacity: 0.5;
    transition: all 300ms;
}

.blog-image img{
    opacity: 1;
    transition: all 300ms;
}

.post-image img{
    width: 100%;
    height: 420px;
}

.partner-image:hover{
    opacity: 1;
}

.service-detail-ideal-img img{
    width: 100%;
    height: 335px;
    object-fit: cover;
    object-position: center;
}

/* 11. Header Styles */


.navbar-container {
    padding: 20px 20px 0px 20px;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    z-index: 10;
}

.navbar{
    background-color: transparent;
    border-radius: 20px 20px 20px 20px;
    position: relative;
    padding: 0px;
    z-index: 1;
}

.navbar-nav-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 20px 20px 20px;
}

.navbar-nav{
    flex-wrap: wrap;
    justify-content: center;
}

.navbar .logo-container{
    width: 18%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.navbar .logo-container img{
    width: 100%;
}

.navbar .nav-link-container{
    width: 64%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav-link{
    font-family: var(--font-family-2);
    font-size: 18px;
    font-weight: 500;
    line-height: 1em;
    text-transform: capitalize;
    color: var(--primary);
    padding: 15px 15px 15px 15px;
}

.nav-link:hover{
    color: var(--accent-color);
}

.nav-link:focus,
.nav-link.active,
.navbar-nav .nav-link.show{
    color: var(--accent-color-2) !important;
}

.dropdown-menu {
    background-color: var(--accent-color-3);
    color: var(--primary);
    border-radius: 0;
    border: none;
    padding: 0;
    overflow: hidden;
    margin-top: 1.125em !important;
    border-radius: 0px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
    box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
}

.dropdown-item{
    font-family: var(--font-family-2);
    font-size: 18px;
    font-weight: 00;
    line-height: 1em;
    text-transform: capitalize;
    color: var(--primary);
    transition: all 300ms;
    padding: 15px 15px 15px 15px;
}

.dropdown-item:hover,
.dropdown-item.active{
    background-color: var(--accent-color-3);
    color: var(--accent-color);
}

.dropdown-toggle::after {
    display: none !important;
}

.navbar-cta-container{
    width: 18%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.nav-btn{
    display: none;
    padding: 16px 16px;
    background-color: var(--accent-color);
    color: var(--primary);
    box-shadow: none;
    transition: all 300ms ease;
    border: none;
    border-radius: 0px 0px 0px 0px;
    box-shadow: none;
    font-size: 18px;
}

.nav-btn:hover{
    background-color: var(--primary);
    color: var(--accent-color);
}

/* 12. Sidebar Styles */

.sidebar-overlay{
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: var(--accent-sidebar-overlay);
    transition: left 0.4s ease-in-out;
    z-index: 10;
}

.sidebar-overlay.active{
    left: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: var(--secondary);
    color: var(--primary);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
    overflow-y: auto;
    max-height: 100vh;
    padding: 0px 16px 0px 5px;
}

.sidebar.active{
    transform: translateX(300px);
}

.sidebar-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 20px 20px;
}

.sidebar-header .logo {
    width: 75%;
}

.close-btn {
    display: inline-block;
    justify-content: center;
    background-color: var(--accent-color);
    border-radius: 8px 8px 8px 8px;
    color: var(--primary);
    font-weight: 600;
    position: relative;
    font-family: var(--font-family-2);
    font-size: 16px;
    cursor: pointer;
    padding: 8px 18px;
    transition: all 300ms;
    border: none;
    outline: none;
}

.close-btn:hover{
    background-color: var(--primary);
    color: var(--accent-color);
}

.menu {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.menu li {
    padding: 10px 15px 10px 15px;
}

.menu a {
    color: var(--primary);
    text-decoration: none;
    display: block;
    border-radius: 5px;
    transition: 0.3s;
    font-family: var(--font-family-2);
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: 0px;
}

.menu a:hover,
.menu a.active,
.menu a:focus {
    color: var(--accent-color);
}

.sidebar-dropdown .dropdown-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.sidebar-dropdown-btn {
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 1rem;
    cursor: pointer;
    padding: 3px 15px;
    transition: transform 0.3s ease;

}
.sidebar-dropdown-btn:hover {
    color: var(--primary);
}

.sidebar-dropdown-menu {
    list-style: none;
    padding-left: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding-top: 0;
    padding-bottom: 0;
}

.sidebar-dropdown-menu.active {
    max-height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.below-dropdown {
    transition: margin-top 0.1s ease-in-out;
    margin-top: 0px;
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 5px;
}

/* 13. Form Styles */

.form{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.form input,
.form select,
.form textarea{
    font-family: var(--font-family-2);
    font-weight: 500;
    line-height: 1.5em;
    padding: 20px 0px 20px 0px;
    background-color: transparent;
    color: var(--primary);
    outline: none;
    border: none;
    border-bottom: 1px solid var(--accent-color-3);
    width: 100%;
    transition: all 300ms;
}

.form input:focus,
.form textarea:focus{
    border-bottom: 1px solid var(--accent-color);
}

.form input:autofill,
.form textarea:autofill{
    background-color: transparent;
    color: var(--primary);
    transition: background-color 5000s ease-in-out;
    -webkit-text-fill-color: var(--primary);
    font-family: var(--font-family-2);
}

.form input::placeholder,
.form textarea::placeholder{
    color: var(--primary);
}

.form .dropdown-container {
    position: relative;
    width: 100%;
}

.form .dropdown-select {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--accent-color-3);
    border-radius: 0px 0px;
    color: var(--primary);
    outline: none;
    padding: 20px 0px 20px 0px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px 20px;
    z-index: 2;
}

.form .dropdown-select i{
    color: var(--accent-color);
}

.form .dropdown-select:focus{
    border-bottom: 1px solid  var(--accent-color);
}

.form .dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: transparent;
    color: var(--primary);
    border: none;
    border-radius: 0;
    z-index: 10;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
}

.form .dropdown-container.active .dropdown-list {
    display: block;
}

.form .dropdown-option {
    background-color: var(--accent-color-3);
    padding: 20px 20px 20px 20px;
    border-radius: 0px 0px 0px 0px;
    border: none;
    border-bottom: 1px solid var(--accent-color-3);
    color: var(--primary);
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    transition: background-color 0.2s, color 0.2s;
}

.form .dropdown-option:hover {
    color: var(--accent-color);
}

.form .dropdown-option.selected {
    color: var(--accent-color);
    font-weight: 600;
}

.form .selected-text {
    color: var(--text-color);
    transition: color 0.2s ease;
}

.form .selected-text.has-value {
    color: var(--primary);
}

#newsletter-form{
    display: flex;
    flex-direction: row;
    gap: 0px 0px;
    align-items: flex-end;
    flex-wrap: nowrap;
    width: 100%;
}

#newsletter-form input{
    font-family: var(--font-family-1);
    font-size: 16px;
    border: none;
    border-bottom: 1px solid var(--primary);
    outline: none;
    background-color: transparent;
    color: var(--primary);
    padding: 10px 0px 0px 0px;
    width: 65%;
}

#newsletter-form input::placeholder{
    font-family: var(--font-family-1);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2em;
    text-transform: lowercase;
    color: var(--primary);
}

#newsletter-form button{
    width: 35%;
    flex-wrap: nowrap;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2em;
    border-radius: 6px;
    margin-bottom: 15px;
  }

.success {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--primary);
    color: var(--secondary);
}

.success span,
.success p{
    color: var(--secondary);
}
  
.error {
    display: flex;
    flex-direction: column;
    gap: 1em;
    background-color: var(--primary);
    color: var(--secondary);
}

.error span,
.error p{
    color: var(--secondary);
}
  
.check-icon,
.cross-icon {
    font-size: 1.5rem;
    margin-right: 10px;
}

.hidden{
    display: none;
}

/* 14. Banner Styles */

.banner-home-video{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    min-height: 100vh;
    padding: 120px 20px 0px 20px;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.banner-home-video::before{
    content: "";
    position: absolute;
    inset: 0;
    background-color: transparent;
    background-image: radial-gradient(at top left, #12121259 0%, var(--secondary) 100%);
    z-index: 1;
}

.banner-home-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding-bottom: 80px;
}

#banner-video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 150%;
    height: 150%;
    z-index: 0;
}

.service-content-banner{
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.service-content-banner::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: radial-gradient(at top center, var(--accent-color) 0%, var(--accent-color-4) 31%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.22;
    z-index: -1;
}

.contact-cta-banner{
    background-color: var(--accent-color);
    color: var(--primary);
    padding: 80px 80px 80px 80px;
    border-radius: 100px 0px 100px 0px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0px 0px;
    align-items: flex-start;
    overflow: hidden;
    z-index: 0;
}

.home-spacer{
    width: 230px;
    border: 23px solid var(--accent-color);
    border-radius: 35px 0px 35px 0px;
}

.home-title-container{
    display: flex;
    flex-direction: column;
    width: 67%;
    text-align: start;
    align-items: start;
    height: 100%;
}

.home-spacer .spacer-inner{
    height: 50px;
}

.home-avatar-container{
    width: 30%;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    text-align: start;
    align-items: start;
    gap: 20px 20px;
}

.banner-avatar {
    display: inline-block;
    vertical-align: middle;
    background-color: var(--accent-color);
    width: 50px;
    min-height: 50px;
    border-radius: 100px 100px 100px 100px;
    object-fit: cover;
    border: 5px solid var(--accent-color);
}
.banner-avatar:not(:nth-child(1)){
    margin-left: -15px;
}

.home-divider{
    width: 100%;
    border-bottom: 3px solid var(--primary);
}

.banner-inner {
    position: relative;
    padding: 180px 20px 120px 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.banner-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: brightness(100%) contrast(124%) saturate(0%) blur(0px) hue-rotate(0deg);
    mix-blend-mode: overlay;
    opacity: 1;
    z-index: 0;
}

.banner-notfound{
    min-height: 100vh;
}

.banner-inner.about-banner::before{
    background-image: url('../images/north-star-led-hero-poster-1920x1080.jpg');
}

.banner-inner.service-banner::before{
    background-image: url('../images/north-star-led-hero-poster-1920x1080.jpg');
}

.banner-inner.service-detail-banner::before{
    background-image: url('../images/dummy-img-1920x900-2.jpg');
}

.banner-inner.pricing-banner::before{
    background-image: url('../images/north-star-led-hero-poster-1920x1080.jpg');
}

.banner-inner.project-banner::before{
    background-image: url('../images/dummy-img-1920x900-2.jpg');
}

.banner-inner.project-detail-banner::before{
    background-image: url('../images/dummy-img-1920x900-2.jpg');
}

.banner-inner.team-banner::before{
    background-image: url('../images/dummy-img-1920x900-2.jpg');
}

.banner-inner.testimonial-banner::before{
    background-image: url('../images/dummy-img-1920x900-2.jpg');
}

.banner-inner.blog-banner::before{
    background-image: url('../images/dummy-img-1920x900-2.jpg');
}

.banner-inner.single-post-banner::before{
    background-image: url('../images/dummy-img-1920x900-2.jpg');
}

.banner-inner.notfound-banner::before{
    background-image: url('../images/dummy-img-1920x900-2.jpg');
}

.banner-inner.contact-banner::before{
    background-image: url('../images/north-star-led-hero-poster-1920x1080.jpg');
}

.banner-inner-container{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    z-index: 1;
}

.cta-highlight-banner{
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.cta-highlight-banner::before{
    content: '';
    position: absolute;
    background-color: var(--secondary);
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.65;
    z-index: 0;
}

.cta-highlight-video{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 150%;
    height: 150%;
    z-index: -1;
}

.cta-highlight-content{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: flex-start;
    align-items: start;
    text-align: start;
    width: 40%;
    z-index: 2;
}

/* 15. Heading Style */

.heading-container{
    display: flex;
    flex-direction: row;
    padding-left: 20px;
    border-left: 5px solid var(--accent-color);
    position: relative;
    overflow: hidden;
}

/* 16. Bread Crumbstyles */

.breadcrumb{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.breadcrumb-item{
    font-family: var(--font-family-2);
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1.5em;
    color: var(--accent-color);
    margin: 0 !important;
    padding: 0 !important;
}

.breadcrumb-icon{
    font-family: var(--font-family-1);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--primary);
}

.breadcrumb-item.current{
    color: var(--primary);
}

/* 17. About Style */

.about-tagline{
    color: var(--primary);
    font-family: var(--font-family-2);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    width: 51%;
}

.about-circle-logo-container {
    max-width: 50%;
    display: flex;
    justify-content: start;
    align-items: end;
    overflow: visible;
    position: relative;
    z-index: 2;
  }

.about__circle-logo {
    width: 100%;
    height: auto;
    animation: circle-spin 6s linear infinite;
    transform-origin: center center;
    overflow: visible;
}

.about__circle-logo svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.about__circle-logo circle {
    fill: var(--accent-color);
}

.about__circle-logo text {
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--primary);
    fill: var(--primary);
}

.about__circle-logo textPath {
    letter-spacing: 2px;
    dominant-baseline: middle;
}

.about__circle-logo-image {
    transform: none;
    animation: none;
}

/* 18. Achievement Style */

.achievement-container{
    display: flex;
    flex-direction: row;
    gap: 0px 0px;
    width: 100%;
    align-self: stretch;
    padding: 50px 50px 50px 50px;
    border-radius: 50px 0px 50px 0px;
    background-color: var(--accent-color-5);
    color: var(--primary);
    align-items: center;
    justify-content: space-between;
}

.achievement-content{
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px 20px;
}

.achievement-stat-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px 5px;
}

.achievement-stat{
    color: var(--primary);
    font-family: var(--font-family-1);
    font-size: 80px;
    font-weight: 400;
    line-height: 1em;
}

.achievement-suffix{
    font-family: var(--font-family-1);
    font-size: 100px;
    font-weight: 400;
    line-height: 0.6em;
    color: var(--accent-color);
}

/* 19. Project Styles */

.project-section-content{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.project-heading-container {
    position: sticky;
    top: 15vh;
    margin-bottom: -100px;
    z-index: 0;
    text-align: center;
    pointer-events: none;
}

.section-project-fade {
    opacity: 0;
    transform: translateY(-30px);
}

.project-content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 120px;
    overflow: hidden;
    z-index: 2;
}

.project-section-heading{
    font-family: var(--font-family-1);
    font-size: 200px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.1em;
    text-align: center;
    color: var(--accent-color-8);
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
}

.project-section-heading.is-hidden {
    opacity: 0;
    transform: translateY(-10px);
}

.project-video-container{
    background-color: var(--secondary);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 295px;
}

.project-video-container.project-video-container--tall{
    min-height: 500px;
}

.project-video-container--wide{
    width: 100%;
    min-height: 400px;
}

.project-title a{
    color: var(--primary);
    font-size: 48px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1em;
    transition: all 300ms;
}

.project-title:hover a{
    color: var(--accent-color);
}

.project-category{
    color: var(--primary);
    font-family: var(--font-family-2);
    font-size: 18px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    line-height: 1.5em;
    transition: all 300ms;
}

.project-category:hover{
    color: var(--accent-color);
}

.project-video-bg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    pointer-events: none;
    z-index: 1;
}

.project-video-bg#video-bg-3 {
    width: 100vw;
    height: 100vw;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
}

/* 20. Project Detail Style */

.project-detail-content-container{
    display: flex;
    flex-direction: column;
    gap: 80px 80px;
    position: relative;
    overflow: hidden;
}

.project-result{
    color: var(--primary);
    font-family: var(--font-family-1);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.5em;
    text-transform: uppercase;
}

.project-result .result-link{
    color: var(--accent-color);
    font-family: var(--font-family-1);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.5em;
    text-transform: uppercase;
    transition: color 300ms;
}

.project-result .result-link:hover{
    color: var(--accent-color-2);
}

.project-detail-video-container{
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.project-detail-video-spacer{
    height: 470px;
}

/* 21. Video Modal Styles */

.request-loader {
    position: relative;
    width: auto;
    height: 70px;
    border-radius: 50% !important;
    border: none;
    background-color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    font-size: 18px;
    aspect-ratio: 1/1;
    transition: all 300ms ease-in-out;
    z-index: 2;
}

.request-loader:hover {
    border: none;
    color: var(--primary);
    background-color: var(--accent-color-2);
}

.request-loader::after,
.request-loader::before {
    opacity: 0.2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    color: var(--accent-color);
    border: 4px solid currentColor;
    border-radius: 50%;
    animation-name: ripple;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65, 0, .34, 1);
    z-index: 0;
}

.request-loader::after {
    animation-delay: 0.5s;
    animation-duration: 3s;
}

.request-loader::before {
    animation-delay: 0.2s;
    animation-duration: 3s;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-video-modal);
    z-index: 1050;
    justify-content: center;
    align-items: center;
}

.my-modal {
    background-color: var(--secondary);
    padding: 0;
    border-radius: none;
    position: relative;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
}

.my-modal iframe {
    aspect-ratio: 16/9;
    width: 100%;
    height: 80vh;
}

.my-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: var(--font-size-3xl);
    cursor: pointer;
    font-weight: bold;
    color: var(--accent-color-2);
}

.btn-close {
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: var(--accent-color-2);
    padding: 16px 16px 16px 16px;
    opacity: 1;
    z-index: 2001;
}

/* 22. Core Service Styles */

.core-service-heading-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 20px;
    overflow: visible;
}

.core-heading-container {
    flex: 0 0 47%;
    max-width: 47%;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    z-index: auto;
  }

.core-service-logo-container {
    flex: 0 0 15%;
    max-width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    position: relative;
    z-index: 2;
  }

.core-service__circle-logo {
    width: 100%;
    height: auto;
    animation: circle-spin 6s linear infinite;
    transform-origin: center center;
    overflow: visible;
}

.core-service__circle-logo svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.core-service__circle-logo circle {
    fill: var(--accent-color);
}

.core-service__circle-logo text {
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--primary);
    fill: var(--primary);
}

.core-service__circle-logo textPath {
    letter-spacing: 2px;
    dominant-baseline: middle;
}

.core-service__circle-logo-image {
    animation: none;
    transform: none;
}

.core-service-heading.heading-fill{
    position: relative;
    color: var(--primary);
    z-index: 1;
}

.core-service-heading.heading-stroke{
    position: absolute;
    top: 0;
    left: 0;
    -webkit-text-stroke-width: 2px;
    stroke-width: 2px;
    -webkit-text-stroke-color: var(--primary);
    stroke: var(--primary);
    color: var(--accent-color-4);
    z-index: 3;
}

.core-service-description{
    width: 47%;
    align-self: center;
    text-align: start;
}

.core-service-card-container{
    display: flex;
    flex-direction: row;
    width: 60%;
    height: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 23px 0px;
    align-items: flex-end;
    align-self: flex-end;
}

/* 23. Service Style */

.service-title-wrapper {
    display: flex;
    flex-direction: row;
    gap: 30px;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    width: 100%;
}
.service-title-wrapper .service-title-heading {
    width: 29%;
}
.service-title-wrapper .service-title-description {
    width: 27%;
}
.service-title-wrapper .service-title-cta {
    width: 26%;
    display: flex;
    justify-content: flex-end;
}

.service-content-container{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    min-height: 500px;
    padding: 0px 0px 0px 0px;
    background-color: var(--secondary);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.service-video-bg{
    width: 150%;
    height: 150%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* disable interaction */
    overflow: hidden;
    z-index: 0;
}

.service-video-content{
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    background-color: #1212122B;
    color: var(--primary);
    padding: 30px 30px 30px 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.service-video-content::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}

.service-description-content{
    width: 56%;
}

.service-tag-container{
    width: 33%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: center;
    gap: 5px 5px;
}

.service-tag{
    display: inline-block;
    background-color: var(--accent-color-4);
    color: var(--primary);
    padding: 5px 10px;
    border: 1px solid var(--accent-color);
    border-radius: 100px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    line-height: 1em;
    font-family: var(--font-family-2);
}

/* 24. Service Detail Style */

.service-detail-content-container{
    display: flex;
    flex-direction: column;
    gap: 80px 80px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.service-detail-video-container{
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.service-detail-video-spacer{
    height: 470px;
}

.service-detail-cta-container{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

/* 25. Icon Styles */

.social-icon{
    width: 45px;
    min-height: 45px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--primary);
    font-size: 16px;
    line-height: 1;
    transition: all 300ms;
}

.social-icon:hover{
    background-color: var(--accent-color-2);
    transform: scale(0.9);
}

.social-icon-post{
    width: 40px;
    min-height: 40px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--primary);
    font-size: 16px;
    line-height: 1;
    transition: all 300ms;
}

.social-icon-post:hover{
    background-color: var(--accent-color-2);
    transform: scale(0.9);
}

.footer-icon{
    width: 45px;
    min-height: 45px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--accent-color);
    font-size: 21px;
    line-height: 1;
    transition: all 300ms;
}

.footer-icon:hover{
    background-color: var(--accent-color-2);
    color: var(--primary);
}

.core-service-icon{
    width: 60px;
    min-height: 60px;
}

.trust-us-icon{
    display: flex;
    flex-direction: row;
    width: 60px;
    min-height: 60px;
    justify-content: center;
    align-self: flex-end;
}

/* 26. Custom List Style */

.pricing-detail-list{
    list-style: none;
    padding-left: 0;
}

.pricing-detail-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    margin-bottom: 10px;
    color: var(--primary);
    font-family: var(--font-family-2);
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1.5em;
}

.pricing-detail-list li:last-child{
    margin-bottom: 0px;
}

.pricing-detail-list li::before {
    content: "\f058";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--primary);
    margin-right: 0.5em;
    font-size: 18px;
    display: inline-block;
}

.dot-list{
    list-style: none;
    padding-left: 0;
}
.dot-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    margin-bottom: 10px;
}

.dot-list li p{
    margin-bottom: 0px;
}

.dot-list li:last-child{
    margin-bottom: 0px;
}

.dot-list li::before {
    content: "\f111";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--accent-color);
    margin-right: 16px;
    font-size: 12px;
    display: inline-block;
}

.service-detail-list{
    list-style: none;
    padding-left: 0;
}

.service-detail-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    margin-bottom: 10px;
    color: var(--primary);
    font-family: var(--font-family-1);
    font-size: 21px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.5em;
}

.service-detail-list li:last-child{
    margin-bottom: 0px;
}

.service-detail-list li::before {
    content: "\f058";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--accent-color);
    margin-right: 0.5em;
    font-size: 21px;
    display: inline-block;
}

.chevron-circle-list{
    list-style: none;
    padding-left: 0;
}

.chevron-circle-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    margin-bottom: 10px;
}

.chevron-circle-list a{
    color: var(--primary);
    font-family: var(--font-family-2);
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1.5em;
}

.chevron-circle-list li:last-child{
    margin-bottom: 0px;
}

.chevron-circle-list li::before {
    content: "\f138";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--primary);
    margin-right: 0.5em;
    font-size: 18px;
    display: inline-block;
}

/* 27. Trust Us Style */

.trust-us-cta{
    display: flex;
    flex-direction: row;
    gap: 10px 10px;
    align-items: center;
    transition: all 300ms;
}

.trust-us-cta a,
.trust-us-cta i{
    font-size: 14px;
    color: var(--primary);
    transition: all 300ms;
}

.trust-us-cta:hover{
    transform: scale(0.9);
}

.trust-us-cta:hover a,
.trust-us-cta:hover i{
    color: var(--accent-color);
}

.trust-us-stat-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px 5px;
}

.trust-us-stat{
    color: var(--primary);
    font-family: var(--font-family-1);
    font-size: 115px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.1em;
}

.trust-us-suffix{
    font-family: var(--font-family-1);
    font-size: 100px;
    font-weight: 400;
    line-height: 0.6em;
    color: var(--accent-color);
}

.trustus-avatar-container{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

/* 28. Testimonial Styles */

.testimonial-banner-container{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 600px;
    align-items: flex-end;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#testimonial-video-background {
    position: absolute;
    background-color: transparent;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vw;
    transform: translate(-50%, -50%);
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
}

.testimonial-banner-container::before{
    content: "";
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-4) 30%, var(--secondary) 94%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.testimonial-banner-content{
    position: relative;
    z-index: 2;
    text-align: center;
    align-self: flex-end;
    width: 82%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.testimonial-card-container{
    padding: 0px 20px 120px 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.testimonial-card-wrapper {
    position: absolute;
    min-height: 100%;
    top: 0;
    left: 0;
    opacity: 0.9;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.testimonial-card-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-4) 0%, var(--secondary) 89%);
    z-index: -1;
}

.testimonial-card-wrapper .spacer{
    height: 50px;
}

.testimonial-icon{
    font-size: 3rem;
    color: var(--accent-color);
}

.testimonial-heading{
    font-family: var(--font-family-1);
    font-size: 21px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.2em;
}

/* 29. Pricing Style */

.pricing-content-container{
    display: flex;
    flex-direction: column;
    gap: 80px 0px;
    position: relative;
    overflow: hidden;
}

.pricing-content-title{
    width: 35%;
    position: relative;
    z-index: 1;
}

.heading-highlight-container{
    position: absolute;
    top: 20px;
    right: 120px;
    display: flex;
    flex-direction: column;
    width: 46%;
    z-index: 0;
}

.pricing-heading-highlight{
    font-family: var(--font-family-1);
    font-size: 200px;
    line-height: 1em;
    text-transform: uppercase;
    -webkit-text-stroke-width: 2px;
    stroke-width: 2px;
    -webkit-text-stroke-color: var(--accent-color-3);
    stroke: var(--accent-color-3);
    color: var(--accent-color-4);
}

.pricing-description{
    font-family: var(--font-family-2);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5em;
}

.card-pricing .price{
    color: var(--accent-color);
    font-family: var(--font-family-1);
    font-size: 48px;
    font-weight: 500;
    line-height: 1em;
    text-transform: uppercase;
}

.pricing-divider{
    border-bottom: 1px solid var(--accent-color-7);
}

/* 30. Contact CTA Styles */

.contact-cta-title-container{
    position: relative;
    width: 87%;
    z-index: auto;
}

.contact-cta-text-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: -80px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: auto;
    width: 47%;
    align-self: end;
    text-align: start;
    z-index: 3;
}

.contact-cta-title{
    font-size: 115px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.1em;
    text-align: start;
}

.contact-cta-title.heading-fill{
    position: relative;
    color: var(--primary);
    z-index: 1;
}

.contact-cta-title.heading-stroke{
    position: absolute;
    top: 0;
    left: 0;
    -webkit-text-stroke-width: 2px;
    stroke-width: 2px;
    -webkit-text-stroke-color: var(--primary);
    stroke: var(--primary);
    color: var(--accent-color-4);
    z-index: 3;
}

.contact-cta-image{
    position: absolute;
    left: -50px;
    bottom: 0;
    width: 58%;
    z-index: 2;
}

/* 31. Team Style */

.team-title-container{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    position: sticky;
    text-align: start;
    top: 20px;
    z-index: 10;
    text-align: start;
    justify-content: start;
    align-items: start;
}

.team-container{
    display: flex;
    flex-direction: column;
    gap: 30px 30px;
}

/* 32. Partners Styles */

.partners-container{
    background-color: var(--accent-color-5);
    color: var(--primary);
    padding: 50px 50px 50px 50px;
    border-radius: 50px 0px 50px 0px;
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.partnership-title-content{
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1.5em;
    text-align: center;
    font-family: var(--font-family-2);
    color: var(--accent-color);
}

.swiperpartner{
    margin: 0px;
}

/* 33. Notfound Page Section */

.banner-notfound-container{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    z-index: 1;
}

.banner-notfound-container .btn{
    align-self: center;
}

.notfound-heading{
    font-family: var(--font-family-1);
    font-size: 200px;
    font-weight: 400;
    line-height: 1em;
    color: var(--accent-color);
}

.notfound-description{
    width: 60%;
}

/* 34. FAQs Style */

.faq-content-wrapper{
    display: grid;
    grid-template-columns: 0.35fr 0.58fr;
    gap: 0px 80px;
    justify-content: space-between;
}

.faq-contact-wrapper{
    display: flex;
    flex-direction: column;
    gap: 80px 80px;
}

.faq-heading-container{
    width: 48%;
    align-self: center;
    text-align: center;
}

/* 35. Blog Styles */

.blog-content-container{
    display: flex;
    flex-direction: column;
    gap: 80px 80px;
}

.blog-content-container .section-title{
    width: 70%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* 36. Blog Post Styles */

.post-quote-icon{
    font-size: 115px;
    color: var(--accent-color);
}

.post-quote-text{
    color: var(--primary);
    font-family: var(--font-family-1);
    font-size: 32px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.2em;
}

.post-quote-author{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5em;
    color: var(--text-color);
}

.blog-post-divider{
    border-bottom: 1px solid var(--accent-color-3);
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

.post-tag-container{
    width: 67%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 10px;
}

.post-tag{
    display: inline-block;
    background-color: var(--accent-color-4);
    color: var(--primary);
    padding: 5px 10px;
    border: 1px solid var(--accent-color);
    border-radius: 100px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    line-height: 1em;
    font-family: var(--font-family-2);
}

.recent-blog-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.recent-blog-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.recent-blog-item img {
    max-width: 100%;
    width: 105px;
    height: auto;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 150/150;
}

.recent-blog-date {
    font-family: var(--font-family-2);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    display: block;
    margin-bottom: 2px;
}

.recent-blog-heading {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5em;
    color: var(--primary);
    text-transform: capitalize;
    font-family: var(--font-family-2);
}

.recent-blog-item:hover .recent-blog-heading {
    color: var(--accent-color);
    transition: 0.2s ease;
}


/* 37. Contact Style */

.contact-content-wrapper{
    display: flex;
    flex-direction: column;
    gap: 80px 80px;
}

.contact-content-heading{
    font-size: 115px;
    animation: fade-in-left 1s ease-in;
}

.contact-description-container{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: end;
    margin-left: auto;
    width: 60%;
    height: 100%;
}

.contact-info-heading{
    font-family: var(--font-family-2);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6em;
    color: var(--text-color);
}

/* 38. Maps Style */

.maps{
    max-width: 100%;
    width: 100%;
    line-height: 1;
    height: 400px;
    filter: brightness(69%) contrast(200%) saturate(0%) blur(0px) hue-rotate(0deg);
    overflow: hidden;
}

/* 39. Footer Style */

.footer-container{
    display: flex;
    flex-direction: column;
    gap: 65px 50px;
}

.social-footer-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px 10px;
}

.footer-info-container{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    width: 51%;
}

.footer-info{
    font-family: var(--font-family-2);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5em;
}

.footer-newsletter-container{
    display: flex;
    flex-direction: column;
    gap: 40px 0px;
    width: 100%;
}

.footer-title-container{
    display: flex;
    flex-direction: column;
    min-height: 150px;
    justify-content: flex-end;
    overflow: hidden;
    border-bottom: 5px solid var(--primary);
    padding: 0px 0px 0px 0px;
}

.footer-title{
    text-align: center;
    font-family: var(--font-family-1);
    font-size: 200px;
    font-weight: 400;
    line-height: 1em;
    margin-bottom: -59px;
    text-transform: uppercase;
}

.footer-newsletter-container .container-title{
    width: 42%;
}

.footer-copyright-container{
    background-color: var(--accent-color-2);
    width: 100%;
    color: var(--primary);
    display: flex;
    flex-direction: row;
    gap: 10px 10px;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px 30px 40px;
    border-radius: 40px 0px 40px 0px;
}

.legallink,
.copyright{
    font-family: var(--font-family-2);
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5em;
    text-transform: capitalize;
    text-align: start;
    letter-spacing: 0px;
}

/* 40. Accordion Style */

.accordion{
    display: flex;
    flex-direction: column;
    gap: 30px 30px;
}

.accordion .accordion-item {
    background-color: transparent                                                   ;
    border: none;
    outline: none;
    overflow: hidden;
}

.accordion .accordion-item .accordion-header{
    border: none;
    border-bottom: 1px solid var(--accent-color-6);
    position: relative;
    overflow: hidden;
}

.accordion .accordion-item .accordion-body{
    padding: 30px 0px 30px 0px;
}

/* 40.1 Service Accordion */

.accordion .accordion-item .service-accordion-header {
    padding-left: 0;
}

.accordion-item.service-acc-1 .service-accordion-header {
    padding-left: 350px;
}

.accordion-item.service-acc-2 .service-accordion-header {
    padding-left: 170px;
}

.accordion-item.service-acc-3 .service-accordion-header {
    padding-left: 450px;
}

.accordion-item.service-acc-4 .service-accordion-header {
    padding-left: 250px;
}

.accordion-item.service-acc-5 .service-accordion-header {
    padding-left: 70px;
}

.accordion-item .service-accordion-header .accordion-button{
    background-color: transparent;
    border: 0px;
    font-family: var(--font-family-1);
    font-size: 115px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.1em;
    box-shadow: none;
    -webkit-text-stroke-width: 2px;
    stroke-width: 2px;
    -webkit-text-stroke-color: var(--primary);
    stroke: var(--primary);
    color: var(--accent-color-4);
    margin-block-end: -30px;
    padding: 0px 0px 0px 0px;
}

.accordion-item .service-accordion-header .accordion-button::after{
    display: none;
}

.accordion-item .service-accordion-header .accordion-button:not(.collapsed){
    color: var(--primary) !important;
}

/* 40.2. FAQ Accordion */

.accordion-item .faq-accordion-header .accordion-button{
    background-color: transparent;
    color: var(--primary);
    border: 0px;
    font-family: var(--font-family-1);
    font-size: 21px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.2em;
    box-shadow: none;
    padding: 0px 0px 0px 0px;
    margin-bottom: 10px;
}

.accordion-item .faq-accordion-header .accordion-button::after{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-down" viewBox="0 0 16 16"><path 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-.708z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em 1em;
    padding: 0.7em;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--primary);
    fill: var(--primary);
    width: 1.5em;
    height: 1.5em;
    content: "";
}
.accordion-item .faq-accordion-header .accordion-button:not(.collapsed)::after{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v10.793l3.146-3.147a.5.5 0 1 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L7.5 13.293V2.5A.5.5 0 0 1 8 2z"/></svg>');
    fill: var(--primary);
}

/* 41. Spacing Styles */

/* 41.1 Flexbox spacing (gap) */

.gspace-0 { 
    gap: 0px 0px; 
}
.gspace-1 { 
    gap: 10px 10px; 
}
.gspace-2 { 
    gap: 20px 20px; 
}
.gspace-3 { 
    gap: 30px 30px; 
}
.gspace-4 { 
    gap: 40px 40px; 
}
.gspace-5 { 
    gap: 50px 50px; 
}
.gspace-x-0 { 
    column-gap: 0px; 
}
.gspace-x-1 { 
    column-gap: 10px; 
}
.gspace-x-2 { 
    column-gap: 20px; 
}
.gspace-x-3 { 
    column-gap: 30px; 
}
.gspace-x-4 { 
    column-gap: 40px; 
}
.gspace-x-5 { 
    column-gap: 50px; 
}

.gspace-y-0 { 
    row-gap: 0px; 
}
.gspace-y-1 { 
    row-gap: 10px; 
}
.gspace-y-2 { 
    row-gap: 20px; 
}
.gspace-y-3 { 
    row-gap: 30px; 
}
.gspace-y-4 { 
    row-gap: 40px; 
}
.gspace-y-5 { 
    row-gap: 50px; 
}

/* 41.2 Grid spacing (row-gap & column-gap) */

.grid-spacer-0{
    --bs-gutter-x: 0px;
    --bs-gutter-y: 0px
}

.grid-spacer-1{
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.grid-spacer-2{
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.grid-spacer-3{
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

.grid-spacer-4{
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}

.grid-spacer-5{
    --bs-gutter-x: 50px;
    --bs-gutter-y: 50px;
}

.grid-spacer-80{
    --bs-gutter-x: 80px;
    --bs-gutter-y: 80px;
}

.grid-spacer-120{
    --bs-gutter-x: 120px;
    --bs-gutter-y: 120px;
}

/* Grid spacing (column-gap) */

.grid-spacer-x-0 {
    --bs-gutter-x: 0px;
}
.grid-spacer-x-2 {
    --bs-gutter-x: 20px;
}
.grid-spacer-x-3 {
    --bs-gutter-x: 30px;
}
.grid-spacer-x-4 {
    --bs-gutter-x: 40px;
}
.grid-spacer-x-5 {
    --bs-gutter-x: 50px;
}
.grid-spacer-x-80 {
    --bs-gutter-x: 80px;
}
.grid-spacer-x-120 {
    --bs-gutter-x: 120px;
}

/* Grid spacing (row-gap) */

.grid-spacer-y-0 {
    --bs-gutter-y: 0px;
}
.grid-spacer-y-1 {
    --bs-gutter-y: 10px;
}
.grid-spacer-y-2 {
    --bs-gutter-y: 20px;
}
.grid-spacer-y-3 {
    --bs-gutter-y: 30px;
}
.grid-spacer-y-4 {
    --bs-gutter-y: 40px;
}
.grid-spacer-y-5 {
    --bs-gutter-y: 50px;
}
.grid-spacer-y-80 {
    --bs-gutter-y: 80px;
}
.grid-spacer-y-120 {
    --bs-gutter-y: 120px;
}
/* ---------------------------------------------------------------------------
   Review fixes, 2026-09-16
   Appended rather than edited in place so each change is visible and
   reversible; the template's own rules above are untouched.
   --------------------------------------------------------------------------- */

/* The big card numbers (01, 02, 03) were invisible: a transparent fill
   (--accent-color-4 is #02010100, alpha 00) with a stroke in --accent-color-3
   (#1A1D24), which is all but identical to the card behind them. Give them a
   faint fill and lift the stroke so they read as a watermark rather than as
   nothing at all. */
.card-trust-us .card-number {
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.22);
    stroke: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.055);
}

/* Same problem on the pricing page: "PACKAGES" sat behind the heading in a
   stroke one shade off the background, so it read as a smudge. */
.pricing-heading-highlight {
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.16);
    stroke: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.035);
}

/* The "what you actually get" cards sat at different heights, so the right
   column looked knocked out of alignment with the left. Equal heights per
   row fixes it without touching the template grid. */
.card-trust-us {
    height: 100%;
}

/* The badge belongs beside the paragraph it relates to, not stranded at the
   bottom of an empty column. */
@media (min-width: 992px) {
    .core-service-logo-container {
        align-self: flex-start;
        padding-top: 90px;
    }
}

/* The "Your date. Your room. Your wall." banner.
   ---------------------------------------------
   The template rendered the headline TWICE -- a filled copy at z-index 1 and
   an outlined copy at z-index 3, with the photo at z-index 2 between them --
   so the words appeared to pass behind and in front of the image. At 115px
   the two layers spanned the whole banner and simply read as two headlines
   on top of each other. The duplicate is now gone from the markup.

   The second, worse collision was the paragraph: margin-top: -80px pulled
   "Tell us your date..." up underneath the headline. Both now sit in the
   right-hand column, clear of the photo and of each other. */
.contact-cta-title-container {
    width: 46%;
    margin-left: auto;
    z-index: 3;
}

.contact-cta-title {
    font-size: 58px;
    line-height: 1.05em;
}

.contact-cta-text-container {
    margin-top: 24px;
    width: 46%;
}

/* Nothing left to sandwich, so the photo sits behind the text column. */
.contact-cta-image {
    z-index: 1;
}

/* "One asset, done properly..." was landing on top of the photo.
   .core-service-image is absolutely positioned at left:0, width 40%, while
   .core-service-description is width 47% with align-self:center -- so the
   paragraph starts around the 26% mark, straight over the image. Pushing it
   to the end of the column puts it at 53%-100%, clear of the photo. */
@media (min-width: 992px) {
    .core-service-description {
        align-self: flex-end;
    }
}

/* The four "what we are" cards sat staggered -- the right pair dropped lower
   than the left -- which reads as a layout fault rather than as a deliberate
   offset. .core-service-card-container wraps into rows with
   align-items: flex-end, so each pair hangs from the bottom of its line and
   the differing text lengths push them out of line with each other.
   Stretch them instead: equal heights, tops aligned. */
@media (min-width: 992px) {
    .core-service-card-container {
        align-items: stretch;
    }
    .core-service-card-container .card-core-service {
        height: 100%;
    }
}