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

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #1E1E1E;
}


/* Nav Styling */
.navbar .navbar-brand img{
    max-width: 150px; 
    height: auto;
}

/* Nav Toggler */
/* Customizing the hamburger icon */
.navbar-toggler {
    border: none;
    background: none;
    outline: none;
    padding: 0;
    margin-right: 15px;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none; /* Ensure no focus outline or shadow */
}



/* Remove outline and shadow from the entire icon */
.navbar-toggler-icon {
    outline: none;
    box-shadow: none;
    border: none;
    background: none;
    
}


.navbar-toggler-icon div {
    outline: none;
    box-shadow: none;
}


.navbar-toggler-icon:focus,
.navbar-toggler-icon div:focus,
.navbar-toggler-icon span:focus {
    outline: none;
    box-shadow: none;
}



/* Basic setup for the icon container */
.navbar-toggler-icon {
    position: relative;
    width: 30px;
    height: 3px;
    background-color: transparent;
    transition: all 0.3s ease;
}

/* Top, middle, and bottom bars */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon div {
    content: '';
    position: absolute;
    width: 30px;
    height: 5px;
    background-color: #FFFFFF;
    transition: all 0.3s ease;
    border:1px solid #000000;
}

/* Position top and bottom bars */
.navbar-toggler-icon::before {
    top: -10px;
}

.navbar-toggler-icon::after {
    top: 10px;
}

/* Middle bar */
.navbar-toggler-icon div {
    top: 0;
}

/* When toggled, rotate the top and bottom to form an X */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
    transform: rotate(-45deg);
    top: 0;
}

/* Hide the middle bar when toggled */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon div {
    opacity: 0;
}

/* Reset everything when collapsed */
.navbar-toggler.collapsed .navbar-toggler-icon::before,
.navbar-toggler.collapsed .navbar-toggler-icon::after {
    transform: none;
}

.navbar-toggler.collapsed .navbar-toggler-icon::before {
    top: -10px;
}

.navbar-toggler.collapsed .navbar-toggler-icon::after {
    top: 10px;
}

.navbar-toggler.collapsed .navbar-toggler-icon div {
    opacity: 1;
}




.nav-item .nav-link{
    color:#C4C4C4;
    font-size: 0.75rem;

}

.nav-item .nav-link.active{
    color:#FFFFFF;

}

nav .login_button{
    background-color: #FFFFFF;
    color:#000000;
    font-size: 0.75rem;
    padding: 15px 40px;
}

nav .login_button:hover{
    background-color: #FFFFFF;
    color:#000000;
}

@media (max-width: 991.98px) { /* Medium and smaller devices */
    .navbar-toggler {
        margin-left: auto; 
    }

    .navbar-brand {
        margin-right: auto; 
    }

    .container {
        padding: 0 15px; 
    }
}

@media (max-width: 768px) {
    .navbar .navbar-brand img {
        max-width: 120px; 
    }

    .navbar-nav {
        margin-top: 20px;
        gap:10px !important;
        
    }

    .nav-item .nav-link{
        font-size: 1.3rem;
        margin-left: 5px;
        letter-spacing: 1px;
    
    }

    nav .login_button{
        margin-top: 10px;
        font-size: 1rem !important;

    } 
}


@media screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar .navbar-brand img {
        max-width: 150px; 
    }

    .navbar-nav {
        margin-top: 25px;
        gap:8px !important;
        
    }

    .nav-item .nav-link{
        font-size: 1.5rem;
        margin-left: 5px;
        letter-spacing: 1px;
    
    }

    nav .login_button{
        margin-top: 15px;
        font-size: 1.2rem !important;
    } 
    
}



/* Home page styling */


.home_header {
    margin-bottom: 80px;
}

.home_header .row{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
}


.home_header h1{
    max-width: 600px;
    color: #FFFFFF;
    line-height: 1.2;
    font-size: 4.5rem;
    margin-bottom: 20px;
}


.home_header h6{
    max-width: 620px;
    color:#8B949E;
    font-size:1rem;
    margin-bottom: 20px;
}

.home_header p{
    color:#FFFFFF;
    font-size:1.25rem;
    margin-bottom: 30px;
}

.home_header .cta_button_box{
    display: flex;
    justify-content: center;
    gap: 20px;
}


.home_header .cta_button_a {
    background-color: #FF8C27;
    color:#000000;
    font-size: 0.75rem;
    padding: 15px 40px;
    border-radius: 10px;
}

.home_header .cta_button_b {
    border: 1px solid #FFFFFF;
    color:#FFFFFF;
    font-size: 0.75rem;
    padding: 15px 40px;
    border-radius: 10px;
}


@media (max-width:767px){
    .home_header{
        padding:0px 10px;
    }

    .home_header h1{
        max-width: 300px;
        line-height: 1.2;
        font-size: 2.6rem;
        margin-bottom: 25px;
    }
    
    
    .home_header h6{
        font-size:0.8rem;
        margin-bottom: 25px;
    }
    
    .home_header p{
        font-size:1rem;
        margin-bottom: 35px;
    }
    
    .home_header .cta_button_box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 25px;
    }

}


/* Your Product your way */ 
.your_project_way_section{
    margin-bottom: 55px;
}


.your_project_way_section h4{
    color:#FFFFFF;
    max-width: 700px;
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 60px;
}

