@import url(https://fonts.googleapis.com/css2?family=Raleway:wght@300;
400;
700&family=Roboto:wght@300;
700&display=swap);
:root{
    --primary-color:#ff3864;
    --secondary-color:#907fbf;
    --dark-color:#1a1a2e;
    --light-color:#fff;
    --transition:all 0.3s ease;
    --gradient-primary:linear-gradient(135deg, #ff3864, #c73650);
    --gradient-secondary:linear-gradient(135deg, #907fbf, #6f42c1);
    --shadow-light:0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-medium:0 5px 20px rgba(0, 0, 0, 0.15);
    --shadow-heavy:0 15px 35px rgba(0, 0, 0, 0.3);
    --border-radius:10px;
    --border-radius-large:20px;
    --box-shadow:0 4px 6px rgba(0, 0, 0, 0.1)
}
*{
    box-sizing:border-box
}
*::before,*::after{
    box-sizing:inherit
}
html,body{
    background-color:var(--dark-color)!important;
    min-height:100vh;
    margin:0;
    padding:0
}
body{
    font-family:'Raleway','Helvetica',sans-serif;
    overflow-x:hidden;
    line-height:1.6;
    margin:0;
    padding:0
}
::selection{
    background:var(--primary-color);
    color:var(--light-color)
}
a{
    transition:var(--transition);
    text-decoration:none
}
a:hover{
    color:var(--primary-color)
}
.wrapper{
    padding:50px 0 30px
}
.section-title{
    font-family:'Roboto','Helvetica',sans-serif;
    font-weight:300;
    text-transform:uppercase;
    letter-spacing:8px;
    font-size:2.5rem;
    margin-bottom:2rem
}
.section-paragraph{
    font-size:1rem;
    font-weight:400;
    letter-spacing:1px;
    line-height:1.6
}
.text-large{
    font-size:1.125rem;
    line-height:1.7
}
.custom-red{
    color:var(--primary-color)!important
}
.custom-purple{
    color:var(--secondary-color)!important
}
.custom-white{
    color:var(--light-color)!important
}
.custom-black{
    color:var(--dark-color)!important
}
.bg-dark-custom{
    background-color:var(--dark-color)!important
}
.glass-effect{
    background:rgb(255 255 255 / .1);
    backdrop-filter:blur(10px);
    border:1px solid rgb(255 255 255 / .2);
    border-radius:15px
}
.btn-custom{
    background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
    border:none;
    color:#fff;
    padding:.75rem 2rem;
    border-radius:25px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    transition:var(--transition);
    box-shadow:var(--box-shadow)
}
.btn-custom:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgb(230 78 78 / .3);
    color:#fff
}
.btn-primary{
    background:var(--gradient-primary);
    border:none;
    border-radius:25px;
    padding:.75rem 2rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    transition:var(--transition);
    color:var(--light-color)
}
.btn-primary:hover,.btn-primary:focus{
    background:linear-gradient(135deg,#c73650,#a02a3a);
    transform:translateY(-2px);
    box-shadow:0 5px 15px rgb(230 78 78 / .3);
    color:var(--light-color)
}
.btn-outline-primary{
    color:var(--primary-color);
    border-color:var(--primary-color);
    border-width:2px;
    border-radius:var(--border-radius);
    padding:.75rem 1.5rem;
    font-weight:600;
    transition:var(--transition)
}
.btn-outline-primary:hover{
    background-color:var(--primary-color);
    border-color:var(--primary-color);
    transform:translateY(-2px);
    box-shadow:0 5px 15px rgb(230 78 78 / .3);
    color:var(--light-color)
}
.btn-group .btn,.filters-button{
    margin:.25rem .15rem;
    border-radius:25px;
    padding:.75rem 1.5rem;
    font-size:.875rem;
    text-transform:capitalize;
    transition:var(--transition);
    border:2px solid var(--light-color)
}
.btn-outline-light:hover,.filters-button:hover,.filters-button.active{
    background-color:var(--primary-color)!important;
    border-color:var(--primary-color)!important;
    color:var(--light-color)!important;
    transform:translateY(-2px);
    box-shadow:0 5px 15px rgb(230 78 78 / .3)
}
.contact-form .form-control,.form-control{
    border-radius:var(--border-radius);
    border:2px solid #e9ecef;
    padding:.75rem 1rem;
    transition:var(--transition);
    font-size:1rem
}
.contact-form .form-control:focus,.form-control:focus{
    border-color:var(--primary-color);
    box-shadow:0 0 0 .2rem rgb(230 78 78 / .25);
    outline:none
}
.alert-info{
    background:linear-gradient(135deg,rgb(230 78 78 / .1),rgb(230 78 78 / .05));
    border:1px solid rgb(230 78 78 / .2);
    border-radius:var(--border-radius);
    color:var(--dark-color)
}
.alert-success{
    background:linear-gradient(135deg,rgb(144 127 191 / .1),rgb(144 127 191 / .05));
    border:1px solid rgb(144 127 191 / .2);
    border-radius:var(--border-radius);
    color:var(--dark-color)
}
.ebook-cta-btn{
    display:inline-block;
    padding:10px 25px;
    color:#FFC107;
    font-size:1.2rem;
    font-weight:700;
    text-decoration:none;
    text-transform:uppercase;
    background-color:#fff0;
    border:2px solid #FFC107;
    border-radius:50px;
    transition:all 0.2s ease
}
.ebook-cta-btn:hover{
    color:#212529;
    background-color:#FFC107;
    cursor:pointer;
    box-shadow:0 0 10px rgb(255 193 7 / .5)
}
.btn-pill{
    border-radius:50px!important
}
.header{
    background-color:var(--dark-color);
    background-image:url(../images/www.webp);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    position:relative;
    padding:10rem 0 5rem
}
.header::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgb(0 0 0 / .3);
    z-index:1
}
.header-description{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    text-transform:uppercase
}
.header-content{
    position:relative;
    z-index:3
}
.heading{
    font-weight:700;
    padding:1rem 2rem;
    letter-spacing:8px;
    border:2px solid var(--light-color);
    display:inline-block;
    font-size:2.2rem;
    background:rgb(255 255 255 / .1);
    backdrop-filter:blur(10px);
    border-radius:var(--border-radius);
    transition:var(--transition)
}
.heading:hover{
    background:rgb(230 78 78 / .2);
    transform:scale(1.05)
}
.heading-subtitle{
    font-weight:100;
    color:white!important;
    letter-spacing:6px;
    font-size:1.5rem;
    margin-top:1rem
}
.header h1,.header h2{
    color:white!important;
    font-weight:700!important;
    text-shadow:0 0 10px rgb(0 0 0 / .3)
}
.button-down{
    position:absolute;
    top:95%;
    bottom:10%;
    left:50%;
    transform:translateX(-50%);
    z-index:3
}
.button-down-2{
    position:absolute;
    bottom:2%;
    left:50%;
    transform:translateX(-50%);
    z-index:3
}
.navigationbar,.navbar{
    background:var(--dark-color);
    padding:1.5rem 0;
    min-height:80px;
    transition:var(--transition);
    position:fixed;
    width:100%;
    top:0;
    z-index:1000
}
.navigationbar.scrolled,.navbar.scrolled{
    padding:.5rem 0;
    min-height:60px;
    background:rgb(34 30 45 / .95)!important;
    backdrop-filter:blur(10px)
}
.navbar-brand.logo{
    font-size:1.5rem;
    letter-spacing:6px;
    color:var(--light-color)!important;
    text-decoration:none
}
.navbar-brand.logo:hover{
    color:var(--light-color)!important
}
.globe{
    color:var(--light-color)
}
.navbar-nav .nav-link{
    color:var(--secondary-color)!important;
    font-weight:400;
    text-transform:uppercase;
    margin:0 .5rem;
    padding:.5rem 1rem!important;
    border:1px solid #fff0;
    border-radius:4px;
    transition:var(--transition)
}
.navbar-nav .nav-link:hover{
    color:var(--primary-color)!important;
    border-color:var(--primary-color)
}
.navbar-toggler{
    border:none;
    padding:.25rem .5rem
}
.navbar-toggler:focus{
    box-shadow:none
}
.header .navbar-nav .nav-link{
    color:var(--light-color)!important
}
.about{
    background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);
    padding:5rem 0
}
.about-content{
    padding:2rem
}
.accordion{
    --bs-accordion-border-radius:var(--border-radius);
    margin:2rem 0
}
.accordion-item{
    border:none;
    margin-bottom:1rem;
    border-radius:var(--border-radius)!important;
    overflow:hidden;
    box-shadow:var(--shadow-light);
    transition:var(--transition);
    background:rgb(255 255 255 / .15)!important;
    backdrop-filter:blur(10px)!important;
    border:1px solid rgb(255 255 255 / .2)!important
}
.accordion-item:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-medium);
    background:rgb(255 255 255 / .25)!important
}
.accordion-button{
    border:none;
    border-radius:var(--border-radius)!important;
    font-weight:600;
    padding:1.5rem;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white!important;
    transition:var(--transition);
    min-height:80px;
    overflow:hidden;
    background:rgb(255 255 255 / .1)!important;
    backdrop-filter:blur(15px)!important;
    border:1px solid rgb(255 255 255 / .3)!important
}
.accordion-button::after{
    display:none
}
.accordion-button:not(.collapsed){
    background:rgb(230 78 78 / .8)!important;
    color:white!important;
    backdrop-filter:blur(15px)!important
}
.accordion-button:focus{
    box-shadow:0 0 0 .25rem rgb(230 78 78 / .25);
    color:white!important
}
.accordion-button.btn-success:not(.collapsed){
    background:linear-gradient(135deg,rgb(33 136 56 / .9),rgb(26 160 133 / .8))!important
}
.accordion-button.btn-warning:not(.collapsed){
    background:linear-gradient(135deg,rgb(224 168 0 / .9),rgb(232 89 12 / .8))!important
}
.accordion-button.btn-danger:not(.collapsed){
    background:linear-gradient(135deg,rgb(200 35 51 / .9),rgb(217 26 114 / .8))!important
}
.accordion-button.btn-primary:not(.collapsed){
    background:linear-gradient(135deg,rgb(0 86 179 / .9),rgb(82 13 194 / .8))!important
}
.accordion-button.btn-success{
    background:linear-gradient(135deg,rgb(40 167 69 / .8),rgb(32 201 151 / .7))!important
}
.accordion-button.btn-warning{
    background:linear-gradient(135deg,rgb(255 193 7 / .8),rgb(253 126 20 / .7))!important
}
.accordion-button.btn-danger{
    background:linear-gradient(135deg,rgb(220 53 69 / .8),rgb(232 62 140 / .7))!important
}
.accordion-button.btn-primary{
    background:linear-gradient(135deg,rgb(0 123 255 / .8),rgb(102 16 242 / .7))!important
}
.accordion-button .text-center{
    width:100%;
    display:block;
    color:white!important
}
.accordion-button .text-center h5{
    margin-bottom:.25rem;
    font-size:1rem;
    font-weight:600;
    color:white!important;
    text-shadow:0 1px 2px rgb(0 0 0 / .3)
}
.accordion-button .text-center p{
    margin-bottom:0;
    font-size:.875rem;
    color:white!important;
    opacity:.95;
    text-shadow:0 1px 2px rgb(0 0 0 / .2)
}
.accordion-button,.accordion-button *,.accordion-button .text-center,.accordion-button .text-center h5,.accordion-button .text-center p{
    color:white!important
}
/*.accordion-body{
    padding:1.5rem;
    background:rgb(255 255 255 / .9)!important;
    backdrop-filter:blur(10px)!important;
    border-radius:0 0 var(--border-radius) var(--border-radius);
    font-size:.9rem;
    line-height:1.4;
    border:1px solid rgb(255 255 255 / .3)!important;
    border-top:none!important;
    text-align:right
} */
.works{
    background:linear-gradient(135deg,#221e2d 0%,#2c2c54 100%);
    padding:5rem 0
}
.works .btn-group{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:5px;
    width:100%
}
.works-item {
    width: 100%;
    height: auto !important;         /* 1. Remove the 250px ceiling */
    min-height: 250px;               /* 2. Optional: keeps a minimum size */
    object-fit: contain !important;  /* 3. Shows the WHOLE design */
    transition: var(--transition);
    border-radius: var(--border-radius);
    overflow: visible !important;    /* 4. Let the long design spill out */
    display: block !important;
}

.works-single-item{
    position:relative;
    overflow:hidden;
    border-radius:var(--border-radius);
    margin-bottom:1rem;
    transition:var(--transition);
    box-shadow:var(--box-shadow)
}

.works-single-item-hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-heavy);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(135deg,rgb(230 78 78 / .9),rgb(144 127 191 / .8));
    transition:var(--transition);
    border-radius:var(--border-radius);
    opacity:0;
    display:flex;
    align-items:center;
    justify-content:center
}
.works-single-item:hover .works-single-item-hover{
    opacity:1!important
}
.works-icons-content{
    background:rgb(0 0 0 / .8);
    padding:1.5rem;
    color:var(--light-color);
    font-size:1rem;
    border-radius:var(--border-radius);
    backdrop-filter:blur(10px);
    text-align:center
}
.works-single-item .card.bg-dark{
    background:linear-gradient(135deg,#28587e 0%,#05172a 100%)!important;
    border:none!important;
    overflow:hidden;
    transition:var(--transition)
}
.works-single-item:hover .card.bg-dark{
    background:linear-gradient(135deg,#346b9a 0%,#05172a 100%)!important
}
.works-single-item .card{
    margin:15px!important;
    height:calc(100% - 30px)!important;
    box-shadow:inset 1px 1px 0 rgb(255 255 255 / .2)!important
}
.works-single-item .card.bg-dark{
    background:linear-gradient(135deg,#28587e 0%,#05172a 100%)!important;
    border:none!important;
    overflow:hidden
}
.custom-icon{
    display:inline-block;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
    border:2px solid var(--light-color);
    border-radius:50%;
    color:var(--light-color);
    margin:0 .5rem;
    transition:var(--transition);
    text-decoration:none
}
.custom-icon:hover{
    background:var(--primary-color);
    border-color:var(--primary-color);
    color:var(--light-color);
    transform:scale(1.1)
}
.form{
    background:linear-gradient(135deg,#221e2d 0%,#2c2c54 100%);
    padding:5rem 0;
    color:#fff
}
.form form{
    max-width:650px;
    margin:0 auto;
    padding:30px;
    background-color:rgb(0 0 0 / .4);
    border-radius:var(--border-radius,10px);
    box-shadow:0 0 20px rgb(0 0 0 / .5)
}
.form h3{
    text-align:center;
    color:var(--primary-color,#FFC107);
    margin-bottom:25px;
    font-size:2rem
}
.form-group{
    margin-bottom:20px;
    line-height:1.2
}
.form label{
    display:block;
    margin-bottom:5px;
    font-weight:600;
    color:var(--light-color,#F8F9FA)
}
.form input[type="text"],.form input[type="email"],.form input[type="tel"],.form input[type="password"],.form textarea{
    width:100%;
    padding:12px 15px;
    border-radius:5px;
    border:1px solid #495057;
    background-color:#343A40;
    color:#fff;
    box-shadow:none;
    transition:border-color 0.2s
}
.form input:focus,.form textarea:focus{
    border-color:var(--primary-color,#FFC107);
    outline:none;
    background-color:#495057
}
.form input::placeholder,.form textarea::placeholder{
    color:#ADB5BD
}
.required{
    color:var(--primary-color,#FFC107);
    margin-left:5px
}
.file-upload{
    background-color:#E64E4E;
    padding:15px;
    border-radius:5px;
    border:1px dashed #6C757D;
    text-align:center;
    cursor:pointer
}
.file-upload input[type="file"]{
    opacity:0;
    position:absolute;
    width:100%;
    height:100%;
    cursor:pointer
}
.file-upload p{
    margin:0;
    color:#ADB5BD
}
.form button[type="submit"]{
    width:100%;
    margin-top:30px;
    background-color:var(--primary-color,#E64E4E);
    border:none;
    cursor:pointer;
    font-weight:700
}
.advanced-lightbox-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100dvh;
    background-color:rgb(0 0 0 / .95);
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    visibility:hidden;
    opacity:0;
    transition:opacity 0.3s ease
}
.advanced-lightbox-modal.active{
    visibility:visible;
    opacity:1
}
.lightbox-zoom-wrapper{
    width:100%;
    height:100vh;
    overflow-y:auto;
    display:flex;
    justify-content:center;
    padding:60px 0
}
.lightbox-content{
    max-width:90%;
    position:relative
}
.lightbox-image{
    display:block;
    width:60%;
    margin:0 auto;
    height:auto;
    transition:width 0.4s ease-in-out;
    cursor:zoom-in
}
.lightbox-image.zoomed{
    width:100%;
    cursor:zoom-out
}
.lightbox-prev,.lightbox-next{
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    background:rgb(255 255 255 / .1);
    color:#fff;
    border:2px solid #fff;
    width:50px!important;
    height:50px!important;
    border-radius:50%;
    cursor:pointer;
    z-index:100001;
    display:flex!important;
    align-items:center;
    justify-content:center;
    font-size:18px!important;
    transition:all 0.3s ease
}
.lightbox-prev:hover,.lightbox-next:hover{
    background:#ff3864;
    border-color:#ff3864;
    transform:translateY(-50%) scale(1.1)
}
.lightbox-prev{
    left:30px
}
.lightbox-next{
    right:30px
}
.lightbox-close{
    position:fixed;
    top:20px;
    right:20px;
    background:var(--primary-color);
    color:#fff;
    border:none;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:100002;
    font-size:20px
}
.lightbox-info{
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    background:rgb(0 0 0 / .7);
    color:#fff;
    padding:8px 20px;
    border-radius:30px;
    text-align:center;
    z-index:100001
}
.contact{
     background-image:url(../images/footer_bg.webp);
     background-repeat:no-repeat;
     background-position:center center;
     background-size:cover;
     position:relative;
     padding:5rem 0;
     z-index:1;
}
#contact h2.section-title, 
#contact p.section-paragraph, 
#contact h2 {
    color: #212529 !important; /* Hard-coded dark grey/black */
    position: relative;
    z-index: 2;
}
.contact-content{
    background-color:rgb(255 255 255 / .95);
    backdrop-filter:blur(10px);
    border-radius:var(--border-radius-large);
    margin:2rem 0;
    padding:3rem;
    position:relative;
    z-index:2;
    box-shadow:var(--box-shadow)
}
.address{
    line-height:1.8;
    font-size:1.1rem
}
.address a{
    color:var(--dark-color);
    text-decoration:none;
    transition:var(--transition)
}
.address a:hover{
    color:var(--primary-color)
}
.social-icons{
    margin-top:2rem
}
.social-icons li{
    margin:0 .5rem
}
.social-icons a,.social-icons i{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    transition:var(--transition);
    border-radius:50%;
    margin:.25rem;
    background:var(--primary-color);
    color:#fff;
    border:2px solid rgb(230 78 78 / .5)
}
.social-icons a:hover,.social-icons i:hover{
    transform:translateY(-3px) scale(1.1);
    box-shadow:0 6px 20px rgb(230 78 78 / .3);
    background:var(--secondary-color);
    border-color:var(--secondary-color)
}
.facebook a:hover i{
    background-color:#3b5998;
    border-color:#3b5998
}
.twitter a:hover i{
    background-color:#e1306c;
    border-color:#e1306c
}
#back-to-top{
    width:60px;
    height:60px;
    position:fixed;
    bottom:30px;
    right:30px;
    background:var(--primary-color);
    color:#fff;
    border:none;
    border-radius:50%;
    display:none;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    cursor:pointer;
    z-index:999;
    transition:var(--transition);
    box-shadow:var(--box-shadow);
    opacity:.8
}
#back-to-top.show{
    display:flex!important
}
#back-to-top:hover{
    background-color:var(--secondary-color);
    transform:translateY(-2px) scale(1.1);
    box-shadow:0 8px 20px rgb(0 0 0 / .3)
}
footer{
    padding:2rem 0;
    background:rgb(34 30 45 / .9);
    backdrop-filter:blur(10px)
}
footer a{
    color:var(--primary-color);
    text-decoration:none;
    transition:var(--transition)
}
footer a:hover{
    color:#c73650;
    text-decoration:underline
}
.footer-contact-info{
    opacity:0;
    transform:translateY(30px);
    animation:fadeInUp 1.2s ease-out 0.2s forwards
}
.footer-social-links{
    opacity:0;
    transform:translateY(30px);
    animation:fadeInUp 1.2s ease-out 0.4s forwards
}
.footer-copyright{
    opacity:0;
    transform:translateY(30px);
    animation:fadeInUp 1.2s ease-out 0.6s forwards
}
.social-link-hover{
    transition:all 0.3s ease
}
.social-link-hover:hover{
    transform:translateY(-3px) scale(1.1);
    box-shadow:0 6px 20px rgb(0 0 0 / .15)
}
.footer-link-hover{
    transition:all 0.3s ease;
    position:relative
}
.footer-link-hover:hover{
    color:var(--primary-color)!important;
    text-decoration:none!important;
    transform:translateY(-1px)
}
.footer-link-hover::after{
    content:'';
    position:absolute;
    width:0;
    height:2px;
    bottom:-2px;
    left:50%;
    background-color:var(--primary-color);
    transition:all 0.3s ease;
    transform:translateX(-50%)
}
.footer-link-hover:hover::after{
    width:100%
}
.fade-in-up{
    animation:fadeInUp 0.6s ease-out
}
.fade-in-down{
    animation:fadeInDown 0.6s ease-out
}
.fade-in-left{
    animation:fadeInLeft 0.6s ease-out
}
.fade-in-right{
    animation:fadeInRight 0.6s ease-out
}
.pulse-animation{
    animation:pulse 2s infinite
}
.bounce-animation{
    animation:bounce 2s infinite
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.skip-link{
    position:absolute;
    top:-40px;
    left:6px;
    background:#000;
    color:#fff;
    padding:8px;
    text-decoration:none;
    z-index:1000
}
.skip-link:focus{
    top:6px
}
.btn:focus,.form-control:focus,a:focus,button:focus{
    outline:2px solid var(--primary-color);
    outline-offset:2px
}
#works_container .works-single-item{
    flex:none!important;
    max-width:none!important;
    width:100%!important;
    padding-left:0!important;
    padding-right:0!important
}
#works_container{
    display:grid!important;
    grid-template-columns:repeat(1,1fr)!important;
    gap:1.5rem!important
}
.fa,.fas,.far,.fal,.fab{
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    display:inline-block;
    font-style:normal;
    font-variant:normal;
    text-rendering:auto;
    line-height:1
}
.fa-facebook:before{
    content:"\f09a"
}
.fa-twitter:before{
    content:"\f099"
}
.fa-instagram:before{
    content:"\f16d"
}
.fa-linkedin:before{
    content:"\f08c"
}
.fa-envelope:before{
    content:"\f0e0"
}
.fa-chevron-left:before{
    content:"\f053"
}
.fa-chevron-right:before{
    content:"\f054"
}
.fa-chevron-up:before{
    content:"\f077"
}
.fa-times:before{
    content:"\f00d"
}
#back-to-top .fa-chevron-up{
    margin-left:-11px!important;
    margin-top:0!important;
    position:relative!important;
    top:-1px!important
}
#priceAccordion .accordion-item:nth-child(4) h5{
    text-transform:none!important
}
.works-single-item-hover{
    z-index:10
}
.works-icons-content{
    position:relative;
    z-index:15
}
.works-icons-content a.lightbox-trigger{
    text-decoration:none;
    cursor:pointer
}
.confirmation-message{
    max-width:600px;
    margin:0 auto;
    padding:30px;
    text-align:center;
    background:rgb(0 0 0 / .4);
    border-radius:10px;
    margin-top:250px;
    margin-bottom:150px
}
.confirmation-message h2{
    color:#fff;
    font-size:2rem;
    font-weight:700
}
.confirmation-message ul{
    margin-bottom:0!important;
    padding-bottom:0!important;
    text-align:left;
    list-style-type:none;
    padding-left:0;
    font-size:1.1rem;
    line-height:1.4
}
.confirmation-message ul li{
    margin:0!important;
    padding:2px 0
}
.launch-promise{
    font-size:1.5rem;
    font-weight:500;
    color:var(--light-color,#F8F9FA);
    margin-top:5px!important;
    padding-top:0!important;
    margin-bottom:30px
}
.launch-promise .text-primary{
    color:var(--primary-color,#FFC107)!important
}
.confirmation-message .button-down{
    margin-top:20px
}
.works-icons-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px
}
.action-buttons-top{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px
}
.paypal-buy-group{
    display:flex;
    align-items:center;
    gap:10px;
    padding:5px 0;
    justify-content:center
}
.price-tag{
    font-size:1.5rem;
    font-weight:700;
    color:var(--color-white);
    text-shadow:0 1px 3px rgb(0 0 0 / .5)
}
.paypal-form-inline{
    display:flex;
    align-items:center
}
.paypal-buy-group input[type="image"]{
    max-width:80px;
    height:auto;
    transition:transform 0.2s ease
}
.works-single-item.mobile-active .works-single-item-hover{
    opacity:1!important
}
    .faq{
        background:linear-gradient(135deg,#221e2d 0%,#2c2c54 100%);
        padding:5rem 0
    }
    .accordion-body,.accordion-body *,#priceAccordion .accordion-body,#priceAccordion .accordion-body *{
        color:#212529!important
    }
     .faq .accordion-item{
        box-shadow:var(--shadow-heavy);
        margin-bottom:15px;
        border-radius:var(--border-radius-large);
        border-color:transparent!important
    }
    #faq .accordion-item .accordion-button{
        color:var(--light-color)!important;
        border:none!important;
        box-shadow:none!important;
        padding:1.5rem;
        font-weight:700;
        font-size:1.1rem;
        text-transform:none;
        background-image:none!important
    }
    #faq .accordion-item .accordion-button:not(.collapsed){
        background-color:#942727!important;
        color:var(--light-color)!important;
        box-shadow:0 4px 10px rgb(0 0 0 / .2);
        border-color:#942727!important;
        filter:none!important
    }
    #faq .accordion-item .accordion-button:focus{
        background-color:#bb3d3d!important;
        box-shadow:none!important;
        outline:0!important
    }
    #faq .accordion-button::after{
        filter:invert(1)!important;
        background-image:none!important
    }
    /*.faq .accordion-body{
        background-color:white!important;
        color:#333!important;
        text-align:left
    }*/
