/*
Theme Name: Video Marketing (Video)
Theme URI: http://testthetheme.com
Author: https://testthetheme.com
Author URI: http://testthetheme.com
Description: Landing WorePress Theme. Developed by Niranjan
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Landing
Domain Path: /languages
Tags: threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS: 

# Accessibility And Default Style
# Alignments
# Default style
# Clearings

----------------------------------------------------------------*/
body.boxed {
    max-width: 1170px;
    margin: auto;
}

body.boxed .header-top-section {
    position: inherit;
}

body.boxed .header-top-section.menu-bg-overlay {
    position: fixed;
    left: auto;
    right: auto;
}

/*--------------------------------------------------------------
# Accessibility And Default Style
--------------------------------------------------------------*/

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignnone {
    width: auto !important;
    margin-bottom: 1.5em;
}

.aligncenter img,
.alignright img,
.alignleft img,
.alignnone img {
    margin-bottom: 0.5em;
}

img.alignnone,
figure img {
    height: auto;
    max-width: 100%;
}

.default-footer .widget.widget-newsletter {
    padding: 0 !important;
    background: transparent !important;
}

.widget {
    width: 100%;
    margin-bottom: 30px;
    display: inline-block;
}

.default-footer .widget.widget:not(.widget-search):not(.widget-newsletter) h6 {
    border: none !important;
}

.wp-caption-text,
.gallery-caption,
.bypostauthor,
.wp-caption {
    font-size: inherit;
}

