/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Privacy Policy and Terms of Service Formatting */
.app-work .container .row {
    max-width: 900px;
    margin: 0 auto;
}

.app-work h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 2rem;
    text-align: center;
    border-bottom: 3px solid var(--theme-color);
    padding-bottom: 1rem;
}

.app-work h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #34495e;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-left: 0;
}

.app-work p {
    line-height: 1.7;
    margin-bottom: 1rem;
    color: #555;
    text-align: justify;
}

.app-work p strong {
    color: #2c3e50;
    font-weight: 600;
}

/* Unordered Lists Styling */
.app-work ul {
    margin: 1rem 0 1.5rem 0;
    padding-left: 0;
    list-style: none;
}

.app-work ul li {
    position: relative;
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    line-height: 1.6;
    color: #555;
}

.app-work ul li:before {
    content: "•";
    color: var(--theme-color);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.app-work ul li strong {
    color: #2c3e50;
    font-weight: 600;
}

/* Nested Lists */
.app-work ul ul {
    margin: 0.5rem 0 0.5rem 0;
    padding-left: 1rem;
}

.app-work ul ul li {
    padding-left: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.app-work ul ul li:before {
    content: "◦";
    color: #7f8c8d;
}

/* Contact Section Styling */
.tc-last {
    background-color: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    margin-top: 3rem;
    border-left: 4px solid var(--theme-color);
}

.tc-last h2 {
    color: var(--theme-color);
    margin-bottom: 1rem;
}

.tc-last p {
    margin-bottom: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .app-work h1 {
        font-size: 1.8rem;
    }
    
    .app-work h2 {
        font-size: 1.2rem;
        margin-top: 2rem;
    }
    
    .app-work .container .row {
        padding: 0 1rem;
    }
    
    .app-work ul li {
        padding-left: 1.2rem;
    }
}

*{
    margin: 0;padding: 0;box-sizing: border-box;
}
:root{
    --theme-color: #16CBCD;
    --grey-color : #ccc;
    --primary-font: 'Montserrat', sans-serif;
}

body {
    font-family: var(--primary-font) !important;
}

/* Set all links to theme color */
a,
.navbar-nav .nav-link,
.content-inner a,
.app-work a,
.bottom-footer a,
.tc-last a,
.contact-inner a {
    color: var(--theme-color) !important;
    transition: all 0.3s ease;
}

a:hover,
.navbar-nav .nav-link:hover,
.content-inner a:hover,
.app-work a:hover,
.bottom-footer a:hover,
.tc-last a:hover,
.contact-inner a:hover {
    color: var(--theme-color) !important;
    opacity: 0.8;
}
.text-right{text-align: right;}
.text-left{text-align: left;}
.nav-link.active{
    font-weight: bold;
    color: var(--theme-color) !important; 
}
ul.navbar-nav li a {
    color: #000;
    font-weight: 600;
    font-family: var(--primary-font) !important;}
    ul.navbar-nav li .nav-link.active {
        text-decoration: underline;    }
        .hero-background p {
            font-size: 18px;
            font-family: var(--primary-font) !important;        }
        .navbar-nav li.nav-item {padding: 0 0 0 20px;}
        .hero-background h1 {
            font-family: var(--primary-font) !important;
            font-weight: 700;color:#000;
            font-size: 60px;text-align: center;}
            .hero-background p {
                font-size: 28px;color:#000;
                font-family: var(--primary-font) !important;
                padding: 10px 0 0 0;}
                .app-work {
                    background: #F8F9FA;
                    padding: 60px 0;}
                    .app-work h1 {
                        color: #000;
                        font-family: var(--primary-font) !important;
                        font-weight: 700;
                        font-size: 44px;
                        padding: 25px 0 10px 0;}
                    .app-work p {
                        color: #000;
                        font-family: var(--primary-font) !important;
                        font-size: 16px;
                    }
                    .margin-top {
                        margin: 75px 0 0 0;
                    }
                    .margin-top .text-right {
                        text-align: right;
                    }
                    .margin-top p {
                        font-family: "Montserrat", serif !important;
                    }
                    .app-work.contact {
                        background: #fff;
                    }
                    .app-work.bottom {
                        margin: 50px 0 0px 0;
                        background: #F8F9FA;
                        padding: 25px 0 55px 0;
                    }
                    .contact-inner {
                        border: 1px solid #D9D9D9;
                        border-radius: 12px;
                        padding: 25px;
                        box-shadow:2px 4px 6px #ccc;
                        background: #f8f9fa;}
                    .app-work.bottom h1 {
                        color: #000;
                        font-family: var(--primary-font) !important;
                        font-weight: 600;
                        font-size: 44px;
                        padding: 25px 0 0 0;
                    }
                    .margin-top h4 {
                        font-family: 'Montserrat' !important;
                    }
                    .app-work.whitebg {
                        padding: 40px 0;
                    }
                    .margin-top h2 {
                        font-family: 'Montserrat' !important;
                        font-size: 40px !important;
                        font-weight: 700 !important;
                        color: #252B42;
                        width: auto !important;
                        margin: 0 0 13px 0 !important;
                    }
                    .app-work.bottom .border.rounded.p-3 {
                        border-color: #D9D9D9;
                        background: #fff;
                        margin: 0 12px 0 12px;
                        padding: 25px 25px !important;
                        min-height: 195px;
                    }
                    
                    .goals-inner p {
                        color: #737373;
                        font-weight: 300 !important;
                        font-size: 14px !important;
                        text-align: left;padding:0 !important;padding: 0 130px 0 0px !important;}
                        .goals-inner h4 {
                        width: 67%;
                    }
                    .app-work.bottom p {
                        font-family: var(--primary-font) !important;
                        font-size: 24px;padding: 0 80px;
                        font-weight: 400;
                        padding: 0 55px;
                    }
                    .app-work.whitebg h4 {
                        font-family: var(--primary-font) !important;
                        font-weight: bold;
                        font-size: 24px;
                    }
                    .margin-top h4 {
                        margin: 75px 0 .4rem 0;
                    }
                    .m-top {
                        margin: 40px 0 0 0;
                    }
                    .app-work.whitebg h2 {
                        font-family: var(--primary-font) !important;
                        font-size: 40px;
                        font-weight: 600;
                        color: #252B42;
                        margin: 0 0 25px 0;}
                    .app-work.whitebg p {
                        color: #737373;
                        font-size: 24px;line-height: 34px;;
                        font-family: var(--primary-font) !important;
                    }
                    h1.text-center.space-btm {
                        margin: 0 0 35px 0;
                        display: inline-block;
                        text-align: center;
                        width: 100%;
                    }
                    li.nav-item.btn.active {
                        border: none;
                    }
                    .app-work.whitebg{background: #fff;}
        .hero-background span {
            width: 100%;
            display: inline-block;
            color: #16CBCD;}
            li.nav-item.btn.active a {
                color: rgba(12, 148, 234, 1);
                text-decoration: underline;
            }
.hero-background{
    background: url('img/bnr1.png');
    background-position: center;
    background-size: cover;
    padding: 160px 0;
    background-blend-mode: darken;
    color: white;
    width: 100%;
}
.theme-color{
    color: var(--theme-color);
}
.img-div{
    height: 100px;
    width: 100px;
    float: right;
    background-color: rgba(36, 142, 255, 0.177);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.footer-background {
    background: rgba(0, 48, 100, 0.582) url(img/footer-image.png);
    background-position: center;
    align-items: center;
    background-size: cover;

    padding: 150px 0;
}
.bottom-footer ul li {
    list-style: none;position: relative;
    float: left;
    margin: 0 0 0 35px;
}

.bottom-footer ul {
    padding: 0;
    margin: 0;
    float: right;
}


.bottom-footer ul li a {
    font-family: 'Montserrat';
    color: #000;
    font-weight: 600;
}
.bottom-footer p {
    font-family: 'Montserrat';
    color: #000;
    font-weight: 500;margin:0;
    font-size: 16px;
}
.bottom-footer {
    padding: 20px 0;
}
.applestore{
    font-family: "Montserrat", sans-serif;
    padding: 2.2%;
    border-radius: 10px;
    background-color: var(--theme-color);
    border-color: var(--theme-color) !important;
    width: 220px;
}
.google-play-store{
    font-family: "Montserrat", sans-serif;
    width: 220px;
    padding:1.6%;
    border-radius: 10px;
    background-color: transparent;
    border-color: var(--theme-color) !important;
}
.submit-btn{
    background-color: var(--theme-color);
    padding: 2px 20px;
    border: none;
    color: #000;
    border-radius: 5px;

}
.contact-inner h4.theme-color {
    font-family: var(--primary-font) !important;
}
.contact-inner p {
    color: #737373;margin-bottom: 22px;}
.contact-inner ul {
    padding: 0;
}
.contact-inner ul li {
    list-style: none;
}
.contact-inner ul li a {
    color: #000;
    font-family: var(--primary-font) !important;
    font-size: 16px;
    text-decoration: none;
    padding: 0 0 0 15px;
}
.contact-detail ul li {
    padding: 0 0 10px 0;
}
.contact-detail ul li img {
    width: 20px;
}
.content-inner {
    padding: 50px 0 0 0;
}
.content-inner h2 {
    color: #000;
    font-family: var(--primary-font) !important;
    font-weight: 700;
    font-size: 32px;
    padding: 25px 0 10px 0;
}
.content-inner p {
    font-family: var(--primary-font) !important;
    font-size: 16px;color: #737373;
}

.t-c p {
    color: #737373;
}
.app-work.t-c h2 {
    font-size: 32px;
    font-weight: 700;
    font-family: var(--primary-font) !important;
    margin: 25px 0 15px 0;
}
.t-c{padding: 70px 0;}
.t-c h1 {margin-bottom:25px;
    font-family: var(--primary-font) !important;
    font-weight: 700;
    color: #000;padding:0;
    font-size: 45px;
    text-align: center;}
    .tc-last p {
        margin: 0;
    }
    .tc-last a {
        text-decoration: none;
        color: #737373;
        font-weight: 700;
        margin: 5px 0 5px 0;
        display: inline-block;
    }
    .tc-last strong a {
        color: #000;text-decoration: none;}
        .tc-last strong {
            padding: 5px 0;
            display: inline-block;
        }

        .app-work.t-c {
            background: #fff;
        }

.bottom-footer li .active{color:var(--theme-color) !important;text-decoration: underline;}

@media screen and (max-width: 767px) {

    .hero-background h1{font-size: 20px;}
    .hero-background p{font-size: 14px; width: 35%;text-align: center;}
    .hero-background{height:auto;padding: 30px 0;}
    .app-work {padding: 25px 0;}
    .app-work h1{font-size: 24px;text-align: center;}
    .app-work p{text-align: center;margin: 0 0 25px 0;}
    .app-work.whitebg {
        padding: 15px 0;
    }
    h1.text-center.space-btm{margin:0;}
    .text-left {
        text-align: center;
    }
    .app-work.whitebg h4 {   font-size: 20px;
              margin: 40px 0 15px 0;text-align: center;}
              .app-work.whitebg h2 {font-size: 24px;margin: 0 0 15px 0;text-align: center;}
              .app-work.whitebg p {       font-size: 16px;
            }
            .margin-top {
                margin: 0;
            }
            .m-top{margin: 0;}
            .margin-top h2{font-size: 24px !important;}
            .margin-top .text-right {
                text-align: center;
            }
            .margin-top.mobile {
                margin-top: 80px;
            }
            .app-work.bottom {
                margin: 10px 0 0px 0;      padding: 10px 0 26px 0;
            }
            .app-work.bottom p {
                font-size: 16px;
                padding: 0;
            }
            .goals-inner h4 {
                font-size: 18px;
            }
            .goals-inner p {
                padding: 0 !important;
                margin: 0 !important;text-align: left;
            }
            .app-work.whitebg p{line-height: inherit;}
            .footer-background .d-flex {
                display: inherit !important;text-align: center;
            }
            .bottom-footer p { font-size: 14px;text-align: center; }
            .bottom-footer ul{float: none;}
            a.navbar-brand.fw-bold {
                width: 65%;
            }
            .bg-body-tertiary .container-fluid.px-5.py-2 {
                padding: 10px 15px !important;
            }
            .bg-body-tertiary .container-fluid.px-5.py-2 img {
                width: 100%;
            }
            .contact-detail h1 {
                text-align: left;
            }
            .contact-detail p {
                text-align: left;
            }
            .t-c h1 {
                font-size: 26px;
                padding: 8px 10px;
            }
            .content-inner {
                padding: 15px 0 0 0;margin: 0;
            }
            .content-inner h2{font-size: 24px;}
            .t-c p{text-align: left !important;}
            .app-work.t-c h2 {font-size: 24px;margin: 15px 0 15px 0;}
}

a.navbar-brand img {
    max-width: 212px;
}