/* --- 1. FONTS & VARIABLES --- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&family=Roboto:wght@300;700&display=swap');

:root {
    --primary-color: #ff3864;
    --secondary-color: #907fbf;
    --dark-color: #1a1a2e;
    --light-color: #fff;
    --transition: all 0.3s ease;
    --gradient-primary: linear-gradient(135deg, #ff3864, #c73650);
    --gradient-secondary: linear-gradient(135deg, #907fbf, #6f42c1);
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 5px 20px rgba(0, 0, 0, 0.15);
    --shadow-heavy: 0 15px 35px rgba(0, 0, 0, 0.3);
    --border-radius: 10px;
    --border-radius-large: 20px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* --- 2. GLOBAL RESET & BASE STYLES --- */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }

html, body {
    background-color: var(--dark-color) !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

body, p, h1, h2, h3, h4, h5, h6, span, div:not([class*="fa"]) {
    font-family: 'Raleway', 'Helvetica', sans-serif !important;
}

body { overflow-x: hidden; line-height: 1.6; }

::selection { background: var(--primary-color); color: var(--light-color); }
a { transition: var(--transition); text-decoration: none; }
a:hover { color: var(--primary-color); }

/* --- 3. TYPOGRAPHY & UTILITIES --- */
.wrapper { padding: 50px 0 30px; }

.section-title {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.section-paragraph { font-size: 1rem; font-weight: 400; letter-spacing: 1px; }
.text-large { font-size: 1.125rem; line-height: 1.7; }

.custom-red { color: var(--primary-color) !important; }
.custom-purple { color: var(--secondary-color) !important; }
.custom-white { color: var(--light-color) !important; }
.custom-black { color: var(--dark-color) !important; }
.bg-dark-custom { background-color: var(--dark-color) !important; }

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
}

/* --- 4. NAVIGATION --- */
.navbar {
    background: var(--dark-color);
    padding: 1.5rem 0;
    min-height: 80px;
    transition: var(--transition);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.navbar.scrolled {
    padding: .5rem 0;
    background: rgba(34, 30, 45, 0.95) !important;
    backdrop-filter: blur(10px);
}

.navbar-brand.logo { font-size: 1.5rem; letter-spacing: 6px; color: var(--light-color) !important; }

.navbar-nav .nav-link {
    color: var(--secondary-color) !important;
    text-transform: uppercase;
    margin: 0 .5rem;
    padding: .5rem 1rem !important;
    border: 1px solid transparent;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
    border-color: var(--primary-color);
}

/* --- 5. BUTTONS --- */
.btn-custom, .btn-primary {
    border: none;
    color: #fff;
    padding: .75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    box-shadow: var(--box-shadow);
}

.btn-custom { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.btn-primary { background: var(--gradient-primary); }

.btn-custom:hover, .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(230, 78, 78, 0.3);
    color: #fff;
}

/* --- 6. HEADER --- */
.header {
    background: var(--dark-color) url(../images/www.webp) no-repeat center center / cover;
    position: relative;
    padding: 10rem 0 5rem;
}

.header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.header-content { position: relative; z-index: 3; text-align: center; }


.heading {
    font-weight: 700;
    padding: 1rem 2rem;
    letter-spacing: 8px;
    border: 2px solid var(--light-color);
    display: inline-block;
    font-size: 2.2rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    color: white !important;
}

/* --- 7. FAQ & ACCORDION --- */
.accordion-item {
    border: none;
    margin-bottom: 1rem;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-light);
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
}

.accordion-button {
    font-weight: 600;
    padding: 1.5rem;
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius) !important;
    text-align: left !important;
    display: flex;
    align-items: center;
}