.variations select {
    padding: 0 1.5em 0 1em;
    cursor: pointer;
    line-height: 3.5rem;
    max-width: 100%;
    height: 40px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    border: 1px solid #ccc;
    background-color: #e0e0e0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/*--------------------------------------------------------------
# Default style
--------------------------------------------------------------*/
/* - Calendar Style 
------------------------------------------*/
table {
    border-bottom: 1px solid #ededed;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

caption,
th,
td {
    font-weight: normal;
    text-align: left;
    padding: 0 5px;
}

caption {
    font-size: 16px;
    margin: 0 0 20px 0;
}

th {
    font-weight: bold;
    text-transform: capitalize;
    border-top: 1px solid #EDEDED;
    border-left: 1px solid #EDEDED;
    border-right: 1px solid #ededed;
    padding: 4px 10px;
}

td {
    border-top: 1px solid #ededed;
    border-right: 1px solid #ededed;
    border-left: 1px solid #ededed;
    padding: 5px;
}

ins {
    text-decoration: none;
    margin-left: 5px;
    font-size: 1.2em;
    font-weight: 700;
}

dl {
    margin: 0 20px;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 0 20px;
}

dt {
    margin-bottom: 5px;
}

dd {
    margin-bottom: 20px;
}

blockquote {
    font-style: italic;
    box-shadow: 1px 1px 5px #eceef0;
}

label {
    width: 100%;
    display: inline-block;
}

/* - Archive Style
------------------------------------------*/
.widget_recent_comments ul,
.widget_recent_entries ul,
.widget_archive ul,
.widget_pages ul,
.widget_meta ul,
.widget_rss ul {
    padding-left: 0;
    list-style: none;
}

.widget_recent_comments ul li.recentcomments,
.widget_recent_entries ul li,
.widget_archive ul li,
.widget_pages ul li,
.widget_meta ul li,
.widget_rss ul li {
    margin: 5px 0;
    position: relative;
}

.widget_rss ul li {
    padding-bottom: 15px;
}

.widget_categories select,
.widget_archive select {
    width: 100%;
    height: 40px;
    display: block;
    margin-top: 15px;
    padding: 7px 10px;
    background-color: transparent;
}

.widget_categories select option,
.widget_archive select option {
    padding: 7px 10px;
}

/* - Category Style
------------------------------------------*/
.widget_categories ul {
    padding: 0;
    list-style: none;
}

.widget_categories ul li {
    margin: 2px 0;
}

.widget_categories ul li a {
    position: relative;
    padding-left: 15px;
}

/* - Widget Text Style
------------------------------------------*/
.widget_text select {
    width: 100%;
    height: 40px;
    padding: 7px 15px;
    background-color: transparent;
}

.widget-item.widget_archive li a {
    float: left;
}

/* - Tag Cloud Style
------------------------------------------*/
.widget_tag_cloud .tagcloud {
    margin-top: 20px;
}

.widget_tag_cloud a {
    color: #535353;
    padding: 0 10px;
    margin: 0 0 8px;
    font-size: 14px !important;
    letter-spacing: 0;
    line-height: 36px;
    display: inline-block;
    border: 1px solid #535353;
    text-transform: capitalize;
}

/* - Sidebar Default Menu Style 
------------------------------------------*/
.widget_nav_menu ul {
    list-style: none;
}

.widget_nav_menu .menu {
    padding-left: 0;
}

.menu-testing-menu-container ul.sub-menu {
    padding-left: 5px;
}

.menu-testing-menu-container li a {
    width: 100%;
    display: inline-block;
}

.menu-testing-menu-container li a {
    color: #535353;
}

/* - Sticky Post Style 
------------------------------------------*/
.sticky h2.post-title {
    margin-top: 0;
    padding-left: 20px;
    position: relative;
}

.sticky h2.post-title:before {
    top: 0;
    left: 0;
    content: '\f08d';
    font-size: 22px;
    position: absolute;
    font-family: FontAwesome;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.sticky h2.post-title:hover:before {
    color: #0199ed;
}

.gallery-item {
    display: inline-block;
    max-width: 33.33%;
    padding: 0 1.1400652% 2.2801304%;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.gallery-icon img {
    margin: 0 auto;
}

img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

.page-links a {
    background-color: #23282e;
    border-color: #23282e;
    color: #fff;
}

.page-links a,
.page-links>span {
    border: 1px solid #23282e;
    border-radius: 2px;
    display: inline-block;
    font-size: 13px;
    font-size: 1.4125rem;
    height: 1.8461538462em;
    line-height: 1.6923076923em;
    margin-right: 0.3076923077em;
    text-align: center;
    width: 1.8461538462em;
}

/* - Others Style 
------------------------------------------*/
p.logged-in-as {
    margin-top: -15px;
    margin-bottom: 15px;
}

p.logged-in-as a {
    color: #0a0a0a;
}

.logged-in header.navbar-fixed-top {
    top: 32px;
}

.header-contact.ul-li>div:first-of-type .header-phone {
    text-align: center;
}

/*--------------------------------------------------------------
# Search None Page
--------------------------------------------------------------*/
.row.section-content {
    margin-bottom: 80px;
}

h2.search-page-title {
    margin-top: 0;
}

.search-none-search-bar {
    max-width: 700px;
    margin: 25px auto;
}

.error-area .search-none-search-bar {
    margin: 0 auto;
}

.search-none-search-bar button {
    width: 36px;
    height: 40px;
    color: #a9a9a9;
    border: 2px solid #eceef0;
    background-color: transparent;
}

.search-results h2.search-page-title {
    margin-bottom: 30px;
}

/* - Sticky Post Style
=======================================================*/
.sticky .blog-tilte {
    position: relative;
    padding-left: 15px;
}

.sticky .blog-tilte:before {
    top: 4px;
    left: 0;
    content: '\f2a6';
    position: absolute;
    font: normal normal normal 24px/1 Ionicons;
}

/*--------------------------------------------------------------
# Default Commnets Style
--------------------------------------------------------------*/
.comment-box-form li:first-child .user-coment span>ul>li>ul>li>ul>li,
.user-coment span>ul {
    list-style: disc !important;
}

.comment-box-form li:first-child .user-coment span>ul>li>ul>li {
    list-style: circle;
}

.comment-box-form li:first-child .user-coment span>ul>li>ul>li>ul,
.comment-box-form li:first-child .user-coment span>ul>li>ul,
.comment-box-form li:first-child .user-coment span>ul {
    padding-left: 30px !important;
}

ul.comment-box-form>li:first-child li {
    border: none;
    padding: 0 !important;
}

@media only screen and (max-width: 490px) {
    .img-blog-overlay img {
        width: 45%;
    }

    .comm-content {
        padding-left: 58px;
    }

    .comm-content .mail-reply-icon {
        top: -10px;
        right: 40px;
        font-size: 20px;
    }

    .comment-area .children {
        padding-left: 10px !important;
    }

    .comm-content .time-info {
        letter-spacing: 0px;
    }
}

/*--------------------------------------------------------------
# Default Sidebar Commnets Style
--------------------------------------------------------------*/
ul#recentcomments span {
    display: inline-block;
}

ul#recentcomments li a:before {
    display: none;
}

/*--------------------------------------------------------------
# Default Password Style
--------------------------------------------------------------*/
.post-password-form p {
    margin-top: 15px;
}

.post-password-form label {
    width: initial;
    display: inline-block;
}

.post-password-form input[type=submit],
input#pwbox-1168 {
    height: 40px;
    padding: 0 7px;
    border: 1px solid #eceef0;
    background-color: #f9f9f9;
}

.post-password-form input[type=submit] {
    color: #fff;
    height: 40px;
    background-color: #23282e;
}

/*--------------------------------------------------------------
# Default Comments Style
--------------------------------------------------------------*/
ul#submited-comment {
    padding-left: 0;
}

.comment-area ul {
    list-style: none;
    padding-left: 0;
}

.children,
.parent {
    padding-top: 15px;
    padding-bottom: 15px;
}

