/********** Template CSS **********/ :root { --primary: #06A3DA; --secondary: #34AD54; --light: #EEF9FF; --dark: #091E3E; } /* ================================================================= Paragraph word-spacing - 3 situations across the site Same on mobile and desktop for all three (none use @media - text-align and hyphens behave identically at every width). Requires (set in _Layout.cshtml) for hyphens to work in Firefox/Chrome/Safari. ================================================================= */ /* 1) Normal-width content paragraphs (most of the site). Justified so the left AND right edges line up. - hyphens:auto lets the browser split a long word at the line end instead of stretching spaces to fill the line. - text-wrap:pretty (supported browsers) balances line lengths across the whole paragraph instead of greedily filling each line, which reduces how much any single line has to stretch. Together these shrink the visible gap difference between lines as much as CSS allows - true full evenness is only possible without justify (see .left-even below), because justify's entire mechanism is stretching each line by a different amount to reach the same width. */ .justify-even { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; overflow-wrap: break-word; text-wrap: pretty; } /* 2) Narrow-column paragraphs (footer "Get In Touch" address block). Justify's stretching gets worse the narrower the column - too few words per line to spread it across evenly. Left-align guarantees a single, identical space between every word on every line - the only way to get a truly constant gap. */ .left-even { text-align: left; } /* 3) Short, single-line text (copyright lines, small labels). These never wrap, so there's nothing for either rule above to do - one line already has one consistent gap by default. Left untouched intentionally so they keep whatever alignment (often centered) their surrounding layout already gives them. */ /*** Spinner ***/ .spinner { width: 40px; height: 40px; background: var(--primary); margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } #spinner { opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s linear .5s; z-index: 99999; } #spinner.show { transition: opacity .5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; } /*** Heading ***/ h1, h2, .fw-bold { font-weight: 800 !important; } h3, h4, .fw-semi-bold { font-weight: 700 !important; } h5, h6, .fw-medium { font-weight: 600 !important; } /*** Button ***/ .btn { font-family: 'Nunito', sans-serif; font-weight: 600; transition: .5s; /* margin-left: auto; margin-top:auto; margin-bottom:auto;*/ } .btn-primary, .btn-secondary { color: #FFFFFF; box-shadow: inset 0 0 0 50px transparent; } .btn-primary:hover { box-shadow: inset 0 0 0 0 var(--primary); } .btn-secondary:hover { box-shadow: inset 0 0 0 0 var(--secondary); } .btn-square { width: 36px; height: 36px; } .btn-sm-square { width: 30px; height: 30px; } .btn-lg-square { width: 48px; height: 48px; } .btn-square, .btn-sm-square, .btn-lg-square { padding-left: 0; padding-right: 0; text-align: center; } /*** Navbar ***/ .navbar-dark .navbar-nav .nav-link { font-family: 'Nunito', sans-serif; position: relative; margin-left: 25px; padding: 35px 0; color: #FFFFFF; font-size: 18px; font-weight: 600; outline: none; transition: .5s; } .sticky-top.navbar-dark .navbar-nav .nav-link { padding: 30px 0; color: #eef9ff; } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link.active { color: var(--primary); } .navbar-dark .navbar-brand h1 { color: #FFFFFF; } .navbar-dark .navbar-toggler { color: var(--primary) !important; border-color: var(--primary) !important; } @media (max-width: 991.98px) { .sticky-top.navbar-dark { position: relative; background: #FFFFFF; } .navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link.show, .sticky-top.navbar-dark .navbar-nav .nav-link { padding: 10px 0; color: var(--dark); } .navbar-dark .navbar-brand h1 { color: var(--primary); } } @media (min-width: 992px) { .navbar-dark { position: absolute; width: 100%; top: 0; left: 0; border-bottom: 1px solid rgba(256, 256, 256, .1); z-index: 999; } .sticky-top.navbar-dark { position: fixed; background: #091E3E; } .navbar-dark .navbar-nav .nav-link::before { position: absolute; content: ""; width: 0; height: 2px; bottom: -1px; left: 50%; background: var(--primary); transition: .5s; } .navbar-dark .navbar-nav .nav-link:hover::before, .navbar-dark .navbar-nav .nav-link.active::before { width: 100%; left: 0; } .navbar-dark .navbar-nav .nav-link.nav-contact::before { display: none; } .sticky-top.navbar-dark .navbar-brand h1 { color: var(--primary); } } /*** Carousel ***/ .carousel-caption { top: 0; left: 0; right: 0; bottom: 0; background: rgba(9, 30, 62, .7); z-index: 1; } @media (max-width: 576px) { .carousel-caption h5 { font-size: 14px; font-weight: 500 !important; } .carousel-caption h1 { font-size: 30px; font-weight: 600 !important; } } .carousel-control-prev, .carousel-control-next { width: 10%; } .carousel-control-prev-icon, .carousel-control-next-icon { width: 3rem; height: 3rem; } /*** Section Title ***/ .section-title::before { position: absolute; content: ""; width: 150px; height: 5px; left: 0; bottom: 0; background: var(--primary); border-radius: 2px; } .section-title.text-center::before { left: 50%; margin-left: -75px; } .section-title.section-title-sm::before { width: 90px; height: 3px; } .section-title::after { position: absolute; content: ""; width: 6px; height: 5px; bottom: 0px; background: #FFFFFF; -webkit-animation: section-title-run 5s infinite linear; animation: section-title-run 5s infinite linear; } .section-title.section-title-sm::after { width: 4px; height: 3px; } .section-title.text-center::after { -webkit-animation: section-title-run-center 5s infinite linear; animation: section-title-run-center 5s infinite linear; } .section-title.section-title-sm::after { -webkit-animation: section-title-run-sm 5s infinite linear; animation: section-title-run-sm 5s infinite linear; } @-webkit-keyframes section-title-run { 0% { left: 0; } 50% { left: 145px; } 100% { left: 0; } } @-webkit-keyframes section-title-run-center { 0% { left: 50%; margin-left: -75px; } 50% { left: 50%; margin-left: 45px; } 100% { left: 50%; margin-left: -75px; } } @-webkit-keyframes section-title-run-sm { 0% { left: 0; } 50% { left: 85px; } 100% { left: 0; } } /*** Service ***/ .service-item { position: relative; height: 300px; padding: 0 30px; transition: .5s; } .service-item .service-icon { margin-bottom: 30px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--primary); border-radius: 2px; transform: rotate(-45deg); } .service-item .service-icon i { transform: rotate(45deg); } .service-item a.btn { position: absolute; width: 60px; bottom: -48px; left: 50%; margin-left: -30px; opacity: 0; } .service-item:hover a.btn { bottom: -24px; opacity: 1; } /*** Testimonial ***/ .testimonial-carousel .owl-dots { margin-top: 15px; display: flex; align-items: flex-end; justify-content: center; } .testimonial-carousel .owl-dot { position: relative; display: inline-block; margin: 0 5px; width: 15px; height: 15px; background: #DDDDDD; border-radius: 2px; transition: .5s; } .testimonial-carousel .owl-dot.active { width: 30px; background: var(--primary); } .testimonial-carousel .owl-item.center { position: relative; z-index: 1; } .testimonial-carousel .owl-item .testimonial-item { transition: .5s; } .testimonial-carousel .owl-item.center .testimonial-item { background: #FFFFFF !important; box-shadow: 0 0 30px #DDDDDD; } /*** Team ***/ .team-item { transition: .5s; } .team-social { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; transition: .5s; } .team-social a.btn { position: relative; margin: 0 3px; margin-top: 100px; opacity: 0; } .team-item:hover { box-shadow: 0 0 30px #DDDDDD; } .team-item:hover .team-social { background: rgba(9, 30, 62, .7); } .team-item:hover .team-social a.btn:first-child { opacity: 1; margin-top: 0; transition: .3s 0s; } .team-item:hover .team-social a.btn:nth-child(2) { opacity: 1; margin-top: 0; transition: .3s .05s; } .team-item:hover .team-social a.btn:nth-child(3) { opacity: 1; margin-top: 0; transition: .3s .1s; } .team-item:hover .team-social a.btn:nth-child(4) { opacity: 1; margin-top: 0; transition: .3s .15s; } .team-item .team-img img { transition: .5s; } .team-item:hover .team-img img { transform: scale(1.15); } /*** Miscellaneous ***/ @media (min-width: 991.98px) { cts { position: relative; margin-top: -75px; z-index: 1; } } .back-to-top { position: fixed; display: none; right: 45px; bottom: 45px; z-index: 99; } .bg-header { background: linear-gradient(rgba(9, 30, 62, .7), rgba(9, 30, 62, .7)), url(../img/carousel-1.jpg) center center no-repeat; background-size: cover; } .container-fluid .bg-contact { background: linear-gradient(rgba(9, 30, 62, .7), rgba(9, 30, 62, .7)), url(../images/contact_us.jpg) center center no-repeat; background-size: cover; } .container-fluid .bg-about { background: linear-gradient(rgba(9, 30, 62, .7), rgba(9, 30, 62, .7)), url(../images/about_us.jpg) center center no-repeat; background-size: cover; } .link-animated a { transition: .5s; } .link-animated a:hover { padding-left: 10px; } @media (min-width: 767.98px) { .footer-about { margin-bottom: -75px; } } /*added on 20-07 */ .testimonial-carousel .testimonial-item { border-radius: 8px; overflow: hidden; } .testimonial-item .post-date { min-width: 55px; padding: 8px; border-radius: 6px; margin-top: -4px; /* fine-tune to taste, try -2px to -6px */ } .testimonial-carousel .testimonial-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /*23-07 for cleint logo slider */ .vendor-item { height: 160px; /* Same height for every logo */ display: flex; justify-content: center; align-items: center; padding: 15px; } .vendor-item img { max-width: 100%; max-height: 120px; /* Same visible size */ width: auto; height: auto; object-fit: contain; } .vendor-carousel .owl-stage { display: flex; align-items: center; } .vendor-carousel .owl-item { display: flex; justify-content: center; align-items: center; height: 150px; /* Adjust if needed */ } .vendor-carousel .owl-item img { display: block; margin: auto; max-width: 90%; max-height: 90px; width: auto !important; height: auto !important; object-fit: contain; } /*menu button 3-08 changes*/ @media (max-width: 991.98px) { #navbarCollapse { display: none; width: 100%; } #navbarCollapse.show { display: flex; flex-direction: column; background-color: white; } } /*for responsive about uss*/ .page-header-background { /* height: auto;*/ min-height: 260px; padding: 60px 15px !important; display: flex; align-items: center; } @@media (min-width: 768px) { .page-header-background { min-height: 345px; padding: 100px 15px !important; } } @@media (min-width: 992px) { .page-header-background { padding: 150px !important; } } .about-media { position: relative; min-height: 260px; /* height: 100%;*/ } @@media (min-width: 992px) { .about-media { min-height: 500px; } } .about-media img { position: static; /* width: 100%;*/ /* height: auto;*/ max-height: 320px; object-fit: cover; } @@media (min-width: 992px) { .about-media img { position: absolute; width: 65%; height: 65%; max-height: none; } } .action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .action-row .social-icons { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 0; margin: 0; list-style: none; } @@media (max-width: 575px) { .action-row .btn { width: 100%; text-align: center; } } /* Prevent long headings/paragraphs from overflowing on small screens */ h1, h2, h4, h5 { word-wrap: break-word; } @@media (max-width: 767px) { .container-fluid.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; } } /*css for mobile responsive on 5-08*/ /* ============================================================ Indus Software Solutions (indussoft.net) Site-wide Mobile Responsiveness Fixes Applies to: Home, About Us, Services, Contact Us and all Microsoft Dynamics 365 / CRM / NAV / Power BI service pages ============================================================ Add this file to your existing CSS bundle (after your other stylesheets so these rules win) and clear the bundle cache after deploying. ============================================================ */ /* ------------------------------------------------------------ 1) Page banner headings (bg-header .display-4) Used on every page's top banner. Shrinks the oversized heading on phones so it doesn't wrap awkwardly or push the banner too tall. ------------------------------------------------------------ */ /*@media (max-width: 991.98px) { .bg-header h1.display-4 { font-size: 1.8rem; } }*/ /* ------------------------------------------------------------ 2) Hero / feature image columns Pattern:
This pattern relies on a tall fixed-height column with an absolutely-positioned image filling it — works on desktop, but on mobile (stacked columns) it leaves large empty gaps or crops the image badly. Below 992px we drop the fixed height and let the image flow normally. ------------------------------------------------------------ */ /*@media (max-width: 991.98px) { .img-col-hero { min-height: 250px !important; } .img-col-hero .position-absolute { position: static !important; width: 100% !important; height: auto !important; max-width: 100%; } }*/ /* ------------------------------------------------------------ 3) Images with a hard-coded pixel width e.g. style="width:500px" on the Business Central capabilities image. Forces horizontal scroll on any phone narrower than that. Collapse to full width on mobile instead. ------------------------------------------------------------ */ /*@media (max-width: 991.98px) { .fixed-width-img { width: 100% !important; max-width: 100%; height: auto !important; } }*/ /* ------------------------------------------------------------ 4) "Call to ask any question" phone number Long dual-number strings wrap oddly on narrow screens. ------------------------------------------------------------ */ /*@media (max-width: 991.98px) { .call-us-number { font-size: 1.1rem; } }*/ /* ------------------------------------------------------------ 5) Blog / testimonial card thumbnails (Home page) Inline style="width:300px;height:100px" overrides the .img-fluid class due to CSS specificity. Cap width on very small screens so cards never force horizontal scroll. ------------------------------------------------------------ */ /*@media (max-width: 380px) { .testimonial-item img.img-fluid { width: 100% !important; height: auto !important; } }*/ /* 12-08 for image of all views */ .img-col-hero { position: relative; } /* Invisible wrapper — only used to center the media, no visible box around the image/video itself. */ .img-col-hero > .position-relative { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; box-shadow: none; padding: 0; box-sizing: border-box; } /* Full image / full video, never cropped. object-fit: contain keeps the whole picture visible no matter what size box it sits in. */ .img-col-hero img, .img-col-hero iframe { position: static !important; /* undo Bootstrap's position-absolute */ display: block; width: 100% !important; height: auto !important; max-width: 100%; object-fit: contain; border: 0; border-radius: 0.5rem; margin: 0 auto; } /* Keep YouTube embeds at a correct 16:9 shape instead of being squashed by the old fixed "h-75" height. */ .img-col-hero iframe { aspect-ratio: 16 / 9; } /* Screenshots/diagrams that already opt out of full-bleed styling (e.g. the Business Central capabilities screenshot) keep their own natural size, just capped so they can't overflow the card. */ .img-col-hero img.fixed-width-img { width: auto !important; max-width: 100%; } /* ---------------- Desktop (image/video to the right, centered) ---------------- */ @media (min-width: 992px) { .img-col-hero { display: flex; align-items: center; /* vertical centering next to the paragraph */ justify-content: center; } .col-lg-5.img-col-hero { min-height: 500px !important; } .col-lg-4.img-col-hero { min-height: 350px !important; } .img-col-hero img, .img-col-hero iframe { max-height: 100%; } } /* ---------------- Tablet & mobile (stacks below the paragraph) ---------------- */ @media (max-width: 991.98px) { .img-col-hero { min-height: unset !important; height: auto !important; margin-top: 1.75rem; margin-bottom: 0.5rem; } } @media (max-width: 575.98px) { .img-col-hero img, .img-col-hero iframe { border-radius: 0.4rem; } } /* ------------------------------------------------------------ Microsoft Dynamics NAV page - mobile hero image On desktop the hero image sits beside the intro text (.img-col-hero, hidden on mobile via d-none d-lg-block). On mobile/tablet a small copy of the same image is shown inline instead, positioned right after the intro paragraph and before "Helps in Increasing the Margins" - kept small so it doesn't dominate the screen the way the full-width .img-col-hero version did. ------------------------------------------------------------ */ .nav-hero-img-mobile-wrap { margin: 1.25rem 0; } .nav-hero-img-mobile { max-height: 220px; width: auto; max-width: 80%; } /*quote*/ .col-lg-5 img-col-hero .testimonial-primary blockquote { background: #0099e6; } .testimonial blockquote { background: #0099e6; } .testimonial blockquote { background: #0099e6; border-radius: 5px; border: 0; color: #fff; font-family: 'Playfair Display', serif; margin: 0; padding: 40px 64px 40px 72px; padding: 2.5rem 4rem 2.5rem 4.5rem; position: relative; } blockquote { margin: 0 0 1rem; } blockquote { border-left: 5px solid #eee; margin: 0 0 16px 0; margin: 0 0 1rem 0; padding: 8px 16px; padding: 0.5rem 1rem; font-size: 1em; }