/*
Theme Name: CognitiveBotics
Theme URI: https://cognitivebotics.com/
Author: CognitiveBotics
Author URI: https://cognitivebotics.com/
Description: CognitiveBotics assists children with Autism in overcoming their unique challenges. It supports them in acquiring social, communication, emotional, and behavioral skills. Through motivation, reinforcement, and personalized experiences, CognitiveBotics equips them to achieve their developmental goals and better integrate with society.
Version: 9999.0.0
Requires at least: 5.0
Tested up to: 6.6
Requires PHP: 7.4
License: MIT License
License URI: https://github.com/bootscore/bootscore/blob/main/LICENSE
Text Domain: bootscore
Tags: featured-images, threaded-comments, translation-ready

Use this theme to make something cool, have fun, and share what you've learned with others.

Bootscore is based on Underscores https://underscores.me/, (C) 2012-2024 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/* 
All style editing is done via /assets/scss/_bootscore-custom.scss
*/

/* Typography Customization for Bootstrap */
:root {
    --heading-font-family: 'Nunito', sans-serif;
    --body-font-family: 'Open Sans', sans-serif;

    --nunito-font-family: 'Nunito', sans-serif;

    --default-black: #101319;
    --body-text: #646871;
    --base-white: #FFFFFF;
    --brand-green: #175F63;
    --dark-turquoise: #10494C;

    --brand-color-gradient: linear-gradient(90deg, #175F63 0%, #20A6AD 47.5%, #186165 85%);
    --dark-gradient: linear-gradient(271deg, #368C91 9.76%, #36BFFA 48.21%, #C57CF4 87.14%);
    --light-gradient: linear-gradient(271deg, #91F9FF 1%, #97E0FF 50%, #DBA3FF 99%);
}

body{
	overflow-x:hidden !important;
}

html {
  scroll-behavior: smooth;
}

.color-dark-turquoise {
    color: var(--dark-turquoise);
    font-weight: 500;
}

.color-brand-green {
    color: var(--brand-green);
}

.color-dark-turquoise-p {
    color: var(--dark-turquoise);
}

.bg-default-black {
    background-color: var(--default-black);
}

.bg-brand-green {
    background-color: var(--brand-green);
}

.bg-light-green {
    background-color: #EEF9F9;
}

.bg-dark-turquoise {
    background-color: var(--dark-turquoise);
}

.f-22-d{
  font-size:22px;
}

.word {
    display: inline-block;
    word-break: keep-all;
}

/* Hide text by default */
/*.text-reveal, .paragraph-reveal {
    visibility: hidden;
}*/

/* Hide all elements with the 'wow' class before they are animated */
/*.wow {
    visibility: hidden;
}*/

.gradient-text-home {
  background: -webkit-linear-gradient(90deg, #175f63 0%, #20a6ad 47.5%, #186165 85%);
  background: -moz-linear-gradient(90deg, #175f63 0%, #20a6ad 47.5%, #186165 85%);
  background: -o-linear-gradient(90deg, #175f63 0%, #20a6ad 47.5%, #186165 85%);
  background: linear-gradient(90deg, #175f63 0%, #20a6ad 47.5%, #186165 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* Fallback for non-supportive browsers */
  font-weight: 600;
}

@media not all and (min-resolution: 0.001dpcm) and (-webkit-min-device-pixel-ratio: 0) {
  @supports (-webkit-background-clip: text) {
    .gradient-text-home {
      display: inline-block; /* Apply inline-block only for Safari */
    }
  }
}

.gradient-text-home::selection {
    background: #20A6AD; /* Selection background color */
    -webkit-text-fill-color: #ffffff; /* Text color when selected */
    color: #ffffff; /* Fallback for non-webkit browsers */
}

.gradient-text {
background: -webkit-linear-gradient(90deg,#175f63 0%,#20a6ad 47.5%,#186165 85%);
background: -moz-linear-gradient(90deg,#175f63 0%,#20a6ad 47.5%,#186165 85%);
background: -o-linear-gradient(90deg,#175f63 0%,#20a6ad 47.5%,#186165 85%);
background: linear-gradient(90deg,#175f63 0%,#20a6ad 47.5%,#186165 85%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}

.gradient-text::selection {
    background: #20A6AD; /* Selection background color */
    -webkit-text-fill-color: #ffffff; /* Text color when selected */
    color: #ffffff; /* Fallback for non-webkit browsers */
}

.dark-gradient-text {
    background: -webkit-linear-gradient(271deg, #368C91 9.76%, #36BFFA 48.21%, #C57CF4 87.14%);
    background: -moz-linear-gradient(271deg, #368C91 9.76%, #36BFFA 48.21%, #C57CF4 87.14%);
    background: -o-linear-gradient(271deg, #368C91 9.76%, #36BFFA 48.21%, #C57CF4 87.14%);
    background: linear-gradient(271deg, #368C91 9.76%, #36BFFA 48.21%, #C57CF4 87.14%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.dark-gradient-text::selection {
    background: #20A6AD; /* Selection background color */
    -webkit-text-fill-color: #ffffff; /* Text color when selected */
    color: #ffffff; /* Fallback for non-webkit browsers */
}

.dark-gradient-text-1 {
    background: -webkit-linear-gradient(271deg, #91F9FF 1%, #97E0FF 50%, #DBA3FF 99%);
    background: -moz-linear-gradient(271deg, #91F9FF 1%, #97E0FF 50%, #DBA3FF 99%);
    background: -o-linear-gradient(271deg, #91F9FF 1%, #97E0FF 50%, #DBA3FF 99%);
    background: linear-gradient(271deg, #91F9FF 1%, #97E0FF 50%, #DBA3FF 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

@media not all and (min-resolution: 0.001dpcm) and (-webkit-min-device-pixel-ratio: 0) {
  @supports (-webkit-background-clip: text) {
    .dark-gradient-text-1 {
      display: inline-block; /* Apply inline-block only for Safari */
    }
  }
}

.dark-gradient-text-1::selection {
    background: #20A6AD; /* Selection background color */
    -webkit-text-fill-color: #ffffff; /* Text color when selected */
    color: #ffffff; /* Fallback for non-webkit browsers */
}

.accordion-button:hover {
    color: var(--brand-green) !important;
}

.light-gradient-text {
    background: -moz-linear-gradient(271deg, #91F9FF 1%, #97E0FF 50%, #DBA3FF 99%);
    background: -o-linear-gradient(271deg, #91F9FF 1%, #97E0FF 50%, #DBA3FF 99%);
    background: linear-gradient(271deg, #91F9FF 1%, #97E0FF 50%, #DBA3FF 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.light-gradient-text::selection {
    background: #20A6AD; /* Selection background color */
    -webkit-text-fill-color: #ffffff; /* Text color when selected */
    color: #ffffff; /* Fallback for non-webkit browsers */
}

::selection {
    background-color: #20A6AD; /* Background color when text is selected */
    color: #ffffff; /* Text color when selected */
}

/* For Firefox */
::-moz-selection {
    background-color: #20A6AD; /* Background color for Firefox */
    color: #ffffff; /* Text color for Firefox */
}


.dark-gradient-bg {
    background: -webkit-linear-gradient(271deg, #368C91 9.76%, #36BFFA 48.21%, #C57CF4 87.14%);
    background: -moz-linear-gradient(271deg, #368C91 9.76%, #36BFFA 48.21%, #C57CF4 87.14%);
    background: -o-linear-gradient(271deg, #368C91 9.76%, #36BFFA 48.21%, #C57CF4 87.14%);
    background: linear-gradient(271deg, #368C91 9.76%, #36BFFA 48.21%, #C57CF4 87.14%);
}

.light-gradient-bg {
    background: -webkit-linear-gradient(271deg, #91F9FF 1%, #97E0FF 50%, #DBA3FF 99%);
    background: -moz-linear-gradient(271deg, #91F9FF 1%, #97E0FF 50%, #DBA3FF 99%);
    background: -o-linear-gradient(271deg, #91F9FF 1%, #97E0FF 50%, #DBA3FF 99%);
    background: linear-gradient(271deg, #91F9FF 1%, #97E0FF 50%, #DBA3FF 99%);
}

.journey-bg {
    background: -webkit-linear-gradient(268deg, #EEF9F9 0%, #DDF3F4 21.61%, #E7F5FE 47.44%, #FFEDF2 73.8%, #F6EDFC 101.21%);
    background: -moz-linear-gradient(268deg, #EEF9F9 0%, #DDF3F4 21.61%, #E7F5FE 47.44%, #FFEDF2 73.8%, #F6EDFC 101.21%);
    background: -o-linear-gradient(268deg, #EEF9F9 0%, #DDF3F4 21.61%, #E7F5FE 47.44%, #FFEDF2 73.8%, #F6EDFC 101.21%);
    background: linear-gradient(268deg, #EEF9F9 0%, #DDF3F4 21.61%, #E7F5FE 47.44%, #FFEDF2 73.8%, #F6EDFC 101.21%);
}

body {
    font-family: var(--body-font-family);
    color: var(--default-black);
}

.btn:focus, 
.btn:active {
    outline: none !important;
    box-shadow: none !important; /* Remove blue box-shadow */
}

.btn {
    outline: none !important; /* Remove outline for non-focused state */
}

.btn:focus-visible {
    color: #fff;
    background-color: transparent !important;
    border-color: transparent !important;
}

a {
    color: #088FCD;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #088FCD;
}
.about-padding{
	padding-top:196px;
}
.back-button a {
  color: var(--brand-green);
}

.back-button a {
  color: var(--dark-turquoise);
}

/* Headings (h1 to h6) */
h1,
.h1 {
    font-size: 64px;
    line-height: 76px;
    font-weight: 600;
    font-family: var(--heading-font-family);
    color: var(--default-black);
}

h2,
.h2 {
    font-size: 56px;
    line-height: 68px;
    font-weight: 600;
    font-family: var(--heading-font-family);
    color: var(--default-black);
}

h3,
.h3 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 600;
    font-family: var(--heading-font-family);
    color: var(--default-black);
}

h4,
.h4 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    font-family: var(--heading-font-family);
    color: var(--default-black);
}

h5,
.h5 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    font-family: var(--heading-font-family);
    color: var(--default-black);
}

h6,
.h6 {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    font-family: var(--heading-font-family);
    color: var(--default-black);
}

/* Paragraphs (p) */
p {
    font-size: 18px;
    font-weight: 400;
    font-family: var(--body-font-family);
    color: var(--body-text);
}

/* Lead Text (.lead) */
.lead {
    font-size: 22px;
    font-weight: 400;
    font-family: var(--body-font-family);
}

/* Blockquotes (blockquote) */
blockquote {
    font-size: 22px;
    font-weight: 500;
    border-left: 5px solid #ccc;
    padding-left: 1rem;
    font-family: var(--body-font-family);
}

/* Inline Elements */
b,
strong {
    font-weight: 700;
    font-family: var(--body-font-family);
    color: var(--default-black);
}

i,
em {
    font-style: italic;
    font-family: var(--body-font-family);
}

u {
    text-decoration: underline;
    font-family: var(--body-font-family);
}

small {
    font-size: 0.875rem;
    font-family: var(--body-font-family);
}

/* Lists (ul, ol, dl) */
ul,
ol {
    font-size: 1rem;
    font-weight: 400;
    margin-left: 2rem;
    font-family: var(--body-font-family);
}

dl {
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--body-font-family);
}

/* Code (code, pre) */
code {
    font-size: 0.875rem;
    background-color: #f8f9fa;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-family: var(--body-font-family);
}

pre {
    font-size: 0.875rem;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
    overflow-x: auto;
    font-family: var(--body-font-family);
}

/* Tables (table) */
table {
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--body-font-family);
}

/* Captions (caption) */
caption {
    font-size: 0.875rem;
    font-weight: 400;
    caption-side: bottom;
    font-family: var(--body-font-family);
}

/* Form Controls (input, textarea, select, button) */
input,
textarea,
select,
button {
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--body-font-family);
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 24px;
}

.navbar-expand-lg .navbar-nav .nav-item:last-child .nav-link {
    padding-right: 0;
}

.f-22 {
    font-size: 22px;
}

.bg-image-gradient {
    position: relative;
}

.bg-image-gradient::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1440" height="847" viewBox="0 0 1440 847" fill="none"%3E%3Cg filter="url(%23filter0_f_497_3533)"%3E%3Cpath d="M1353.5 139L1302.5 458L159 547L1353.5 139Z" fill="%23A9E0E3"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_f_497_3533" x="-141" y="-161" width="1794.5" height="1008" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeGaussianBlur stdDeviation="150" result="effect1_foregroundBlur_497_3533"/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 1;
    filter: blur(60px);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.bg-image-gradient h2,
.bg-image-gradient p {
    position: relative;
    z-index: 2;
}

.bg-image-gradient-default {
    position: relative;
}

.bg-image-gradient-default::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1440" height="847" viewBox="0 0 1440 847" fill="none"%3E%3Cg filter="url(%23filter0_f_497_3533)"%3E%3Cpath d="M1353.5 139L1302.5 458L159 547L1353.5 139Z" fill="%23A9E0E3"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_f_497_3533" x="-141" y="-161" width="1794.5" height="1008" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeGaussianBlur stdDeviation="150" result="effect1_foregroundBlur_497_3533"/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 1;
    filter: blur(60px);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.bg-image-gradient-default h2,
.bg-image-gradient-default p {
    position: relative;
    z-index: 2;
}


/* Tablet Customization */
@media (max-width: 992px) {

    .about-padding{
        padding-top:40px;
    }

    .f-22 {
        font-size: 16px;
    }

    .navbar-expand-lg {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        width: 100%;
    }

    body {
        overflow-x: hidden;
    }

    .offcanvas-header {
        justify-content: space-between;
    }

    #masthead {
        height: 58px !important;
        display: flex;
        justify-content: space-between;
    }

    h1,
    .h1 {
        font-size: 38px;
        line-height: 48px;
        font-weight: 600;
        font-family: var(--heading-font-family);
    }

    h2,
    .h2 {
        font-size: 32px;
        line-height: 40px;
        font-weight: 600;
        font-family: var(--heading-font-family);
    }

    h3,
    .h3 {
        font-size: 24px;
        line-height: 36px;
        font-weight: 600;
        font-family: var(--heading-font-family);
    }

    h4,
    .h4 {
        font-size: 20px;
        line-height: 27px;
        font-weight: 700;
        font-family: var(--heading-font-family);
    }

    h5,
    .h5 {
        font-size: 18px;
        line-height: 27px;
        font-weight: 700;
        font-family: var(--heading-font-family);
    }

    h6,
    .h6 {
        font-size: 16px;
        line-height: 27px;
        font-weight: 700;
        font-family: var(--heading-font-family);
    }

    p,
    ul,
    ol,
    dl {
        font-size: 16px;
        font-weight: 400;
        font-family: var(--body-font-family);
    }

    .lead {
        font-size: 1.125rem;
        font-family: var(--body-font-family);
    }

    blockquote {
        font-size: 1.125rem;
        font-family: var(--body-font-family);
    }

    small,
    code,
    pre {
        font-size: 0.75rem;
        font-family: var(--body-font-family);
    }

    table,
    caption {
        font-size: 0.875rem;
        font-family: var(--body-font-family);
    }

    input,
    textarea,
    select,
    button {
        font-size: 0.875rem;
        font-family: var(--body-font-family);
    }
}


/* Mobile Customization */
@media (max-width: 768px) {

    h1,
    .h1 {
        font-size: 38px;
        line-height: 48px;
        font-weight: 600;
        font-family: var(--heading-font-family);
    }

    h2,
    .h2 {
        font-size: 32px;
        line-height: 40px;
        font-weight: 600;
        font-family: var(--heading-font-family);
    }

    h3,
    .h3 {
        font-size: 24px;
        line-height: 36px;
        font-weight: 600;
        font-family: var(--heading-font-family);
    }

    h4,
    .h4 {
        font-size: 20px;
        line-height: 27px;
        font-weight: 700;
        font-family: var(--heading-font-family);
    }

    h5,
    .h5 {
        font-size: 18px;
        line-height: 27px;
        font-weight: 700;
        font-family: var(--heading-font-family);
    }

    h6,
    .h6 {
        font-size: 16px;
        line-height: 27px;
        font-weight: 700;
        font-family: var(--heading-font-family);
    }

    p,
    ul,
    ol,
    dl {
        font-size: 16px;
        font-weight: 400;
        font-family: var(--body-font-family);
    }

    .lead {
        font-size: 1rem;
        font-family: var(--body-font-family);
    }

    blockquote {
        font-size: 1rem;
        font-family: var(--body-font-family);
    }

    small,
    code,
    pre {
        font-size: 0.6875rem;
        font-family: var(--body-font-family);
    }

    table,
    caption {
        font-size: 0.75rem;
        font-family: var(--body-font-family);
    }

    input,
    textarea,
    select,
    button {
        font-size: 0.75rem;
        font-family: var(--body-font-family);
    }
    
    .blog-box h6 {
        font-size: 18px;
    }
    
    .f-22-d{
      font-size:16px;
    }
}

/* End of Typography Customization for Bootstrap */

/* Header */
#masthead {
    height:75px;
}

/* Keyframes for sliding down animation */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Keyframes for sliding up animation */
@keyframes slideUp {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}


/* Hide header when scrolling down */
.hide-header {
    animation: slideUp 0.35s ease-out forwards;
}

/* Show header when scrolling up */
.show-header {
    animation: slideDown 0.35s ease-out forwards;
}

button svg:focus {
    outline: none !important;
}

.btn-check:checked+.btn, :not(.btn-check)+.btn:active, .btn:first-child:active, .btn.active, .btn.show{
	border-color:transparent !important;
}

.nav-blur {
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.5s;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.nav-blur.no-blur {
    backdrop-filter: none;
}

.navbar-expand-lg {
    padding-top: 11px;
    padding-bottom: 11px;
}

.nav-link {
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    font-family: var(--body-font-family);
    transition: color 0.3s ease;
}

.nav-link:hover {
    text-decoration: none;
    color: var(--brand-green);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--brand-green) !important;
}

@media (min-width: 1400px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1136px;
    }

    .container-fluid {
        padding-left: 72px;
        padding-right: 72px;
    }
}

.btn-secondary {
    border-radius: 24px;
    border: 1px solid var(--brand-green);
    background: #FFF;
    color: var(--brand-green);
    font-weight: bold;
    padding: 6px 12px;
    font-family: var(--nunito-font-family);
    box-shadow: 0px 2px 3px 0px rgba(3, 59, 105, 0.10);
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--brand-green);
    color: #fff;
}

/* Button Primary */
.btn-primary {
    border-radius: 24px;
    border: 1px solid var(--brand-green);
    background: var(--brand-green);
    color: #fff;
    font-weight: bold;
    padding: 6px 12px;
    font-family: var(--nunito-font-family);
    box-shadow: 0px 2px 3px 0px rgba(3, 59, 105, 0.10);
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
    border: 1px solid var(--brand-green);
    background-color: #fff;
    color: var(--brand-green);
}

.w-400 {
    width: 400px;
}
.w-460{
	width: 460px;
}
.w-300 {
    width: 300px;
}

.w-520 {
    width: 520px;
}

.w-921 {
    width: 921px;
}

.w-530 {
    width: 550px;
}

.mt-image {
    margin-top: -80px;
}

.font-bold {
    font-weight: 700;
    font-family: var(--nunito-font-family);
}

.main-last{
    	padding-bottom:0px !important;
    }
    
@media (min-width: 991px) and (max-width: 997px) {
	.navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 22px;
    }
}    

@media (min-width: 768px) and (max-width: 1199px) {
    .navbar-brand {
        width: 160px;
    }
    
     .careers-form{
        width: 100% !important;
    }
	
	.blog-box{
		height: 450px !important;
	}

    .about-content-box {
        height: 226px;
        min-height: 280px;
    }

    .careers-content-box {
        height:100% !important;
    }

    .section-bg-green-professional {
        padding: 116px 0px !important;
    }

    .w-800{
        width: 100% !important;
    }

    .section-bg-green {
        padding: 116px 0 !important;
    }

    .w-400 {
        width: auto;
    }
    
    .w-460 {
        width: auto;
    }

    .w-300 {
        width: auto;
    }

    .w-520 {
        width: auto;
    }

    .w-921 {
        width: auto;
    }

    .w-530 {
        width: auto;
    }

    .mt-image {
        margin-top: 0px;
    }

    .section-1 {
        padding: 144px 0px;
    }

    .section-2 {
        padding-top: 0px;
        padding-bottom: 192px;
    }

    .section-3 {
        padding-top: 214px;
        padding-bottom: 214px;
    }

    .solution-box {
        width: auto !important;
        height: 100% !important;
    }

    .section-main {
        padding-top: 120px;
        padding-bottom: 120px;
    }
  

    .section-main-second {
        padding-top: 0px;
        padding-bottom: 120px;
    }

    footer {
        padding: 48px 10px 32px 10px !important;
    }

    .content {
        padding-right: 40px !important;
        padding-left: 40px !important;
    }

    .nav-link {
        font-size: 14px;
    }

    .btn-primary {
        font-size: 14px;
    }

    .btn-secondary {
        font-size: 14px;
    }
}

.mr-1 {
    margin-right: 1rem;
}

.section-main-about {
    padding-top: 120px;
    padding-bottom: 214px;
}


.cbt-footer {
    padding-bottom: 88px;
}

@media (min-width: 580px) and (max-width: 991px) {
	.section-3{
    	padding-top:90px !important;
        padding-bottom:90px !important;
    }
}



@media (max-width: 768px) {
    .nav-link {
        font-size: 18px;
        font-family: var(--nunito-font-family);
        font-weight: 600;
    }
    
    .skills-box img{
    	height:104px !important;
        width:104px !important;
        margin-bottom:12px !important;
    }

    .section-main-about {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .navbar-brand img {
        height: 18px;
        width: 134px;
    }
    
    .mobile-image-w-217 {
        display: flex;
        justify-content: center;
        margin: auto;
    }

    .mobile-bg-pt {
        padding-top: 27px;
        padding-bottom: 27px;
    }

    .mobile-image-center {
        display: flex;
        justify-content: center;
        margin: auto;
    }

    .mobile-image-w-104 {
        height: 104px;
        width: 104px;
        display: flex;
        justify-content: center;
        margin: auto;
    }

    .w-400 {
        width: auto;
    }
    
    .w-460 {
        width: auto;
    }

    .w-300 {
        width: auto;
    }

    .w-520 {
        width: auto;
    }

    .w-921 {
        width: auto;
    }

    .w-530 {
        width: auto;
    }

    .btn-primary {
        font-size: 16px;
    }

    .btn-secondary {
        font-size: 16px;
    }

    footer {
        padding: 0 !important;
        color: #fff;
    }

    .cbt-footer {
        padding-top: 56px;
        padding-bottom: 32px;
    }

    a.underline {
        font-size: 16px !important;
    }
}

/* Home */
.main-banner-area {
    position: relative;
    overflow: hidden;
}

.helping-box img{
	display: flex;
    justify-content: center;
    margin: auto;
}

ol, ul {
    padding-left: 0px;
    margin-bottom: 30px;
}

a.underline {
    text-decoration: underline;
    font-size: 18px;
}

a.underline:hover {
    text-decoration: underline !important;
}

.journey-section {
    padding-bottom: 80px;
    padding-top: 80px;
}

.section-1 {
    padding: 144px 110px;
}

.last-item {
    padding-bottom: 0px !important;
}

.section-2 {
    padding-top: 0px;
    padding-bottom: 192px;
}

.section-3 {
    padding-top: 192px;
    padding-bottom: 192px;
}

.section-3.sec-3-last-item {
  padding-top: 0px;
}

.section-bg-green-centered {
    padding: 150px 0px;
}

.section-bg-green {
    padding: 116px 0px;
}

.section-bg-green-professional {
    padding: 116px 158px;
}

.section-main {
    padding-top: 120px;
    padding-bottom: 120px;
}

.section-main-second {
    padding-top: 90px;
    padding-bottom: 0px;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.banner-video {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
}

.overlay-background {
    opacity: 0.3;
    background: var(--Color-RBlack-600, #374156);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 99.3% !important;
    z-index: 1;
}

@media (max-width: 767px) {
    .banner-video {
        height: 681px;
        width: auto;
        object-fit: cover;
    }
    
    .section-3 .sec-3-last-item {
      padding-top: auto !important;
    }

    .main-banner-area {
        height: 681px;
    }

    .overlay-background {
        height: 100% !important;
    }
}

.content {
    position: relative;
    z-index: 2;
    padding-left: 220px;
    padding-right: 220px;
}

.banner-image {
    width: 100%;
}

.text-white {
    color: white;
}

h1.main-banner-heading {
    font-size: 56px;
    line-height: 68px;
}

p.main-banner-para {
    font-size: 22px;
    line-height: 33px;
    padding: 0 15px;
}

.skills-box {
    background-color: #EEF9F9;
    border-radius: 16px;
    padding: 24px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.skills-box img{
    display: flex;
    justify-content: center;
    margin: auto;
    height: 211px;
    width: 211px;
    margin-bottom: 20px;
}

.skills-box h4 {
    margin-bottom: 15px;
    font-weight: 700;
}

.skills-box p {
    font-size: 16px;
}

/* Footer */
footer {
    padding: 48px 164px 32px 164px;
    color: #fff;
}

.top-button.visible{
	height:42px;
    width:42px;
    border-radius: 50% !important;
}

.top-button.visible i{
	padding-top:6px;
}

.footer-logo {
    font-size: 38px;
    font-family: var(--nunito-font-family);
    font-weight: 700;
    color: #fff;
    line-height: 32px;
    margin-bottom: 32px;
}

.footer-para {
    font-size: 18px;
}


.footer-menu li {
    list-style: none;
    margin-bottom: 16px;
}

.cbt-footer ul {
    margin-left: 0px;
    padding-left: 0px;
}

.cbt-footer a {
    color: #fff;
    transition: color 0.3s ease-in-out;
}

.cbt-footer a:hover {
    text-decoration: none;
    color: #84D3D8;
}

.social-icons a img {
    transition: color .3s ease-in-out;
}

.social-icons a:hover img {
    filter: brightness(0) saturate(100%) invert(70%) sepia(23%) saturate(529%) hue-rotate(142deg) brightness(94%) contrast(97%);
}

.social-icons a {
    margin-right: 45px;
}

.social-icons a:last-child {
    margin-right: 0;
}

.social-icons img {
    display: block;
}

.circle {
    width: 60px;
    height: 60px;
    background-color: #E3F7FA;
    border-radius: 50%;
}

.circle-54 {
    width: 54px;
    height: 54px;
    background-color: #E3F7FA;
    border-radius: 50%;
}

.number {
    font-size: 28px;
    color: #175F63;
    font-family: var(--heading-font-family, 'Nunito', sans-serif);
    font-weight: 700;
}

.point-item {
    margin-bottom: 60px;
}

.fw-bold {
    font-family: var(--heading-font-family, 'Nunito', sans-serif);
    font-weight: 600;
}


.main-solution-box {
    position: relative;
    z-index: 1;
    border-radius: 816px;
}

.main-solution-box::before {
    content: '';
    border-radius: 816px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, #A9E0E3 60%, transparent 60%);
    filter: blur(160px);
    z-index: -1;
    top: 45%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.main-solution-box h4,
.main-solution-box h5,
.main-solution-box p {
    position: relative;
    z-index: 2;
}

.solution-box {
    display: flex;
    width: 426px;
    padding: 40px 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    height: 310px;
    border-radius: 16px;
    background: rgba(248, 248, 248, 0.50);
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

.solution-content {
    font-size: 16px;
}

.image-bg-gradient {
    border-radius: 50%;
    background: radial-gradient(circle, #A9E0E3 60%, transparent 30%);
    width: 80%;
    height: 430px;
    filter: blur(90px);
    position: absolute;
    z-index: -1;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}


.best-work {
    margin-top: 72px;
}

.best-work-box {
    margin-bottom: 72px;
}


/* FAQ */
.accordion-button::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    transition: all 0.5s;
    background-color: currentColor;
    mask-repeat: no-repeat;
    /* Use both mask and -webkit-mask for cross-browser compatibility */
    -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M5 12H19M12 5V19" stroke="%23101319" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') no-repeat center;
    -webkit-mask-size: contain;

    mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M5 12H19M12 5V19" stroke="%23101319" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') no-repeat center;
    mask-size: contain;
}


.accordion-button:not(.collapsed){
	color: var(--default-black);
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
}

.accordion-button:not(.collapsed)::after {
    mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M5 12H19" stroke="%23101319" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
    mask-size: contain;
    mask-repeat: no-repeat;
}

.accordion-button::after {
    transition: all 0.5s;
}

.accordion-item {
    border-top: 1px solid #CBCBCB;
    border-bottom: 1px solid #CBCBCB;
    border-left: 0px;
    border-right: 0px;
    background-color: transparent !important;
}

.accordion {
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
}

.accordion-button {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    font-family: var(--heading-font-family);
    color: var(--default-black);
    background-color: transparent !important;
}

.accordion {
    border-radius: 0px;
}

.accordion-body {
    border-radius: 0px;
    font-size: 18px;
    font-weight: 400;
    font-family: var(--body-font-family);
    color: var(--body-text);
    padding-left: 0px;
}

.accordion-button {
    padding: 20px 0px;
}

/* Testimonials */
.testimonial-content {
    font-size: 18px;
    color: #101319;
}
.testimonial-content-author{
    font-size: 20px;
    color: #101319;
}
.testimonials-box{
  display: flex;
  padding: 40px 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  height: 430px;
  margin-bottom: 24px;
  border-radius: 16px;
  background: rgba(248, 248, 248, 0.50);
  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  min-height: 400px;
}

.testimonials-box-middle{
    display: flex;
    padding: 40px 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    height: 510px;
    margin-bottom: 24px;
    border-radius: 16px;
    background: rgba(248, 248, 248, 0.50);
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    min-height: 510px;
}
  
@media only screen and (min-width: 1340px) {
    .testimonials-sec{
        padding-top: 0px !important;
        max-width: 1340px;
    }
}

.testimonials-sec{
    padding-top: 0px !important;
}

@media only screen and (max-width: 1340px) {
    .testimonials-box{
       height: auto;
       min-height: auto;
       max-height: auto;
    }
    .testimonials-box-middle{
        height: auto;
        min-height: auto;
       max-height: auto;
    }
}

@media only screen and (max-width: 768px) {
    .testimonials-box{
        padding: 32px 24px;
    }
    .testimonial-title{
        font-size: 32px;
        line-height: 40px;
    }
    .testimonials-sec{
        padding-top: 90px !important;
        padding-bottom: 90px;
    }
    .testimonial-content {
        font-size: 16px;
        color: #101319;
    }
    .testimonial-content-author{
        font-size: 18px;
        color: #101319;
    }
}
/* About Us */
.about-content-box {
    border-radius: 16px;
    background: rgba(237, 237, 237, 0.50);
    backdrop-filter: blur(10px);
    padding: 16px 24px;
    margin-bottom: 32px;
    height: 226px;
}

.plr0{
    padding-left: 0px;
    padding-right: 0px;
}

.pr-0{
    padding-right: 0px;
}

.careers-content-box {
    border-radius: 16px;
    background: rgba(237, 237, 237, 0.50);
    backdrop-filter: blur(10px);
    padding: 16px 24px;
    margin-bottom: 32px;
    height: 386px;
}

.team-box {
    text-align: center;
    margin-bottom: 32px;
}

@media only screen and (orientation: landscape) and (min-width: 834px) and (max-width: 1091px) {
   .point-text {
        width: auto !important;
        font-size: 18px !important;
    }
}

/* Blog Page */
/* Desktop and larger screens */
.btn-readmore {
    width: 148px;
    height: 40px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.n-blog-message{
    font-size: 23px;
}

/* SVG icon color change on hover */
.btn-readmore:hover svg path {
    stroke: #ffffff;
}

.btn-readmore-mobile:hover svg path {
    stroke: var(--brand-green);
}

.post-img {
    border-radius: 16px;
}

.role-btn-primary {
    width: 197px;
}

.blog-box {
    border-radius: 16px;
    background: rgba(237, 237, 237, 0.50);
    box-shadow: 0px 4px 40px 0px rgba(16, 73, 76, 0.07);
    backdrop-filter: blur(10px);
    padding: 40px 24px;
    margin-bottom: 64px;
    height: 380px;
    overflow: hidden;
  
    /* Flexbox properties */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
  }
  
.pagination {
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.pagination .page-numbers {
    display: inline-block;
    margin: 0 5px;
    border: 1px solid #F0F0F0;
    color: var(--body-text);
    text-decoration: none;
    border-radius: 16px;
    font-family: var(--body-font-family);
    margin-bottom: 54px;
    padding: 2px 10px;
    background-color: #F0F0F0;
    width: 32px;
    height: 32px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pagination .page-numbers:hover {
    background-color: var(--brand-green);
    color: #fff;
}

.pagination .current {
    background-color: var(--brand-green);
    color: #fff;
}

/* Style for SVG icons in pagination */
.pagination svg {
    vertical-align: middle;
    margin: 0px;
    padding: 0px;
}

.pagination .prev,
.pagination .next {
    background-color: transparent;
    border: none;
    margin: 0px;
    padding: 0px;
}

.pagination .prev:hover,
.pagination .next:hover {
    background-color: transparent;
    border: none;
}

.post-tags .tag a {
    display: inline-block;
    margin-right: 5px;
    text-decoration: none;
    border-radius: 32px;
    border: 1px solid #B6B6B6;
    background-color: #F7F7F7 !important;
    padding: 4px 8px;
    font-size: 18px;
    color: #2B303B !important;
    font-weight: 400;
    margin-top: 32px;
    margin-bottom: 32px;
}

.single-blogpost {
    padding: 60px 112px;
}

.single-blogpost p {
    color: var(--default-black);
}

.single-page {
    padding: 120px 112px;
}

.single-page h1 {
    font-size: 40px;
    line-height: 48px;
    margin-bottom: 32px;
}

.single-blogpost h1 {
    font-size: 40px;
    line-height: 48px;
    margin-bottom: 32px;
}

.w-800 {
    width: 800px;
}

.btn-primary-1 {
    width: 229px;
    height: 42px;
}

.bootscore-copyright {
    text-align: center;
}

.point-text-careers {
    font-size: 24px;
}

.point-text{
	font-size:22px;
    width:480px;
}

.transform-image{
    padding:10px;
}
    
.best-work-box img{
	height:100px;
    width:100px;
}    

@media only screen and (max-width: 992px) and (orientation: landscape) {
    .skills-box {
        width: 158px !important;
        margin-right: 8px;
    }
    
    .point-text {
        width: auto !important;
        font-size: 18px !important;
    }
    
    .skills-box p{
    	display:none !important;
    }
    
     .skills-box img{
    	height:100px !important;
    }
}


@media (max-width: 768px) {
    .single-blogpost {
        padding: 40px 0px 90px 0px;
        padding-right: calc(var(--bs-gutter-x)* .5);
        padding-left: calc(var(--bs-gutter-x)* .5);
    }

    .skills-main-box{
        padding-top: 20px !important;
    }
    
    .skills-box {
        width: 250px !important;
        margin-right: 8px;
    }
    
    .best-work-box img {
      height: 64px;
      width: 64px;
      margin-bottom: 10px;
    }
    
    .point-text{
        width: auto;
    }
    
     .n-blog-message{
        font-size: 18px;
        padding-bottom: 90px;
    }

    .single-blogpost h1 {
        font-size: 24px;
        line-height: 36px;
        margin-bottom: 16px;
    }

    .archive h1{
        font-size: 24px;
        line-height: 36px;
        margin-bottom: 16px;
    }

    .section-bg-green-professional {
        padding: 116px 0px;
    }

    .single-page {
        padding: 40px 0px 90px 0px;
        padding-right: calc(var(--bs-gutter-x)* .5);
        padding-left: calc(var(--bs-gutter-x)* .5);
    }

    .recent {
        margin-bottom: 20px;
    }

    .post-tags .tag a {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 16px;
    }


    .btn-primary-1 {
        width: 179px;
    }

    .single-blogpost,
    .single-page h1 {
        font-size: 24px;
        line-height: 32px;
        width: 100%;
        margin-bottom: 20px;
    }

    .w-800 {
        width: 100%;
    }

    .blog-box {
        padding: 24px 16px;
        margin-bottom: 24px;
		height:auto;
    }

    h1.main-banner-heading {
        font-size: 38px;
        line-height: 48px;
        font-weight: 600;
    }

    .best-work-box {
        margin-bottom: 32px;
    }

    .solution-box {
        display: flex;
        width: 100%;
        padding: 20px 22px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        height: auto;
        border-radius: 16px;
        background: rgba(248, 248, 248, 0.50);
        box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05);
        backdrop-filter: blur(10px);
        margin-bottom: 20px;
    }

    .mt-image {
        margin-top: 0px;
    }

    .section-2 {
        padding-top: 0px;
        padding-bottom: 90px;
    }

    .section-3 {
        padding-top: 214px;
        padding-bottom: 90px;
    }

    .section-bg-green {
        padding: 90px 0;
    }

    .section-main {
        padding-top: 40px;
        padding-bottom: 90px;
    }

    .section-main-second {
        padding-top: 0px;
        padding-bottom: 90px;
    }

    .point-text {
        font-size: 18px;
    }

    .point-text-careers {
        font-size: 16px;
    }

    .footer-menu li {
        font-size: 14px;
    }

    .footer-logo {
        font-size: 30px;
    }

    .footer-para {
        font-size: 14px;
    }

    .section-1 {
        padding: 90px 0px;
    }

    .content {
        padding-left: 10px;
        padding-right: 10px;
    }

    p.main-banner-para {
        display: none;
    }

    .circle {
        height: 48px;
        width: 48px;
    }

    .circle-54 {
        height: 48px;
        width: 48px;
    }

    .number {
        font-size: 26px;
    }

    .point-item {
        margin-bottom: 35px;
    }

    .accordion-button {
        font-size: 16px;
        line-height: 20px;
    }

    .accordion-body {
        font-size: 14px;
    }

    .btn-readmore {
        width: 142px;
        height: 36px;
        padding: 6px 12px;
    }

}

@media (min-width: 290px) and (max-width: 425px) {
    .contact-links::after {
        content: "\A"; /* Inserts a line break */
        white-space: pre; /* Ensures the line break is respected */
    }
}


/* Mobile Smaller Screen Customization */
@media (max-width: 479px) {
    .bg-image-gradient::before {
        display: none;
    }
    
    .blog-box h6 {
        font-size: 18px;
    }
    
     .mobile-font-heading{
    	font-size: 32px;
        line-height: 40px;
    }
    
    .mobile-left{
    	text-align:left !important;
    }
    
    .linkedin-icon {
      margin-top: 0px !important;
      padding-bottom: 10px;
    }
    
   /* h2, .h2 {
        font-size: 38px;
        line-height: 48px;
        font-weight: 600;
        font-family: var(--heading-font-family);
    }
    */

 	.skills-box {
        width: 158px !important;
        margin-right: 8px;
    }
    
    .section-main {
        padding-bottom: 0px;
    }

    .about-content-box {
        margin-bottom: 16px;
        height: 211px;
    }

    .careers-content-box {
        margin-bottom: 16px;
        height: auto;
    }
}

.form-control {
    height: 45px;
    border: none;
}


.select-wrapper {
    position: relative;
    width: 100%;
}

/* .form-select,
select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="%23101319" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: 24px;
} */

.form-select,
select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="%23B6B6B6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 2.5rem;
}

/* Error state for invalid inputs */
.form-select.is-invalid-field,
select.is-invalid-field {
    border: 1px solid #cd423a !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="%23101319" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    background-size: 24px !important;
    background-position: right 10px center !important;
}

.select-wrapper select {
    width: 100%;
    appearance: none;
    padding-right: 40px;
    border-radius: 8px;
    padding: 10px;
    background-color: #FFF;
}

.select-wrapper select:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
}

.contact-form,
.form-messages {
    transition: opacity 0.3s ease;
}

.contact-form {
    /* Ensure the form takes up the full height needed */
    height: auto;
}

.form-messages {
    height: auto; /* Set to the same height as the form */
    padding: 20px;
}

/* Error states for inputs */
.is-invalid-field {
    border: 1px solid #cd423a !important; /* Red for invalid inputs */
}

/* Error message styling */
.is-invalid-field + .invalid-feedback {
    display: flex; /* Use flex to align the icon and text horizontally */
    align-items: center; /* Center items vertically */
    font-size: 0.875rem;
    color: #cd423a;
    margin-top: 0.25rem;
}


/* Add SVG icon before the error message */
.is-invalid-field + .invalid-feedback::before {
    content: ""; /* No text content */
    display: inline-block; /* Ensure it aligns with the text */
    width: 16px;
    height: 16px;
    margin-right: 0.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23cd423a'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23cd423a' stroke='none'/%3E%3C/svg%3E");
    background-size: contain; /* Ensure the SVG scales with the container */
    background-repeat: no-repeat;
}
.invalid-feedback
img.emoji {
    display: none !important;
}

.select-wrapper select option {
    background-color: #FFF;
    color: #000;
}

select.form-control {
    background-color: #FFFFFF; /* Ensure background is white */
    position: relative;
    -webkit-appearance: none;
    appearance:none;
}

select.form-control option {
    background-color: #FFFFFF; /* White background for options */
    color: #101319; /* Text color for options */
}

textarea.form-control {
    resize: none; /* Prevent resizing of textarea */
}


/* Telephone Field Customization */
.iti.iti--allow-dropdown.iti--separate-dial-code {
    width: 100% !important;
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: transparent !important;
    border-radius: 16px;
}

.iti__selected-flag{
    height: 100% !important;
}

/* Ensure the invalid feedback does not push the input field */
.invalid-feedback {
    display: block;
    margin-top: 0.5rem;
    color: #cd423a;
    font-size: 0.875rem;
    position: relative;
}

/* Fix the border when the field is invalid */
.is-invalid-field {
    border: 2px solid #cd423a;
    padding-right: 45px;
    box-sizing: border-box;
}

/* intl-tel-input dropdown adjustments */
.iti {
    width: 100%;
}

.iti__flag-container {
    margin-right: 5px;
}
.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container{
    height: 46px;
}
/* Adjust phone input when it is invalid */
.phone-input-wrapper .is-invalid-field + .invalid-feedback {
    position: relative !important;
    top: 100%;
    left: 0;
}

.iti__dropdown {
    z-index: 1000;
}

/* Customize form fields */
.form-control,
.form-select,
textarea {
    border-radius: 8px;
    background-color: #FFFFFF;
    padding: 12px;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Focus state with transition */
.form-control:focus,
.form-select:focus,
textarea:focus {
    box-shadow: 0 0 0 0.110rem rgba(23, 95, 99, 0.15) !important;
    border-color: rgba(23, 95, 99, 0.5);
}

.contact-card {
    border-radius: 16px;
    background-color: #EEF9F9;
    border: none;
    padding: 24px 24px !important;
    display: flex;
    height: auto;
    justify-content: end;
    transition: height 0.3s ease;
}

.contact-card.form-submitted {
    height: 574px; /* Height when form is submitted */
}

.contact-links{
    text-decoration: underline;
    color: var(--body-text);
}

a.contact-links:hover{
    color: var(--body-text);
    text-decoration: underline !important;
}

.link-color{
    color: #088FCD;
    cursor: pointer;
}

.mandatory{
    color: #E62E05;
}

/* Adjust padding and margin for smaller screens */
@media (max-width: 576px) {
    .card {
        padding: 2rem;
    }
    .content-2{
        padding-bottom: 40px !important;
    }

/* 404 ERROR */
.error-image{
	height:240px;
    width:240px;
}

    .padding-mobile{
        padding-top: 60px;
        padding-bottom: 44px;
    }

    .section-bg-green-professional {
        padding: 40px 0px;
    }

    .best-work {
        margin-top: 30px;
    }

    .solution-sec-mobile {
        padding-top: 0px !important;
    }

    .mobile-image-w-64 {
        height: 64px;
        width: 64px;
    }

    .mobile-image-w-270 {
        height: 216px;
        width: 270px;
        margin: auto;
        display: flex;
        justify-content: center;
    }

    .number {
        font-size: 24px;
    }

    .accordion-button {
        font-size: 16px;
        line-height: 20px;
        font-family: var(--body-font-family);
        color: #101319;
        font-weight: 400;
    }

    .section-bg-green {
        padding: 40px 0;
    }

    .section-everything {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .section-3 {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .solution-content {
        margin-top: 8px;
    }

    .main-solution-box::before {
        top: 5%;
    }

    .solution-box {
        gap: 0;
    }

    .role-main-div {
        padding-top: 0px;
    }

    .role-btn-primary {
        width: auto;
    }

    .mobile-image-w-217 {
        height: 217px;
        width: 217px;
        display: flex;
        justify-content: center;
        margin: auto;
    }

    .mobile-bg-pt {
        padding-top: 27px;
        padding-bottom: 27px;
    }

    .mobile-image-center {
        display: flex;
        justify-content: center;
        margin: auto;
    }

    .mobile-image-w-104 {
        height: 104px;
        width: 104px;
        display: flex;
        justify-content: center;
        margin: auto;
    }

    .social-icons a {
        margin-right: 24px;
    }

    .bootscore-copyright {
        text-align: left;
        padding-bottom: 32px;
    }

    .journey-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .blog-arrow {
        width: 140px;
        height: 80px;
    }

    .contact-card {
        padding: 24px 12px !important;
    }

    .form-control,
    .form-select,
    textarea {
        padding: 10px;
    }
}

/* Animation */

/* .scrolling-wrapper {
    display: flex;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch;
} */

.scrolling-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: visible;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    width: 100%;
    box-sizing: border-box;
}
.pin-spacer {
    overflow-x: hidden !important;
}

.skills-box {
    flex: 0 0 auto;
    margin-right: 16px;
    width: 330px;
    display: inline-block;
    padding: 24px;
}

.skills-main-box{
    padding-top: 120px;
}

.skills-main-box h2{
    text-align: center;
}


/* Careers Page */


.filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.filter-item {
    padding: 0;
    display: flex;
  justify-content: center;
  margin: auto;
}

.right-align {
    text-align: right;
}
.custom-select {
    width: 100%;
    padding: 8px;
}

/* Mobile adjustments For Careers Page */
@media (max-width: 768px) {
    .filter-by-text {
        width: 100%;
    }
    .filter-item {
        padding: 0;
        display: flex;
        justify-content: right;
        margin: auto;
      }
    .filter-item.full-width{
        width: 100%;
    }
    .half-width {
        width: 47%;
    }
    .right-align {
        width: 100%;
        text-align: right;
    }
}

.clear-filter{
    border-radius: 32px;
    border: 1px solid #B6B6B6;
    background: #F7F7F7;
    font-size: 14px;
    font-family: var(--body-font-family);
    font-weight: 400;
    line-height: 24px;
    display: flex;
    padding: 4px 8px;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

#clear-filters {
    cursor: pointer; /* Show hand cursor on hover */
    display: none; /* Hidden by default, will show when filter is applied */
}

#clear-filters:hover {
    color: #051756; /* Optional: change the color on hover */
}

.loader {
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid var(--brand-green);
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    margin: 0 auto;
}

.loader-1 {
    border: 4px solid #f3f3f3; /* Light gray */
    border-top: 4px solid var(--brand-green); /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

.careers-content-area p{
	color: var(--default-black) !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.careers-single{
    padding-top: 60px;
}

.filter-by-text {
    font-size: 18px;
    margin: auto;
}

.filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.filter-item {
    padding: 0;
    display: flex;
  justify-content: center;
  margin: auto;
}

.right-align {
    text-align: right;
}
.custom-select {
    width: 100%;
    padding: 8px;
}

/* Mobile adjustments For Careers Page */
@media (max-width: 768px) {
    .filter-by-text {
        width: 100%;
    }
    .filter-item {
        padding: 0;
        display: flex;
        justify-content: right;
        margin: auto;
      }
    .filter-item.full-width{
        width: 100%;
    }
    .half-width {
        width: 47%;
    }
    .right-align {
        width: 100%;
        text-align: right;
    }
}


.job-category a:hover {
    text-decoration: none;
  }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.filter-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.filter-options select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 210px;
    font-size: 13px;
}

.job-category {
    margin-bottom: 20px;
}

.job-location{
    margin-bottom: 0px !important;
}

.job-item {
    margin-bottom: 16px;
    border-radius: 16px;
    background: rgba(237, 237, 237, 0.50);
    backdrop-filter: blur(10px);
    padding: 16px 24px;
    border-radius: 16px;
}
.careers-content-area p {
    margin-bottom: 30px;
}

/* Adjust the input fields for padding and alignment */
#job-application-form input, 
#job-application-form select {
    padding: 12px;
    font-size: 16px;
    border-radius: 8px;
    height: 40px;
}

#job-application-form{
    border-radius: 16px;
    background: rgba(237, 237, 237, 0.50);
    backdrop-filter: blur(10px);
    padding: 24px;
    margin-top: 30px;
}

/* File input specific style */
#job-application-form input[type="file"] {
   position: absolute;
   left: -999em;
}

.careers-form .form-messages {
    padding: 40px 0px 0px 10px;
  }

/* Apply form general styles */
#job-application-form input, #job-application-form select {
    font-size: 16px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ced4da;
}

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: var(--default-black);
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: var(--default-black);
   opacity: 1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: var(--default-black);
   opacity: 1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--default-black);
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--default-black);
}
.form-control::placeholder { /* Most modern browsers support this now. */
    color: var(--default-black);
}


#job-application-form select{
    padding: 7px 12px;
}

#job-application-form input:focus, #job-application-form select:focus {
    border: 1px solid rgba(23, 95, 99, 0.5);
}

/* Custom file upload label */
.custom-file-upload {
    font-size: 18px;
    color: var(--default-black);
    cursor: pointer;
    display: inline-block;
}

.custom-file-upload .required {
    color: #e74c3c; /* Red color for the asterisk */
}

.careers-form .required{
    color: #e74c3c;
}

.file-upload-text {
    color: #088FCD; /* Blue color for "Choose a file" text */
    text-decoration: underline;
}

/* File name display */
#file-name {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #333;
}

.apply-text{
    color: var(--brand-green);
    margin-bottom: 31px;
}

.careers-form{
    width: 745px;
}

select.form-select {
    display: block;
    height: auto;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    line-height: 1.5;
    -webkit-appearance: none;
	appearance: none;
}

#remove-file {
    margin-left: 10px;
    color: rgb(205, 66, 58);
}

#selected-file-name {
    font-style: italic;
}

.link-color:hover {
    color: #175F63;
}

.file-area{
    display: flex;
}

/* Add SVG icon before the error message */
#upload-status::before {
    content: "";
    display: inline-flex;
    width: 16px;
    height: 20px;
    margin-right: 0.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23cd423a'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23cd423a' stroke='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    vertical-align: middle;
    background-size: contain;
}


@media only screen and (max-width: 768px) {
    .careers-form .invalid-feedback {
        margin-bottom: 15px !important;
    }
    #job-application-form input, #job-application-form select {
        margin-bottom: 15px;
    }
    #job-application-form select {
        height: auto;
    }
    #file-name{
        margin-bottom: 15px;
    }
    .animation-box{
    	padding-top:40px;
    }
    .custom-file-upload{
        font-size: 16px;
    }
    #job-application-form{
        padding: 24px 16px;
        margin-bottom: 90px;
    }
    .careers-form{
        width: 100%;
    }
    .apply-text{
        font-size: 24px;
        margin-bottom: 24px;
    }
    .careers-single{
        padding-top: 40px;
    }
    .filter-options select{
        font-size: 12px;
    }
    .filter-by-text{
        font-size: 18px;
    }
    .scrolling-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: visible;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        width: 100%;
        box-sizing: border-box;
    }
    .pin-spacer {
        overflow-x: hidden !important;
    }
    .filter-options select{
        width: 100%;
    }
}

.animation-box{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top:90px;
}

/* Custom styles for the footer section only */

/* Hide column 2 (.col-md-2) between 768px and 991px */
@media (min-width: 768px) and (max-width: 991px) {
    .cbt-footer .col-md-2 {
        display: none !important;
    }
    .cbt-footer .col-md-5 {
        flex: 0 0 50%; /* Change to col-5 */
        max-width: 50%; /* Change to col-5 */
    }
    .point-text{
        width: auto;
    }
}

/* For larger screens (992px and above) */
@media (min-width: 992px) {
    .cbt-footer .col-md-5 {
        flex: 0 0 33.33%; /* Change to col-4 */
        max-width: 33.33%; /* Change to col-4 */
    }
}


/* Cookie Icon */
.cookie-icon {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 42px;
    height: 42px;
    display: flex;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42' fill='none'%3E%3Ccircle cx='21' cy='21' r='21' fill='%23DDF3F4'/%3E%3C/svg%3E");
    background-size: cover;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    z-index: 1000;
}

  .close-btn {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-left: 10px;
    cursor: pointer;
  }
  
  .close-btn i {
    color: #000;
    font-size: 18px;
  }
  
  .header-cookie{
    display: flex;
    justify-content: space-between;
  }
  
  .cookie-icon span {
    font-size: 24px;
  }
  

  .cookie-icon i {
    color: white; /* Icon color */
    font-size: 26px;
  }
  
  /* Cookie Banner (Hidden by default) */
  .cookie-banner {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 400px;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    z-index: 1001;
  }

  @media only screen and (max-width: 768px) {
    .cookie-banner {
        display: flex;
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 90%;
        background-color: white;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border-radius: 16px;
        z-index: 1001;
      }
  }
 
  
  .cookie-content h6 {
    margin: 0 0 10px 0;
  }
  
  .cookie-content p {
    font-size: 14px;
    margin-bottom: 20px;
  }
  
  .cookie-buttons {
    display: flex;
    justify-content: space-between;
  }
  
  .cookie-buttons button {
    padding: 10px 20px;
  }
  
@media (max-width: 768px) { /* Adjust max-width as needed */
    img.join-us-img.wow {
        animation: none !important; /* Disable animations */
        visibility: visible !important; /* Ensure visibility */
    }
}

.explore-font{
	font-size:22px !important;
}

.research-content-box{
    border-radius: 16px;
    background: rgba(237, 237, 237, 0.50);
    box-shadow: 0 4px 40px 0 rgba(16, 73, 76, 0.07);
    backdrop-filter: blur(10px);
    padding: 40px 24px;
    margin-bottom: 32px;
    height: 267px;
}
.research-content-box h6,p{
margin-bottom:20px;
}

.dropdown-menu{
	padding:16px;
	border-radius:16px !important;
    background: #FFF;
	box-shadow: 0 14.616px 11.692px 0 rgba(111, 114, 132, 0.08), 0 7.762px 		6.21px 0 rgba(111, 114, 132, 0.06), 0 3.23px 2.584px 0 rgba(111, 114, 		132, 0.04);
    border:0px!important;
    --bs-dropdown-link-hover-color:#101319!important;
--bs-dropdown-link-hover-bg: rgba(237, 237, 237, 0.50); !important;
--bs-dropdown-link-active-color: #101319 !important;
--bs-dropdown-link-active-bg: rgba(237, 237, 237, 0.50);!important;
    
}

@media only screen and (max-width: 768px) {
    .dropdown-item{
    	color:#646871 !important;
        font-size:16px;
        text-decoration-line:none !important;
    }
    
    .dropdown-item:hover,
	.dropdown-item.active {
    color: #101319 !important;
	}
    
    .dropdown-menu{  
    padding:16px !important;
	border-radius:16px !important;
    background: #FFF;
	box-shadow: 0 14.616px 11.692px 0 rgba(111, 114, 132, 0.08), 0 7.762px 		6.21px 0 rgba(111, 114, 132, 0.06), 0 3.23px 2.584px 0 rgba(111, 114, 		132, 0.04);
    border:0px!important;
	--bs-dropdown-link-hover-bg:#646871); !important;
	--bs-dropdown-link-active-bg:#646871; !important;   
	}
    
    .menu-item-description{
    	display:none !important;
    }
    .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
  .navbar .dropdown-menu {
    pointer-events: auto;
  }

}
  
.menu-item-description {
    display: block;
    margin-left: -8px;
    margin-top:-4px !important;
    color: var(--Text-Disabled, #646871);
	font-variant-numeric: lining-nums proportional-nums;
	font-family: "Open Sans";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	padding:8px
}

.blogs-items{
	margin-top:16px
}

.resources-dropdown >.dropdown-menu{
	width:290px;
}

.dropdown-item{
	font-weight:600!important;
    font-size:16px !important;
	text-decoration-line:none !important;
    margin-bottom:8px;
    font-family: Nunito !important;
    line-height:150%
}

.navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
  .navbar .dropdown-menu {
    pointer-events: auto;
  }
  
.dropdown-menu > li:hover,.dropdown-menu > li.active  {
    background: rgba(237, 237, 237, 0.50) !important;
    border-radius: 8px;
}

.dropdown-item:hover,.dropdown-item.active {
    background: transparent !important;
}

.section-main-research{
	padding-top:100px;
    padding-bottom:0px
}


.app-download-row .app-store-btn {
  width: 280px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; 
  font-size: 16px;  
  margin-bottom:0;
}

.app-download-row img {
  flex-shrink: 0;
}

.app-subtitle {
  font-size: 18px;
  margin-bottom:16px;
}

.app-download-row .qr-download-img {
  width: 64px;  
  height: auto;
  margin-left: 8px;
}

.qr-download-img {
  width: 64px;       
  height: auto;
}

.qr-download-text {
  color: var(--Text-Disabled, #646871);
text-align: center;
font-variant-numeric: lining-nums proportional-nums;
font-family: "Open Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
width:100px;
}

.cookie-settings-modal {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 400px;
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    z-index: 1001;
}

@media (max-width:768px){
    .cookie-settings-modal {
        width: 90%;
    }
}

#cookieSettingsPanel input[type="checkbox"] {
    accent-color: #175f63;
}

#cookieSettingsPanel input[type="checkbox"]:hover {
    cursor: pointer;
    accent-color: #175f63;
}