.blog-sidebar .children,
.blog-sidebar .parent,
footer .children,
footer .parent {
    padding-top: 0;
    padding-bottom: 0;
}

ul.children {
    margin-left: 20px;
}

.comments-list .sbpc-content>ul>li {
    list-style: disc;
}

.comments-list .sbpc-content>ul>li>ul>li {
    list-style: circle;
}

.comments-list .sbpc-content>ul>li>ul>li>ul>li {
    list-style-type: square;
}

.comments-list .sbpc-content>ul>li>ul>li>ul,
.comments-list .sbpc-content>ul>li>ul,
.comments-list .sbpc-content>ul {
    padding-left: 30px !important;
}

/*--------------------------------------------------------------
# Default Comments Style
--------------------------------------------------------------*/
.ws-input input {
    height: 40px;
    float: left;
    padding: 0 10px;
    border: 1px solid #535353;
    background-color: transparent;
}

.ws-input {
    display: table;
    margin: auto;
}

.ws-input button {
    color: #535353;
    height: 40px;
    border-radius: 0;
    padding: 0 8px;
    font-size: 24px;
    border: 1px solid #535353;
    border-left: 0;
    background-color: transparent;
}

section.no-results.not-found {
    text-align: center;
    font-size: 20px;
}

/*--------------------------------------------------------------
# Text Widget Style
--------------------------------------------------------------*/
.textwidget strong {
    margin-bottom: 5px;
    display: inline-block;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
    content: "";
    display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    clear: both;
}

.ytp-title {
    display: none !important;
}

.navbar-brand {
    padding: 0;
}




/* new css */
.no-padding {
    padding: 0 !important;
}

.who-we-are-section .box-item {
    padding: 20px 20px;
    background-color: #f1f1f1;
    border-radius: 20px;
    margin: 0
}

.who-we-are-section div:has(>.box-item) {
    padding: 10px;
}

.who-we-are-section .box-item h3 {
    font-size: 40px;
    color: black;
    font-weight: 600;
}

.who-we-are-section .box-item h4 {
    font-size: 18px;
    color: black;
    font-weight: 600;
    margin-top: 10px;
    border-top: 2px dotted #8e8e8e;
    padding-top: 10px;
}

.who-we-are-section .box-item .col-md-3 {
    padding: 0 !important;
}

.section-title.section-title-left {
    text-align: left;
}

.section-title.section-title-left:after {
    right: unset
}

.steps-section{
    background-color: #f9f9f9;
    padding: 80px 0;
}

.sticky-content {
    position: sticky;
    top: 150px;
}
.steps-section .box-item {
    background-color: white ;
    padding:30px;
    border-radius: 20px;
    border:1px solid #eceef0;
    position: sticky;
    bottom:20px;
    z-index: 1;
}

.steps-section .box-item:not(:last-child){
    margin-top:30px;
}

.steps-section .box-item h3{
    font-weight: 600;
    color:black;
    font-size:30px;
    margin-top:20px;
    margin-bottom:10px
}
.steps-section .box-item .step-number{
    font-size:50px;
    color:black;
    font-weight: 500;
    opacity: 0.1;
}
.steps-section .fa{
    font-size:50px;
    color:black;
    display: inline-block;
    position: relative;
}
.steps-section .fa:after{
    content:"";
    background-color: var(--v-theme-color);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    top:-5px;
    left:5px;
    opacity: 0.3;
    position: absolute;
    z-index: -1;
}

.steps-2-section .section-title{
    margin-top:40px
}
.steps-2-section img{
    height: 80vh;
    object-fit: cover;
    padding:0 20px;
}
.steps-2-section .step-number{
    font-size:13px;
    color:black;
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px ;
    text-align: center;
    border-radius: 100%;
    border:1px solid #eee;
    margin-top:5px
}
.steps-2-section h3{
    font-weight: 600;
    color:black;
    font-size:21px;
    margin-top:10px;
}
.steps-2-section{
    background-color: #f9f9f9;
    padding: 80px 0;
}
.steps-2-section .box-item{
    padding:20px 0 ;
    border-bottom:1px solid #eceef0;
}

.steps-section div:has(> .box-item){
    display: flex;
    flex-direction: column-reverse;
}

.pricing-section .pricing-content{
    background-color: #F9F9FA;
    padding: 40px !important;
}
.pricing-section .pricing-content .row{
    margin:0;
}
.pricing-section .pricing-content .price{
    font-size: 40px;
    color: black;
    font-weight: 600;
    margin-top: 20px;
}
.pricing-section .pricing-content .feature-box{
    background-color: white;
    padding:45px;
    margin-bottom:
    
}
.pricing-section .pricing-content .feature-box h4{
    font-size:25px;
    margin-bottom:25px;
}
.pricing-section .pricing-content .feature-box li{
    list-style: none;
    font-size: 18px;
}
.pricing-section .pricing-content .feature-box li:not(:last-child){
    margin-bottom:15px;
}
.pricing-section .pricing-content .feature-box li i{
    color: var(--v-theme-color);
    margin-right: 20px;
}