.your_project_way_section .row:nth-child(2){
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.your_project_way_section .set{
    display: flex;
    justify-content: center !important;
    gap: 10px;
}

.your_project_way_section .set .col-md-5{
    border: 1px solid #3E3E3E !important;
    background-color: #121212;
    border-radius:10px;
    flex-grow: 1;
    padding:25px 20px;
    margin-bottom: 10px;

}

.your_project_way_section .set img{
    width:10%;
    margin-bottom: 15px;
}

.your_project_way_section p{
    text-align: start;
    color:#FFFFFF;
    font-size: 0.9rem;
    margin:0 0 10px 0;
    font-weight: 600;
}

.your_project_way_section span{
    text-align: start;
    color:#FFFFFF;
    font-size: 0.65rem;
    line-height: 1;
    margin:0;
    font-weight: 200;
}

.your_project_way_section .platform_btn{
    color:#000000;
    background-color: #ffffff;
    font-size: 0.75rem;
    padding: 15px 40px;
    border-radius: 10px;
    font-weight: 600;
}


@media (max-width:767px){
    .your_project_way_section{
        padding: 0px 15px;
        /* margin-bottom:5px !important; */
    }

    .your_project_way_section h4{
        font-size: 1.9rem;
    }

    .your_project_way_section .set .col-md-5{
        padding:35px 20px;
    
    }

}






/* Product Branding Section */


.branding_section h4{
    color:#7EE787;
    max-width: 700px;
    font-size: 2.5rem;
    font-weight: 100;
    margin-bottom: 60px;
}



.branding_section span{
    color:#FFFFFF;
}



.branding_section .row:nth-child(2){
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.branding_section .row{
    gap:10px !important;
}



.branding_section .set .col-md-5{
    border: 1px solid #3E3E3E !important;
    border-radius:10px;
    flex-grow: 1;
    padding:25px 20px;
    margin-bottom: 10px;

}

.branding_section .set img{
    width:10%;
    margin-bottom: 15px;
}

.branding_section p{
    text-align: start;
    color:#FFFFFF;
    font-size: 0.8rem;
    margin:0;
    font-weight: 300;
}

@media (max-width:767px){
    .branding_section{
        padding: 0px 15px;
        margin-bottom:5px !important;
    }

}




/* Creative development styling */
.creative_development_section h4{
    color:#FF8C27;
    max-width: 700px;
    font-size: 2.5rem;
    font-weight: 100;
    margin-bottom: 60px;
}

.creative_development_section .row{
    display: flex;
    justify-content: center;
    gap: 15px;

}

.creative_development_section .row .col-md-5{
    padding:20px 30px;
    border: 1px solid #3E3E3E;
    border-radius: 10px;
    margin-bottom: 13px;

}

.creative_development_section img{
    width:10%;
    margin-bottom: 10px;
    padding-left: 7px;
}

.creative_development_section p{
    text-align: start;
    color:#FFFFFF;
    font-size: 0.9rem;
    padding:0px 10px;
}

.creative_development_section .creative_tags{
    display: flex;
    flex-wrap: wrap;
    gap:12px;
    padding: 0px 10px;
}


.creative_development_section span{
    color:#F9F9F9;
    background-color: #3E3E3E;
    font-size:0.7rem;
    padding:10px 20px;
    border-radius: 10px;
}

.creative_development_section .creative_btn{
    color:#000000;
    background-color: #ffffff;
    font-size: 0.75rem;
    padding: 15px 40px;
    border-radius: 10px;
    margin-top: 40px;
}

@media (max-width:767px){
    .creative_development_section{
        padding: 0px 15px
    }

    .creative_development_section img{
        width:17%;
        margin-bottom: 10px;
        padding-left: 7px;
    }
    

    .creative_development_section .creative_btn{
        font-size: 0.65rem;
        padding: 10x 10px;
        margin-top: 30px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .creative_development_section .row .col-md-5{
        flex-grow: 1;
    }
}



/* Hassle free styling */

.hassle_free_section h4{
    color:#EA6045;
    max-width: 700px;
    font-size: 2.5rem;
    font-weight: 100;
    margin-bottom: 50px;
}

.hassle_free_section .row{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;

}

.hassle_free_section .row .col-md-5{
    padding:20px 15px;
    border: 1px solid #3E3E3E;
    border-radius: 10px;
    margin-bottom: 10px;
    flex-grow: 1;

}

.hassle_free_section h5{
    color:#A1A1A1;
    font-size: 2rem;
    padding:0;
    margin-bottom: 15px;
}

.hassle_free_section p{
    color:#FF8C27;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.hassle_free_section small{
    color:#FFFFFF;
    font-size: 0.7rem;
    margin:0;
}

@media (max-width:767px){
    .hassle_free_section{
        padding: 0px 15px
    }
}



/* Some of our work styling */

.work_section h4{
    color:#FFB727;
    max-width: 700px;
    font-size: 2.5rem;
    font-weight: 100;
    margin-bottom: 50px;
}

.work_section .row{
    display: flex;
    justify-content: center;

}

.work_img_box1{
    display: flex;
    position: relative;
    background-color: #000000;
    width: 80%;
    justify-content: end;
    padding: 0;
    margin-bottom: 10px;
}

.work_img_box1 img{
    width:90%;
    right:0;
    
}

.work_img_box1 p{
    color:#FFFFFF;
    position: absolute;
    max-width: 370px;
    top:35px;
    left:15px;
    font-size: 1.5rem;
    font-weight: 100;
}

.work_section span{
    color:#EBF5FF80;
}

.work_images_lower .row{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0 6px;
}

.work_images_lower .col{
    background-color: #000000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.work_images_lower p{
    color:#ffffff;
    font-size: 1.5rem;
    font-weight: 100;
    margin: 50px 30px
}

.work_img_box2 p{
    font-size: 1.55rem !important;
}





@media (max-width:767px){
    .work_section{
        padding: 15px;
    }

    .work_img_box1{
        display: flex;
        flex-direction: column;
        position: relative;
        background-color: #000000;
        width: 100%;
        justify-content: center;
        padding: 0;
    }
    
    .work_img_box1 p{
        position: relative;
        margin:0;
        padding:0px 10px;
        left:0px;
        font-size:1.3rem !important;
    }

    .work_img_box1 img{
        width:100%;
        margin-top: 35px !important;
        
    }

    .work_images_lower .col-lg-10{
        padding:0;
        margin:0;
        flex-grow: 1;
    }

    .work_images_lower .row{
        display: flex;
        flex-direction: column;
        padding:0 !important;
        margin:0 !important;
        gap:10px
    }

    .work_images_lower p{
        margin:0;
        padding:5px 10px;
        font-size:1.3rem !important;
        margin-bottom: 25px;
    }

    .work_images_lower .work_img_box2{
        padding:0
    }
   
}



@media screen and (min-width: 768px) and (max-width: 1023px) {
    .work_img_box1{
        flex-grow: 1;
    }

    .work_img_box2{
        flex-grow: 1 !important;
    }

    .work_img_box1 p{
        max-width: 300px;
        font-size:1.3rem !important;
        top:15px;
    }

    .work_images_lower .col-lg-10,
    .work_images_lower .row{
        margin: 0 !important;
        padding: 0!important;
    }

    .work_images_lower p{
        position: relative;
        top:7px;
        margin:0;
        padding:10px 5px;
        font-size:1.2rem !important;
        margin-bottom: 20px;
    }
}





/* Home Pricing  styling */

.home_pricing h4{
    color:#FFFFFF;
    max-width: 700px;
    font-size: 2.1rem;
    font-weight: 100;
    margin-bottom: 50px;
}

.home_pricing .row{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;

}

.home_pricing .pricing_type .col-md-5{
    padding:15px 30px;
    border: 1px solid #C4C4C4;
    background-color: #000000;
    border-radius: 10px;
    flex-grow: 1;

}

.home_pricing h5{
    color:#FFFFFF;
    font-size:1rem
}

.home_pricing p{
    color:#B7BFC7;
    font-size:0.9rem;
    margin:0;
}

.home_pricing .home_pricing_button_box{
    margin-top: 30px;

}

.home_pricing_button_box .col-md-5:nth-child(1){
    text-align: end;
    padding:0;
}

.home_pricing_button_box .col-md-5:nth-child(2){
    text-align: start;
    padding:0;
}

.home_pricing .home_pricing_button1,
.home_pricing .home_pricing_button2 {
    font-size: 0.75rem;
    padding: 15px 35px;
    width:80%;
    border-radius: 10px;
}

.home_pricing .home_pricing_button1 {
    background-color: #FFFFFF;
    color:#000000;
}

.home_pricing .home_pricing_button2 {
    border: 1px solid #FFFFFF;
    color:#FFFFFF;
}

@media (max-width:767px) {
    .home_pricing{
        padding: 0px 15px;
    }

    .home_pricing .home_pricing_button_box{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .home_pricing .home_pricing_button1,
    .home_pricing .home_pricing_button2 {
        width:100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px){
    .home_pricing .home_pricing_button1,
    .home_pricing .home_pricing_button2 {
        width:100%;
    }
}



/* Powered by styling */

.powered_by_section h4{
    color:#FFFFFF;
    max-width: 700px;
    font-size: 2.1rem;
    font-weight: 100;
    margin-bottom: 40px;
}

.powered_by_section .row{
    display: flex;
    justify-content: center;
}

.powered_by_section .powered_by_box{
    display: flex;
    justify-content: center !important;
    gap: 10px;
}



.powered_by_section .powered_by_box .col-md-5{
    border: 1px solid #3E3E3E !important;
    border-radius:10px;
    flex-grow: 1;
    padding:15px 20px;
    margin-bottom: 10px;
}

.powered_by_section img{
    width:10%;
    margin-bottom: 15px;
}

.powered_by_section p{
    text-align: start;
    color:#FFFFFF;
    font-size: 0.7rem;
    margin:0;
}

.powered_by_section .powered_by_btn{
    color:#000000;
    background-color: #FF8C27;
    font-size: 0.75rem;
    padding: 15px 40px;
    border-radius: 10px;
    margin-top: 40px;
}

@media (max-width:767px) {
    .powered_by_section{
        padding: 0px 15px;
    }
}

/* Footer styling */

footer{
    padding: 25px 10px 10px 10px;
}

footer img{
    width:17%
}

footer .row:nth-child(1){
    margin-bottom: 35px;
}

footer h4{
    font-size: 0.9rem;
    color:#FFFFFF;
    margin-bottom: 20px;
}

footer p{
    font-size: 0.8rem;
    color:#FFFFFF;
    margin:5px 0px;
}

footer .quick_link_box{
    padding-top: 30px;
}

footer .quick_links{
    display: flex;
    flex-direction: column;
    justify-content: end;
}


footer .quick_links ul{
    list-style-type: none;
    margin:0;
}

footer .quick_links li{
    margin-bottom: 6px;
}

footer .quick_links img{
    width:15%;
    margin-right: 10px;
}

footer .quick_links a{
    color:#FFFFFF !important;
    font-size: 0.8rem;
    text-decoration: none;
    margin: 0 !important;
    padding:0 !important;
}

footer .widget_a{
    display: flex;
    flex-direction: column;
    align-items: end;
}

footer .widget_a div{
    display: flex;
    margin-bottom: 10px;
    width: 80%;
}

footer .widget_a small{
    color: #FFFFFF;
    font-size: 0.8rem;
}

footer .widget_a a{
    text-align: end;
}

footer .widget_a a img{
    width:65% !important;
}


@media (max-width:767px){
    footer{
        padding: 10px 15px;
    }

    footer img{
        width:60%
    }

    footer .row:nth-child(1){
        margin-bottom: 15px;
    }

    footer h4{
        font-size: 1.1rem;
        margin-bottom: 20px;
    }

    footer p{
        font-size: 1rem;
        margin:15px 0px !important;

    }

    footer span{
        font-weight: 100;
    }

    footer .quick_link_box{
        padding-top: 15px;
    }

    .quick_link_box .row{
        padding:0px 10px;
        display: flex;
        flex-direction: column;
        gap:10px;
    }

    footer .quick_links{
        padding:0;
    }

    footer .quick_links ul{
        padding:0;
        margin:0;
    }

    footer .quick_links ul li{
        margin-bottom: 13px;
    }

    footer .widget_a{
        display: flex;
        flex-direction: column;
        align-items: start;
        margin:0;
        padding:0;
        text-align: start !important;
    }
    
    footer .widget_a div{
        display: flex;
        justify-content: start;
        gap:13px;
        margin-bottom: 13px;
    }
    
    footer .widget_a small{
        font-size: 0.8rem;
        margin:0;
    }
    
    footer .widget_a a{
        text-align: start;
    
    }
    
    footer .widget_a a img{
        width:65% !important;
    }
}


@media screen and (min-width: 768px) and (max-width: 1024px) {
    footer{
        padding: 25px 10px 40px 10px !important;
    }


    footer .quick_links ul li{
        display: flex;
        position: relative;
        left: -35px;
        text-wrap: nowrap;
        margin-bottom: 13px;
    }

    footer .widget_a small{
        text-align: end !important;
        font-size: 0.9rem !important;
        max-width: 140px;
    }
    
}



/* Services Page Styling */

/* Services Header styling */
.tools_and_platforms_header,
.pricing_header,
.services_header{
    width:100%;
    height:270px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tools_and_platforms_header .row,
.pricing_header .row,
.services_header .row{
    max-width: 650px;
    margin:0 auto;
}


.tools_and_platforms_header h1,
.pricing_header h1,
.services_header h1{
    color: #FFFFFF;
    font-size: 4.5rem;
    font-weight: 500;
    margin-bottom: 40px;
}


.tools_and_platforms_header p,
.pricing_header p,
.services_header p{
    color:#8B949E;
    font-size: 1.2rem;
}





/* Services section styling */
.services_body_section{
    margin-bottom: 70px;
}



.services_body_section img{
    width:5%;
    margin:0;
    /* margin-bottom: 15px; */
}

.services_body_section .main{
    display: flex;
    flex-direction: column;
    gap:15px;
}

.services_body_section .main .service_box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:15px;
    background-color: #0B0B0B;
    padding:15px 25px;
    border-radius: 12px;
}

.services_body_section .main p{
    color:#FFFFFF;
    font-size: 1.1rem;
    margin:0px;
    padding:0px;
}

.services_body_section .main small{
    color:#B7BFC7;
    font-size: 0.8rem;
    margin:0;
}

.services_body_section .main ul{
    margin:0;
}

.services_body_section .main ul li{
    color:#FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 12px;
}


.service_what_covered {
    position: relative;
    display: inline-block;
    width: fit-content;
    background-color: #121212;
    padding: 15px 20px;
    border-radius: 12px;
    z-index: 1;
    text-align: center; /* Center-align text */
}

.service_what_covered small {
    position: relative;
    color: #FFFFFF !important;
    font-size: 0.8rem; /* Adjusted size for better readability */
    z-index: 2; /* Ensures consistent spacing for text lines */
    display: block;
    padding: 8px 5px;
}

.service_what_covered div {
    position: absolute;
    top: 50%; /* Center vertically within the parent */
    left: 50%; /* Center horizontally based on width */
    transform: translate(-50%, -50%); /* Center it */
    height: 75%; 
    width: 85%;
    border-radius: 12px;
    background-color: #000000;
    z-index: -1; /* Place behind text */
}



.services_body_section .bottom{
    display: flex;
    gap:12px;
    margin:0;
    padding:0
}


.services_body_section .bottom img{
    width:10%
}


.services_body_section .bottom .service_what_covered{
    width:auto;
    text-align: start;
    display: inline-flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center the content */
    justify-content: start;
}



.services_body_section .bottom .service_what_covered small{
    padding: 8px 5px;
    font-size: 0.8rem; 
}


.services_body_section .bottom .service_what_covered div {
    position: absolute;
    top: 50%;
    left:2%;
    transform: translateY(-50%);
    height: 75%; 
    width: 16%;
    border-radius: 12px;
    background-color: #000;
    z-index: -1;
}



.services_cta{
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap:8%;
    align-items: end;
    margin:0px !important;
    padding:0px !important;

}

.services_cta button:nth-child(1) {
    background-color: #FF8C27;
    color:#000000;
    font-size: 1rem;
    padding: 15px 90px;
    border-radius: 10px;
}


.services_cta button:nth-child(2){
    color:#000000;
    background-color: #ffffff;
    font-size: 1rem;
    padding: 15px 50px;
    border-radius: 10px;
    margin-top: 40px;
}

@media only screen and (width:1024px) {
    .services_body_section .bottom .service_what_covered div{
        width:20%;
    }

   
}

@media only screen and (width:540px){
    .service_what_covered div {
        width: 85% !important;
    }

    body .services_body_section .bottom .service_what_covered div{
        top: 50%; 
        left:2%;
        transform: translateY(-50%);
        width:16% !important;
    }
}



@media screen and (min-width: 768px) and (max-width: 1023px) {
    .services_body_section img{
        width:11%;
    }

    .services_body_section .bottom img{
        width:24%
    }

    .services_body_section .main p{
        font-size: 1.7rem !important;
    }
    
    .services_body_section .main small{
        font-size: 1.2rem;
    }

    .service_what_covered small {
        font-size: 1rem !important;
    }

    .services_body_section .main ul li{
        font-size: 0.8rem;
    }

    .service_box .col-md-3{
        flex-grow: 1;
    }

    .services_body_section .bottom .service_box {
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        
    }

    .services_body_section .bottom .service_what_covered small {
        font-size: 1rem !important;
        padding: 8px 5px;
    }

    .services_body_section .bottom .service_what_covered div{
        width:33%;
    }

}



@media (max-width: 767px) {
    .pricing_header,
    .services_header{
        margin-top: 20px !important;
    }
    

    .pricing_header h1,
    .services_header h1{
        font-size: 3.5rem !important;
        margin-bottom: 20px;
    }
    
    .pricing_header p,
    .services_header p{
        font-size: 1.1rem;
    }

    .services_body_section{
        margin-bottom: 35px;
    }


    .services_body_section img{
        width:16%;
        margin:0;
    }
    
    .services_body_section .main{
        padding: 0px 10px;
    }

    .services_body_section .main .service_box .row{
        padding: 5px 0px;
    }

    .services_body_section .bottom img{
        width:16%;
    }

    .services_body_section .bottom .service_what_covered div{
        width: 25% !important;
    }

    .services_cta{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around !important;
        gap:5px !important;
        margin-top: 20px !important;
    
    }


    .services_cta button:nth-child(2){
        font-size: 0.6rem;
        padding: 10x 5px;
        margin-top: 30px;
    }

    .service_what_covered {
        padding: 12px 16px; 
    }

    .service_what_covered div {
        width: 80%; 
        height: 80%;
    }
    
    body .services_body_section .bottom .service_what_covered small,
    .service_what_covered small {
        font-size: 0.7rem !important;
    }
}



@media screen and (max-width: 480px) {
    .service_what_covered {
        padding: 10px 14px;
    }
    .service_what_covered div {
        width: 87%; /* Wider for very small devices */
        height: 75%;
    }
    .service_what_covered small {
        font-size: 0.65rem;
    }

    .services_body_section .bottom .service_what_covered div{
        width: 21% !important;
    }
}


@media screen and (min-width: 321px) and (max-width: 375px) {

    .services_body_section .bottom .service_what_covered div{
        width: 24% !important;
    }
}


@media (max-width: 320px){
    .services_body_section .bottom .service_what_covered div{
        width: 30% !important;
    }
}


/* Pricing Page styling */

.pricing_body .row{
    display :flex;
    justify-content: center;
    gap:15px;
    padding: 15px 0px;
}


.pricing_body .col-lg-4{
    padding: 25px 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    margin:0

}

.pricing_body .col-lg-4:nth-child(1){
    border: 1px solid #C4C4C4;
    background-color: #0B0B0B;
}


.pricing_body .col-lg-4:nth-child(2){
    border: 1px solid #0F4A78;
}

.pricing_body .col-lg-4:nth-child(3){
    border: 1px solid #00FF16
}

.pricing_body .col-lg-4:nth-child(4){
    border: 1px solid #FF8C27
}

.pricing_body p{
    color:#FFFFFF;
    font-size: 1.45rem;
    margin-bottom: 8px;
}

.pricing_body small{
    color:#B7BFC7;
}


.pricing_body h2{
    color:#FFFFFF;
    margin: 27px 0px;
}


.pricing_option {
    display: flex;
    flex-direction:row;
    justify-content: space-around;
    align-items: center;
    height:45px;
    margin-bottom:25px;
    position: relative;
    background-color: #121212;
    border-radius: 12px;
    z-index: 1; 
}


.pricing_option button{
    color:#ffffff;
    margin:0;
    padding:0;
    position: relative;
    z-index: 3;
    font-size: 0.7rem;
}

.pricing_option button:hover,.pricing_option button:active{
    color:#ffffff;
}


.pricing_option div {
    position: absolute; 
    top: 50%;
    transform: translateY(-50%);
    height: 75%; 
    width: 40%;
    border-radius: 12px;
    background-color: #1E1E1E;
    z-index: 2;
    transition: left 0.4s ease;
}



.pricing_body ul{
    margin:0px 0px 20px 0px;
    padding:0;
}

.pricing_body ul small{
    color:#FFFFFF;
    font-size: 0.9rem;
}

.pricing_body ul li {
    list-style: none; 
    padding-left: 30px; 
    background-image: url('/static/images/tick_icon.png');
    background-size: 20px 20px; 
    background-repeat: no-repeat;
    background-position: left center;
    color:#FFFFFF;
    margin-bottom: 7px;
    font-size: 0.7rem;

}

.pricing_body .d-grid button{
    color:#1E1E1E;
    background-color: #FFFFFF;
    border-radius: 12px;
    padding:15px 30px;
    font-size: 0.75rem;
}

@media (max-width:767px) {
    .pricing_body{
        padding:0px 15px;
        margin-bottom: 25px;
    }

    .pricing_body .row{
        gap:20px;
    }
}






.password_updated_title{
    color: #FFFFFF !important;
    font-size: 0.9rem !important;
}





/* Request Form Styling */

.modal-content{
    background-color: #1E1E1E;
    padding:0px 30px;
    margin: 0 !important;
}

.modal-header,
.modal-body {
    border:none !important
}


.modal-content .modal-header .back_btn {
    margin-top: 10px;
    color:#ffffff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;

}

.modal-content .modal-header .back_btn img{
    width:15px;
    height:auto;
    margin-right:8px
}

.modal-content h1{
    text-align: center;
    font-size: 1.7rem;
    color:#FFFFFF
}

.modal-content p{
    color:#E3E3E3;
    text-align: center;
    font-size: 0.825rem;
    line-height: 1.8;
}

.modal-content form{
    padding:0px 35px;
}

.modal-content label{
    color:#F9F9F9;
    font-size:0.7rem;
    margin-bottom: 5px;
}


.modal-content select{
    height:38px;
}


.modal-content textarea:placeholder-shown,
.modal-content select:placeholder-shown,
.modal-content input:placeholder-shown{
    font-size: 0.8rem;
}




.modal-content input,
.modal-content select,
.modal-content textarea{
    background-color: transparent !important;
    color:#787878;
    font-size: 0.8rem;
    
}

.input-group-text{
    background-color: transparent;
    color:#FFFFFF;
    border-right: none !important;
    
}

.input-group input{
    border-left: none !important;
}

.modal-content .prefered_contact_method {
    display: flex;
    flex-direction: column;
}


.modal-content .prefered_contact_method span{
    color: #ffffff;
    font-size: 0.7rem;
}


.prefered_contact_method .custom-radio {
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #C4C4C4;  /* White border */
    background-color: transparent;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    position: relative;
  }

  .prefered_contact_method .custom-radio:checked::before {
    content: "";
    width: 7px;
    height: 7px;
    background-color: #ffffff; /* White inner dot when selected */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }



.modal-content form button{
    background-color: #FF8C27;
    color:#000000;
    font-size: 0.75rem;
    padding: 15px 40px;
    border-radius: 10px;
    margin-top: 20px;
}
/* 
.modal-content .btn-close{
    position: relative;
    right: 20px;
    margin-top: 5px;
    background-color: #FF8C27;
} */

.modal-content form button:hover{
    background-color: #FF8C27;
    color:#000000;
}

@media (max-width:767px){
    .modal-content,
    .modal-content form{
        padding:0px 0px;
    } 
}







/* User page stylingds  ---  */


/* Side Nav Width*/
:root {
    --sidenav-width: 260px; /* Default width for large screens */
}
  
@media (max-width: 991px) {
    :root {
      --sidenav-width: 180px; /* Reduced width for medium screens */
    }
}





/* User Layout Container */
#userpage_container {
    display: flex;
}


.project_workspace_container{
    display: flex;
    flex-direction: column;
    flex:1;
}





/* Homve conversation styling */
.home_conversation_section{
    margin-bottom: 80px;
}


.home_conversation_section .container{
    display: flex;
    flex-direction: column;
}

.home_conversation_section .home_conversation_title{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.home_conversation_section .home_conversation_title img{
    width: 45px;
    height:auto;
    margin-right: 13px;
}

.home_conversation_section .home_conversation_title div{
    display: flex;
    flex-direction: column;
}

.home_conversation_section .home_conversation_title h4,
.home_conversation_section .home_conversation_title p{
    display: inline-flex;
    margin:0;
}


.home_conversation_section .home_conversation_title h4{
    font-size: 1rem;
    color:#FFFFFF;
    font-weight: 500;
}


.home_conversation_section .home_conversation_title p{
    font-size: 0.85rem;
    color:#B7BFC7;
    font-weight: 300;
}


.home_conversation_box {
    width: 100%;
    background-color: #121212;
    padding: 15px 20px;
    border-radius: 18px;

}




.home_chat_box {
    min-height:180px;
    max-height: 180px;
    display: flex;
    flex-direction: column;
    overflow-y: auto; 
    overflow-x: hidden; 
    scrollbar-width: thin;
    margin-bottom: 10px;
}



/* .new_project_chat_box {
    min-height:300px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    overflow-y: auto; 
    overflow-x: hidden; 
    scrollbar-width: thin;
    margin-bottom: 10px;
} */






.home_system_message{
    background: #0D0F12;
    border-radius: 8px;
    padding: 25px 10px;
    margin-right:35px;
    margin-top:10px;
}

.home_user_message{
    background: #FFFFFF;
    border-radius: 8px;
    margin-top: 15px;
    width: fit-content;
    display: flex;
    margin-left: auto;
    margin-right:10px;
    /* align-items:center; */
}

.home_user_message p{
    color:#121212;
    font-size: 0.9rem;
    padding:15px 25px;
    display: inline-block;
    margin: 0px;
}


.home_system_message p{
    color:#B7BFC7;
    font-size:0.8rem;
    margin:0
}

.chat-signup-button{
    margin-top: 5px;
    background-color: #FFFFFF;
    color:#000000;
    font-size: 0.7rem;
    padding: 15px 40px;
    font-weight: 600;
}

.chat-signup-button:hover{
    background-color: #FFFFFF;
    color:#000000;
}







.home_conversation_box .input-group textarea{
    background: #121212 !important;
    color: #FFFFFF !important;
    border:none;
    resize: none;
    overflow: auto;
    outline: none !important;
}


.home_conversation_box .input-group textarea:focus {
    outline: none; 
    box-shadow: none;
}

.home_conversation_box .input-group{
    display: flex;
    gap:20px;
}

.home_conversation_box .input-group,
.home_conversation_box .input-group span{
    border:none;
}

.home_conversation_box .input-group span{
    display: flex;
    gap:13px;
    padding: 20px 0px;
}

.home_conversation_box .input-group span div{
    width: 48px;
    height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
}

.home_conversation_box .input-group span div:nth-of-type(1){
    background: #FF8C27;
}

.home_conversation_box .input-group span div:nth-of-type(2),
.new_phome_conversation_boxroject_container .input-group span div:nth-of-type(3){
    background: #121212;
    border: 1px solid #4C4C4C;
}

.home_conversation_box .input-group span img{
    width:50%;
    cursor:pointer;
}



.sample_prompts,
.diy_tools{
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 35px;
    padding: 0px 5px;
    gap:20px;
    /* flex-wrap: wrap; */
}



.diy_tools h4,
.sample_prompts h4{
    min-width: 160px;
    max-width: 160px;
    color:#FFFFFF;
    font-weight: 500;
    font-size: 1rem;
    text-wrap: nowrap;
    margin:0;
}


.sample_prompts span{
    color:#121212;
    background-color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 300;
    padding:10px 20px;
    margin-right: 8px;
    margin-bottom: 7px;
    border-radius: 8px;
    display: inline-block;
    width: fit-content;
}


.diy_tools div{
    display: flex;
    gap:15px;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
}

.diy_tools span{
    color: #A1A1A1;
    font-size: 0.65rem;
    width: max-content !important;
    display: flex;
    margin-bottom: 4px;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid #A1A1A1 !important;
    border-radius: 8px;
}

.diy_tools span img{
    width:15px;
    height:auto;
    margin-right: 5px;
}


/* Responsive Styles */
@media (max-width: 992px) { /* Medium and Small Screens */
    .home_conversation_box {
        padding: 15px 10px !important;
    }
    

    /* Adjusting the input-group for small screens */
    .home_conversation_box .input-group {
      flex-direction: row;
      align-items: end;
      gap: 10px;
    }
  
    .home_conversation_box .input-group textarea {
      min-height: 120px;
      max-height: 120px;
    }
  
    .home_conversation_box .input-group span {
      flex-direction: column-reverse;
      align-items: center;
      gap: 8px;
      padding: 10px 0;
    }
  
    .home_conversation_box .input-group span div {
      width: 32px;
      height: 42px;
    }
  

    /* Sample Prompts - Break items into a column layout */
    .sample_prompts,
    .diy_tools {
      flex-wrap: wrap;
      justify-content: flex-start;
      gap:8px;
    }


    /* .sample_prompts div{
        justify-content: flex-end !important;
    } */
    
    .sample_prompts span {
      display: inline-block;
      width: fit-content;
      margin-bottom: 8px;
    }
  
    /* DIY Tools - Remove left margin on small screens */
    .diy_tools div {
      margin-left: 10px;
      flex-wrap: wrap;
      gap: 15px;
    }
  
    .diy_tools span {
      /* font-size: 0.65rem; */
      padding: 9px 18px;
      display: inline-block;
      width: fit-content;
    }
}



@media (max-width:767px) {
    .home_chat_box {
        min-height:250px;
        max-height: 250px;
        scrollbar-width: thin;
        margin-bottom: 3px;
    }

}


/* Landing pages back button */
.landing_page_back_button{
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 45px;
}

.landing_page_back_button button img{
    width:15px;
    margin-right: 10px;
}

.landing_page_back_button button:hover,
.landing_page_back_button button{
    display: flex;
    align-items: center;
    color: #FFFFFF;
    font-size: 1rem;

}





/* Let's talk page styling */
.lets_talk_section .row{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.lets_talk_header {
    position: relative;
}

.lets_talk_sub_header{
    margin-bottom: 35px;
}


.lets_talk_header .live_chat_btn{
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    right:0;
    color:#FFFDFD;
    border: 1.5px solid #FFFFFF;
    border-radius:8px;
    font-size: 0.7rem;
    padding: 7px 14px;
}

.lets_talk_header .live_chat_btn img{
    width:20px;
    height: auto;
    margin-right:10px;

}


.lets_talk_section h1{
    max-width: 600px;
    color: #FFFFFF;
    line-height: 1.2;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}


.lets_talk_section h6{
    max-width: 350px;
    color: #E3E3E3;
    line-height: 2;
    font-size:  1rem;
    font-weight: 200;
}

.lets_talk_section .col-md-5{
    border: 1px solid #C5A78D;
    border-radius: 12px;
    padding:25px 45px;
    text-align: start;

}

.lets_talk_section label{
    color:#F9F9F9;
    margin-bottom: 8px;
    font-size: 0.7rem;

}


.lets_talk_section select,
.lets_talk_section input{
    border: 1px solid #C4C4C4;
    border-radius:8px;
    background-color: #1E1E1E !important;
    color:#F9F9F9 !important;
    height:45px;
    font-size: 0.7rem;
}

.lets_talk_section textarea{
    border: 1px solid #C4C4C4;
    border-radius:8px;
    background-color: #1E1E1E !important;
    color:#F9F9F9 !important;
    font-size: 0.7rem;
    height:135px;
}

.lets_talk_section select:focus,
.lets_talk_section input:focus{
    outline: none !important;
    box-shadow: none !important;
}




.lets_talk_section .submit_button{
    margin-top: 15px;
    background-color: #FF8C27;
    color:#000000;
    font-size: 0.7rem;
    font-weight: 600;
    padding:12px 35px;

}



@media (max-width:767px) {
    .lets_talk_section .container {
        padding: 0px 40px;
    }

    .lets_talk_header{
        margin-bottom: 55px;
    }

    .lets_talk_header .live_chat_btn{
        top: 90%;
    }

    .lets_talk_section .col-md-5{
        padding:25px 30px;
    
    }
    
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .lets_talk_header{
        margin-bottom: 45px;
    }

    .lets_talk_header .live_chat_btn{
        top: 90%;
        right:10px;
    }

    .lets_talk_section .col-md-5{
        min-width:500px;
        max-width:500px;
        padding:25px 30px;
    
    }
}

/* Custom quote page styling */
/* .custom_quote_section{

} */






.custom_quote_section .row{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
}

/* .lets_talk_header {
    position: relative;
} */

.custom_quote_sub_header{
    margin-bottom: 35px;
}



.custom_quote_section h1{
    color: #FFFFFF;
    line-height: 1.2;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}


.custom_quote_section h6{
    max-width: 450px;
    color: #E3E3E3;
    line-height: 2;
    font-size:  1rem;
    font-weight: 200;
}

.custom_quote_section .col-md-5{
    border: 1px solid #C5A78D;
    border-radius: 12px;
    padding:25px 45px;
    text-align: start;

}

.custom_quote_section label{
    color:#F9F9F9;
    margin-bottom: 8px;
    font-size: 0.7rem;

}


.custom_quote_section select,
.custom_quote_section input{
    border: 1px solid #C4C4C4;
    border-radius:8px;
    background-color: #1E1E1E !important;
    color:#F9F9F9 !important;
    height:45px;
    font-size: 0.7rem;
}

.custom_quote_section textarea{
    border: 1px solid #C4C4C4;
    border-radius:8px;
    background-color: #1E1E1E !important;
    color:#F9F9F9 !important;
    font-size: 0.7rem;
    height:135px;
}

.custom_quote_section select:focus,
.custom_quote_section input:focus{
    outline: none !important;
    box-shadow: none !important;
}




.custom_quote_section .submit_button{
    margin-top: 15px;
    background-color: #FF8C27;
    color:#000000;
    font-size: 0.7rem;
    font-weight: 600;
    padding:12px 35px;

}


@media (max-width:767px) {
    .custom_quote_section .container {
        padding: 0px 40px;
    }

    .custom_quote_section .col-md-5{
        padding:25px 30px;
    
    }
    
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .custom_quote_section .col-md-5{
        min-width:500px;
        max-width:500px;
        padding:25px 30px;
    
    }
}








/* Live Chat Page Styling */
.live_chat_sub_header{
    margin-bottom: 25px;
}


.live_chat_section .row{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding:0px 30px;
}


.live_chat_section h1{
    max-width: 600px;
    color: #FFFFFF;
    line-height: 1.2;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}


.live_chat_section h6{
    max-width: 350px;
    color: #E3E3E3;
    line-height: 2;
    font-size:  1rem;
    font-weight: 200;
}

.live_chat_box {
    min-height:340px;
    max-height: 340px;
    background-color: #121212;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto; 
    overflow-x: hidden; 
    scrollbar-width: thin;
    margin-bottom: 40px;
    border-radius: 8px;
}

.live_chat_system{
    display: flex;
    justify-content: start;
    align-items: start;
    padding: 15px 5px;
}

.live_chat_system img{
    width:40px;
    height: auto;
    margin-right: 10px;
}

.live_chat_system p{
    background-color: #543214;
    margin:0;
    padding: 25px 15px;
    width: 600px;
    color:#FFFFFF;
    font-size: 0.8rem;
    font-weight: 400;
    border-radius: 10px;
    text-align: start;
}

.live_chat_system_btn{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
}

.live_chat_system_btn span{
    margin-right: 18px;
    padding: 20px 35px;
    color:#FFFFFF;
    font-size: 0.7rem;
    font-weight: 500px;
    border-radius: 10px;
}



.live_chat_system_btn span:nth-of-type(2),
.live_chat_system_btn span:nth-of-type(1){
    background-color: #0D0F12;

}


.live_chat_system_btn span:nth-of-type(3){
    background-color: #404347;
    border: 1px solid #FFFFFF;
}

.live_chat_box .input-group,
.live_chat_box .input-group span{
    border:none;
}



.live_chat_box .input-group textarea{
    background: #121212 !important;
    color: #FFFFFF !important;
    border:none;
    resize: none;
    overflow: auto;
    outline: none !important;
}


.live_chat_box .input-group textarea:focus {
    outline: none; 
    box-shadow: none;
}

.live_chat_box .input-group{
    display: flex;
    gap:10px;
    padding:5px 0px;
}

.live_chat_box .input-group,
.live_chat_box .input-group span{
    border:none;
}

/* .home_conversation_box .input-group span{
    display: flex;
    gap:13px;
    padding: 20px 0px;
} */

.live_chat_box .input-group span div{
    width: 48px;
    height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
}

.live_chat_box .input-group span div:nth-of-type(1){
    background: #FF8C27;
}

.live_chat_box .input-group span img{
    width:50%;
    cursor:pointer;
}



@media (max-width:767px) {
    .live_chat_section .row{
        padding:0px 15px;
    }

    .live_chat_box {
        min-height:500px;
        max-height: 500px;
    }

}













/* All request page styling */
.all_requests_section .row{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
}


.all_requests_section h1{
    max-width: 600px;
    color: #FFFFFF;
    line-height: 1.2;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}




.all_requests_section .user_contact_deets{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}


.all_requests_section .user_contact_deets h4{
    color:#FFFFFF;
    font-weight: 500;
    font-size: 0.9rem;
}

.all_requests_section .user_contact_deets p{
    color:#FFFFFF;
    font-weight: 500;
    font-size: 1rem;
}


.all_requests_section .user_requests_body .row{
    text-align: start;
}


.all_requests_section .user_requests_body h4{
    color:#FFB87A;
    font-size: 1rem;
    margin-bottom: 18px;
    

}


.all_requests_section .user_requests_body p{
    color:#FFFFFF;
    font-size: 1rem;
    margin: 0 0 10px 0px;

}


.all_requests_section .user_requests_body span{
    color:#FFFFFF;
    font-size: 1rem;
    margin: 0 0 10px 0px;

}

.all_requests_section .user_requests_status{
    display: flex;
    margin: 0;
    gap:18px;
}


.all_requests_section .user_requests_status div{
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.all_requests_section .user_requests_status h6{
    color:#A0A0A0;
    font-size: 0.6rem;
    margin:0;
}

.all_requests_section .user_requests_status span{
    font-size: 0.9rem;
    color:#FFEFEF;
    font-weight: 400;
}


.all_requests_section .schedule_call_btn{
    background-color: #FF8C27;
    color: #000000;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 10px 22px;
}





/* 
*{
    border:1px solid red
} */