.accordion-button strong, .accordion-button b {
    display: inline-block !important;
    margin: 0 5px !important;
   /* color: white !important;*/
}

/* FAQ Answer Fix: Always dark text on white background, Left Aligned */
/*.accordion-body, .accordion-body * {
    background-color: #ffffff !important;
    color: #212529 !important;
    text-align: left !important;
    padding: 1.5rem;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}*/

/* --- 8. WORKS GRID --- */
#works_container {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    counter-reset: design-counter;
}

.works-single-item {
    position: relative;
    counter-increment: design-counter;
    border-radius: var(--border-radius);
    overflow: visible !important;
    transition: var(--transition);
}

.works-single-item::before {
    content: counter(design-counter);
    position: absolute;
    top: 15px; left: 15px;
    background: #0070ba;
    color: #fff;
    width: 26px; height: 26px;
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
    font-weight: bold;
    opacity: 0.4;
    z-index: 5;
}

.works-single-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

.works-single-item-hover {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(230, 78, 78, 0.9), rgba(144, 127, 191, 0.8));
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: #ffffff !important;
}
.works-single-item:hover .works-single-item-hover { opacity: 1 !important; }



/* --- 9. LIGHTBOX & BACK TO TOP --- */
.lb-outerContainer, .lb-dataContainer {
    background: linear-gradient(180deg, #05172a 0%, #4b6584 100%) !important;
}

.lb-caption, .lb-number, .lb-caption .paypal-buy-group {
    opacity: 0.75 !important;
}

.back-to-top-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.back-to-top-circle i {
    position: static !important;
    margin: 0 !important;
}


/* Ensure visibility on custom background sections */
.banner-area, .commitments-area, .ready-to-launch, .cta-area, 
.banner-area *, .commitments-area *, .ready-to-launch *, .cta-area * {
    color: #ffffff !important;
}


/* 1. Set a clean, universal base for all accordion answers */
.accordion-body {
    padding: 1.5rem;
    background-color: #ffffff; /* Clean white background for readability */
    color: #212529; /* Dark, professional text */
    text-align: left; /* No !important needed if we only have one rule */
    line-height: 1.6;
    border-radius: 0 0 10px 10px;
}

/* 2. Fix the "Strong" spacing issue */
/* This removes the extra margin that was pushing your bold words apart */
.accordion-body strong, 
.accordion-body b {
    display: inline; 
    margin: 0; 
    padding: 0;
}


/* Forces the price tags to stay white on all devices, including stubborn tablets */
.price-tag {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; /* Overrides tablet Dark Mode color injection */
}



.btn-pill {
    border-radius: 50px !important;
    padding: 10px 25px !important;
    font-weight: 600;
    transition: all 0.3s ease;
}