.testimonial-section,
.service-2-section {
    background-color: #161616;
}
.service-2-section span,
.testimonial-section span,
.service-2-section p,
.testimonial-section p,
.service-2-section .section-title,
.testimonial-section .section-title{
    color:white
}
.testimonial-section p{
    font-size: 25px;
    font-weight: 600;
    line-height: 1.5em;
    margin-bottom:30px;
}
.testimonial-section .fa-quote-left{
    font-size:50px;
    color: var(--v-theme-color);
    position: absolute;
    top:0;
    left:-40px
}
.testimonial-section .nav a{
    color:white;
    font-size:30px;
    margin-left:15px;
    margin-right:15px;
    line-height: 30px;
    height: 30px;
    width: 30px;
    border-radius: 100%;
}

.service-2-section{
    padding: 80px 0;
}
.service-2-section .service2-icon{
    font-size:50px;
    color: var(--v-theme-color);
    margin-bottom:50px;
    height: 50px;
    display: inline-block;
}
.service-2-section .service2-item h3{
    font-size:30px;
    color:white;
    font-weight: 600;
    margin-bottom:20px;
}
.service-2-section .service2-item p{
    font-size:15px;
    color:white;
    line-height: 1.8em;
}
.service-2-section .col-md-6.service2-item{
    padding:40px;
    border:1px solid #333333;
}

.test-section .test-title{
    font-size: 30px;
    color: black;
    font-weight: 600;
    margin-bottom: 30px;
}
.portfolio-2 {
    padding: 80px;
}
.portfolio-2 .portfolio-box-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}
.portfolio-2 .portfolio-box-item video{
    width:100%;
    border-radius: 20px;
    height: 600px;
    object-fit: cover;
}
.portfolio-2 .portfolio-box-item .play-button{
    position: absolute;
    left: 40px;
    bottom:30px;
    font-size: 14px;
    color: white;
    display: inline-block;
    background: rgba(255,255,255,0.15);
    text-align: center;
    border-radius: 100px;
    padding:3px 12px;
    opacity: 1;
    z-index: 20;
    cursor: pointer;
}
.portfolio-2 .owl-item{
    padding:0 20px !important;
    opacity: 0.4;
    transform: scale(0.8);
    transition:0.5s
}
.portfolio-2 .owl-item.active.center{
    opacity: 1;
    transform: scale(1);    
}
.portfolio-2 .nav-buttons{
    text-align: center;
    margin-top: -15px;
    position: absolute;
    max-width:360px;
    width:100%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%,-50% ) !important;
}
.portfolio-2 .nav-buttons .prev-button,
.portfolio-2 .nav-buttons .next-button{
    background-color: var(--v-theme-color);
    color: white;
    font-size: 30px;
    height: 40px;
    width: 40px;
    border:none;
    font-size: 19px;
    line-height: 35px;
    border-radius: 100%;
    display: inline-block;
    cursor: pointer;
}
.portfolio-2 .nav-buttons .prev-button{
    float:left
}
.portfolio-2 .nav-buttons .next-button{
    float:right
}
.portfolio-2 .portfolio-slider-container{
    position: relative;
}

/* ============================================
   FrameCraft Sections Styles
   ============================================ */

/* Hero Section */
.framecraft-hero-section {
    padding: 96px 0 80px;
    background: #ffffff;
}

.framecraft-hero-section .row {
    display: flex;
    align-items: center;
}

.framecraft-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--v-theme-color-10);
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 24px;
}

.framecraft-hero-content {
    padding-right: 20px;
}

.framecraft-hero-badge i {
    color: var(--v-theme-color);
    font-size: 16px;
}

.framecraft-hero-badge span {
    color: var(--v-theme-color);
    font-size: 14px;
    font-weight: 500;
}

.framecraft-hero-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--v-gray-900);
    line-height: 1.2;
    margin-bottom: 24px;
}

@media (min-width: 1024px) {
    .framecraft-hero-title {
        font-size: 60px;
    }
}

.framecraft-hero-description {
    font-size: 20px;
    color: var(--v-gray-600);
    line-height: 1.6;
    margin-bottom: 32px;
}

.framecraft-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
}

.btn-framecraft-primary,
.btn-framecraft-secondary,
.btn-cta-primary,
.btn-cta-secondary,
.btn-pricing {
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.btn-framecraft-primary {
    background: var(--v-theme-color);
    color: white;
    padding: 16px 32px;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-center;
    gap: 8px;
    transition: all 0.2s ease-out;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 15px -3px var(--v-theme-color-30), 0 4px 6px -2px var(--v-theme-color-20);
}

.btn-framecraft-primary:hover,
.btn-framecraft-primary:focus {
    background: var(--v-theme-color-hover);
    color: white;
    text-decoration: none;
    outline: none;
}

.btn-framecraft-secondary {
    background: white;
    color: var(--v-theme-color);
    padding: 16px 32px;
    border-radius: 8px;
    border: 2px solid var(--v-theme-color);
    font-weight: 500;
    transition: all 0.2s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-framecraft-secondary:hover,
.btn-framecraft-secondary:focus {
    background: var(--v-theme-color-10);
    color: var(--v-theme-color);
    text-decoration: none;
    outline: none;
}

.framecraft-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--v-gray-600);
}

.trust-item i {
    color: var(--v-theme-color);
    font-size: 20px;
}

.framecraft-hero-image-wrapper {
    position: relative;
    z-index: 1;
}

.framecraft-hero-image-container {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.framecraft-hero-image {
    width: 100%;
    height: auto;
    display: block;
}

.framecraft-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.framecraft-play-button {
    background: white;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    padding: 0;
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: all 0.2s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.framecraft-play-button:hover,
.framecraft-play-button:focus {
    transform: scale(1.1);
    box-shadow: 0 25px 50px -12px var(--v-theme-color-50);
    outline: none;
}

.portfolio-play-button:hover,
.portfolio-play-button:focus {
    outline: none;
}

.framecraft-play-button i {
    color: var(--v-theme-color);
    font-size: 32px;
    fill: var(--v-theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 3px; /* Slight offset to visually center the play icon */
}

.framecraft-floating-badge {
    position: absolute;
    bottom: -24px;
    left: -24px;
    background: #ffffff;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
}

.badge-icon {
    background: var(--v-theme-color-10);
    padding: 12px;
    border-radius: 8px;
}

.badge-icon i {
    color: var(--v-theme-color);
    font-size: 24px;
}

.badge-content {
    display: flex;
    flex-direction: column;
}

.badge-label {
    font-size: 12px;
    color: #4B5563;
    margin: 0;
}

.badge-value {
    font-size: 24px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

/* Problem → Solution Section */
.framecraft-problem-solution-section {
    padding: 80px 0;
    background: #ffffff;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    margin-bottom: 24px;
    font-weight: 500;
}

.section-badge i {
    font-size: 16px;
}

.section-badge-red {
    background: var(--v-theme-color-10);
    color: var(--v-theme-color);
}

.section-badge-teal {
    background: var(--v-theme-color-10);
    color: var(--v-theme-color);
}

.section-badge-blue {
    background: var(--v-theme-color-10);
    color: var(--v-theme-color);
}

.section-title-large {
    font-size: 36px;
    font-weight: 700;
    color: var(--v-gray-900);
    margin-bottom: 32px;
}

.problem-items,
.solution-items {
    margin-top: 24px;
}

.problem-item, .solution-item {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    align-items: flex-start;
}

.problem-item:last-child,
.solution-item:last-child {
    margin-bottom: 0;
}

.problem-icon, .solution-icon {
    background: var(--v-theme-color-10);
    padding: 12px;
    border-radius: 8px;
    flex-shrink: 0;
}

.problem-icon i {
    color: var(--v-theme-color);
    font-size: 24px;
}

.solution-icon {
    background: var(--v-theme-color-10);
}

.solution-icon i {
    color: var(--v-theme-color);
    font-size: 24px;
}

.problem-content h3, .solution-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--v-gray-900);
    margin-bottom: 4px;
}

.problem-content p, .solution-content p {
    color: var(--v-gray-600);
    margin: 0;
}

/* Services Section */
.framecraft-services-section {
    padding: 80px 0;
    background: #ffffff;
}

.framecraft-services-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.framecraft-services-grid > [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Section Title Area - Common Styles */
.section-title-area {
    margin-bottom: 64px;
    text-align: center;
}

.section-title-area .section-badge {
    margin-bottom: 24px;
}

.section-title {
    font-size: 40px;
    font-weight: 700;
    color: var(--v-gray-900);
    margin-bottom: 16px;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .section-title {
        font-size: 48px;
    }
}

.section-subtitle {
    font-size: 20px;
    color: var(--v-gray-600);
    max-width: 768px;
    margin: 0 auto;
    line-height: 1.6;
}

.framecraft-service-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--v-gray-100);
    transition: all 0.2s ease-out;
    height: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.framecraft-service-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px);
}

.service-icon-box {
    background: var(--v-theme-color-10);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    width: 100%;
    flex-shrink: 0;
    text-align: center;
}

.service-icon {
    font-size: 80px;
    line-height: 1;
    display: block;
    text-align: center;
    width: 100%;
}

.service-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--v-gray-900);
    margin-bottom: 8px;
    line-height: 1.3;
    min-height: 46px;
    display: block;
}

/* Ensure cards align properly in grid */
.framecraft-services-grid .col-lg-3,
.framecraft-services-grid .col-md-4,
.framecraft-services-grid .col-sm-6 {
    margin-bottom: 30px;
}

@media (max-width: 991px) {
    .framecraft-services-grid .col-md-4 {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .framecraft-services-grid .col-sm-6 {
        margin-bottom: 30px;
    }
}

.service-benefit {
    font-size: 14px;
    color: var(--v-gray-600);
    margin: 0;
    line-height: 1.5;
    flex-grow: 1;
}

/* How It Works Section */
.framecraft-how-it-works-section {
    padding: 80px 0;
    background: #ffffff;
}

.framecraft-step-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid var(--v-gray-100);
    position: relative;
    height: 100%;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.step-number-badge {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 48px;
    height: 48px;
    background: var(--v-theme-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 700;
    z-index: 2;
}

.step-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--v-theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.step-icon-box i {
    color: white;
    font-size: 32px;
}

.step-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--v-gray-900);
    margin-bottom: 16px;
}

.step-description {
    color: var(--v-gray-600);
    line-height: 1.6;
}

/* Portfolio Section */
.framecraft-portfolio-section {
    padding: 80px 0;
    background: #ffffff;
}

.framecraft-portfolio-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--v-gray-100);
    transition: all 0.2s ease-out;
    margin-bottom: 30px;
}

.framecraft-portfolio-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-4px);
}

.portfolio-video-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--v-gray-100);
    overflow: hidden;
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 16/9) {
    .portfolio-video-thumbnail {
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
    }
    
    .portfolio-video-thumbnail img,
    .portfolio-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

.portfolio-video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.portfolio-placeholder {
    width: 100%;
    height: 100%;
    background: var(--v-gray-200);
}

.portfolio-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-play-button {
    background: white;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    padding: 0;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.framecraft-portfolio-card:hover .portfolio-play-button {
    background: var(--v-theme-color);
}

.portfolio-play-button i {
    color: var(--v-theme-color);
    font-size: 32px;
    transition: all 0.2s ease-out;
    line-height: 1;
    display: block;
    fill: var(--v-theme-color);
}

.framecraft-portfolio-card:hover .portfolio-play-button i {
    color: white;
    fill: white;
}

.portfolio-duration {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
}

.portfolio-content {
    padding: 24px;
}

.portfolio-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--v-gray-900);
    margin-bottom: 8px;
}

.portfolio-link {
    color: var(--v-theme-color);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease-out;
}

.portfolio-link:hover,
.portfolio-link:focus {
    color: var(--v-theme-color-hover);
    text-decoration: none;
}

.pricing-note a:hover,
.pricing-note a:focus {
    text-decoration: underline;
}

/* Benefits Section */
.framecraft-benefits-section {
    padding: 80px 0;
    background: #ffffff;
}

.framecraft-benefit-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px;
    border: 1px solid var(--v-gray-100);
    height: 100%;
    transition: all 0.2s ease-out;
    margin-bottom: 30px;
}

.framecraft-benefit-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-4px);
}

.benefit-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--v-theme-color-10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.benefit-icon-box i {
    color: var(--v-theme-color);
    font-size: 32px;
}

.benefit-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--v-gray-900);
    margin-bottom: 12px;
}

.benefit-description {
    color: var(--v-gray-600);
    line-height: 1.6;
}

/* Testimonials Section */
.framecraft-testimonials-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.framecraft-testimonial-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid var(--v-gray-100);
    height: 100%;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.testimonial-rating {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.testimonial-rating i {
    color: #fbbf24;
    font-size: 20px;
}

.testimonial-quote-icon {
    margin-bottom: 16px;
}

.testimonial-quote-icon i {
    color: var(--v-theme-color-20);
    font-size: 40px;
}

.testimonial-quote {
    color: var(--v-gray-700);
    line-height: 1.6;
    margin-bottom: 24px;
}

.testimonial-author {
    border-top: 1px solid var(--v-gray-200);
    padding-top: 16px;
}

.author-name {
    font-weight: 600;
    color: var(--v-gray-900);
    margin-bottom: 4px;
}

.author-clinic {
    font-size: 14px;
    color: var(--v-gray-600);
    margin: 0;
}

/* Pricing Section */
.framecraft-pricing-section {
    padding: 80px 0;
    background: #ffffff;
}

.framecraft-pricing-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    border: 2px solid var(--v-gray-200);
    position: relative;
    height: 100%;
    transition: all 0.2s ease-out;
    margin-bottom: 30px;
}

.framecraft-pricing-card.pricing-highlighted {
    border-color: var(--v-theme-color);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    background: #ffffff;
    transform: scale(1.05);
}

.pricing-badge {
    display: inline-block;
    background: var(--v-theme-color);
    color: white;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 12px;
    margin-bottom: 16px;
}

.pricing-name {
    font-size: 24px;
    font-weight: 600;
    color: var(--v-gray-900);
    margin-bottom: 8px;
}

.pricing-description {
    color: var(--v-gray-600);
    margin-bottom: 16px;
}

.pricing-price {
    margin-bottom: 24px;
}

.price-amount {
    font-size: 48px;
    font-weight: 700;
    color: var(--v-gray-900);
}

.price-period {
    color: var(--v-gray-600);
}

.pricing-videos {
    background: var(--v-theme-color-10);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    color: var(--v-theme-color);
    margin-bottom: 24px;
    font-weight: 500;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin-bottom: 32px;
}

.pricing-features li {
    display: flex;
    align-items: start;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--v-gray-700);
}

.pricing-features li i {
    color: var(--v-theme-color);
    margin-top: 4px;
    flex-shrink: 0;
}

.btn-pricing {
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    transition: all 0.2s ease-out;
    text-align: center;
    display: block;
}

.framecraft-pricing-card.pricing-highlighted .btn-pricing {
    background: var(--v-theme-color);
    color: white;
    box-shadow: 0 10px 15px -3px var(--v-theme-color-30), 0 4px 6px -2px var(--v-theme-color-20);
}

.framecraft-pricing-card:not(.pricing-highlighted) .btn-pricing {
    background: var(--v-gray-100);
    color: var(--v-gray-900);
}

.btn-pricing:hover,
.btn-pricing:focus {
    text-decoration: none;
    outline: none;
}

.framecraft-pricing-card.pricing-highlighted .btn-pricing:hover,
.framecraft-pricing-card.pricing-highlighted .btn-pricing:focus {
    background: var(--v-theme-color-hover);
    color: white;
}

.pricing-note {
    color: var(--v-gray-600);
    text-align: center;
    margin-top: 16px;
}

.pricing-note a {
    color: var(--v-theme-color);
}

/* FAQ Section */
.framecraft-faq-section {
    padding: 80px 0;
    background: #ffffff;
}

.framecraft-faq-container {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid var(--v-gray-100);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .framecraft-faq-container {
        padding: 24px;
    }
}

.framecraft-faq-item {
    border-bottom: 1px solid var(--v-gray-200);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.framecraft-faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 16px 0;
    user-select: none;
    transition: color 0.2s ease-out;
}

.faq-question:hover h4 {
    color: var(--v-theme-color);
}

.faq-question:focus {
    outline: 2px solid var(--v-theme-color);
    outline-offset: 2px;
    border-radius: 4px;
}

.faq-question h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--v-gray-900);
    margin: 0;
    text-align: left;
}

.faq-question i {
    color: var(--v-theme-color);
    transition: transform 0.2s ease-out;
}

.framecraft-faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.framecraft-faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    color: var(--v-gray-600);
    line-height: 1.6;
    padding-top: 16px;
    margin: 0;
}

/* CTA Section */
.framecraft-cta-section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.cta-background-overlay {
    position: absolute;
    inset: 0;
    background: var(--v-theme-color);
}

.cta-background-overlay::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 40px;
    width: 288px;
    height: 288px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(60px);
}

.cta-background-overlay::after {
    content: '';
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 384px;
    height: 384px;
    background: rgba(20, 184, 166, 0.2);
    border-radius: 50%;
    filter: blur(60px);
}

.framecraft-cta-content {
    position: relative;
    z-index: 1;
}

.cta-title {
    font-size: 40px;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
}

@media (min-width: 1024px) {
    .cta-title {
        font-size: 48px;
    }
}

.cta-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 24px;
}

.btn-cta-primary {
    background: white;
    color: var(--v-theme-color);
    padding: 16px 32px;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    transition: all 0.2s ease-out;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-cta-primary:hover,
.btn-cta-primary:focus {
    background: var(--v-gray-100);
    color: var(--v-theme-color);
    text-decoration: none;
    outline: none;
}

.btn-cta-secondary {
    background: transparent;
    color: white;
    padding: 16px 32px;
    border-radius: 8px;
    border: 2px solid white;
    font-weight: 500;
    transition: all 0.2s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-cta-secondary:hover,
.btn-cta-secondary:focus {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    outline: none;
}

.cta-note {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-top: 24px;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .framecraft-hero-section {
        padding: 60px 0;
    }
    
    .framecraft-hero-section .row {
        flex-direction: column;
    }
    
    .framecraft-hero-content {
        padding-right: 0;
        margin-bottom: 40px;
    }
    
    .framecraft-hero-title {
        font-size: 36px;
    }
    
    .framecraft-hero-description {
        font-size: 18px;
    }
    
    .section-title {
        font-size: 32px;
    }
    
    .section-title-large {
        font-size: 28px;
    }
    
    .section-subtitle {
        font-size: 18px;
    }
    
    .cta-title {
        font-size: 32px;
    }
    
    .framecraft-pricing-card.pricing-highlighted {
        transform: scale(1);
        margin-bottom: 30px;
    }
    
    .framecraft-step-card {
        margin-bottom: 30px;
    }
    
    .framecraft-service-card,
    .framecraft-benefit-card,
    .framecraft-portfolio-card,
    .framecraft-testimonial-card {
        margin-bottom: 30px;
    }
    
    .framecraft-floating-badge {
        position: absolute;
        bottom: -12px;
        left: -12px;
        z-index: 10;
    }
        bottom: auto;
        left: auto;
        margin-top: 20px;
        display: inline-flex;
    }
    
    .problem-item,
    .solution-item {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .framecraft-hero-section,
    .framecraft-problem-solution-section,
    .framecraft-services-section,
    .framecraft-how-it-works-section,
    .framecraft-portfolio-section,
    .framecraft-benefits-section,
    .framecraft-testimonials-section,
    .framecraft-pricing-section,
    .framecraft-faq-section,
    .framecraft-cta-section {
        padding: 60px 0;
    }
    
    .section-title-area {
        margin-bottom: 40px;
    }
    
    .framecraft-hero-buttons {
        flex-direction: column;
    }
    
    .btn-framecraft-primary,
    .btn-framecraft-secondary,
    .btn-cta-primary,
    .btn-cta-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .price-amount {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .framecraft-hero-title {
        font-size: 28px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .section-title-large {
        font-size: 24px;
    }
    
    .cta-title {
        font-size: 28px;
    }
    
    .framecraft-hero-description,
    .section-subtitle {
        font-size: 16px;
    }
}

/* FAQ Accordion JavaScript Enhancement */
.framecraft-faq-item {
    transition: all 0.2s ease-out;
}

.framecraft-faq-item.active {
    background: #f9fafb;
    padding: 16px;
    border-radius: 8px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
}

/* Ensure proper spacing for problem/solution boxes */
.framecraft-problem-box,
.framecraft-solution-box {
    padding: 20px 0;
}

/* Fix for Bootstrap offset classes */
.col-lg-offset-2 {
    margin-left: 16.66666667%;
}

@media (max-width: 991px) {
    .col-lg-offset-2 {
        margin-left: 0;
    }
}

/* Ensure images are responsive */
.framecraft-hero-image,
.portfolio-video-thumbnail img {
    max-width: 100%;
    height: auto;
}

/* Text color consistency */
.framecraft-hero-content,
.framecraft-problem-box,
.framecraft-solution-box {
    color: #111827;
}

/* Ensure proper line heights */
.problem-content h3,
.solution-content h3,
.service-title,
.step-title,
.benefit-title,
.portfolio-title,
.pricing-name,
.author-name {
    line-height: 1.3;
}

/* Fix for author name/clinic spacing */
.author-name {
    margin-bottom: 4px;
}

.author-clinic {
    margin-top: 0;
}

/* ============================================
   Footer Styles
   ============================================ */

.framecraft-footer {
    background: var(--v-gray-900);
    color: white;
    padding: 48px 0;
}

.framecraft-footer-grid {
    margin-bottom: 32px;
}

.footer-brand {
    margin-bottom: 24px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.footer-logo-icon {
    background: var(--v-theme-color);
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo-icon i {
    color: white;
    font-size: 24px;
}

.footer-logo-text {
    font-size: 20px;
    font-weight: 700;
    color: white;
}

.footer-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin: 0;
}

.footer-column {
    margin-bottom: 24px;
}

.footer-column-title {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease-out;
}

.footer-links a:hover {
    color: white;
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.footer-contact-item i {
    font-size: 16px;
    flex-shrink: 0;
}

.footer-cta-button {
    display: inline-block;
    background: var(--v-theme-color);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    margin-top: 8px;
    transition: background 0.3s;
}

.footer-cta-button:hover {
    background: var(--v-theme-color-hover);
    color: white;
    text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 32px;
}

.footer-copyright {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    gap: 24px;
    justify-content: flex-end;
}

.footer-link {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease-out;
}

.footer-link:hover {
    color: white;
}

@media (max-width: 991px) {
    .framecraft-footer-grid > div {
        margin-bottom: 32px;
    }
    
    .footer-bottom-links {
        justify-content: flex-start;
        margin-top: 16px;
    }
    
    .footer-bottom .row > div {
        text-align: left !important;
    }
}