/* Minification failed. Returning unminified contents.
(54,1): run-time error CSS1019: Unexpected token, found '@import'
(54,9): run-time error CSS1019: Unexpected token, found 'url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap")'
(57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(60,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(187,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(190,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-secondary'
(193,24): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(196,24): run-time error CSS1039: Token not allowed after unary operator: '-sj-secondary'
(199,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(202,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-secondary'
(208,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(209,24): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(223,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-secondary'
(234,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(273,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-secondary'
(284,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(304,41): run-time error CSS1046: Expect comma, found '0'
(304,45): run-time error CSS1046: Expect comma, found '/'
(305,53): run-time error CSS1046: Expect comma, found '0'
(305,57): run-time error CSS1046: Expect comma, found '/'
(336,36): run-time error CSS1046: Expect comma, found '87'
(336,43): run-time error CSS1046: Expect comma, found '/'
(342,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(343,35): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(348,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(359,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(373,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(403,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(404,24): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(411,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(412,24): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(428,59): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(437,49): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(463,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-secondary'
(490,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(531,16): run-time error CSS1039: Token not allowed after unary operator: '-sj-secondary'
(536,16): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(553,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(568,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(628,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-secondary-rgba'
(670,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(671,35): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(683,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(702,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(711,17): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-color-062343'
(734,17): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-color-68737e'
(751,17): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-color-062343'
(791,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(797,21): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(870,22): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-color-3789e2'
(871,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(877,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(901,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(902,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(908,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(919,22): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-color-3789e2'
(920,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(954,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-secondary-rgba'
(966,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1033,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1064,19): run-time error CSS1036: Expected expression, found ';'
(1176,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1233,21): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1239,22): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-color-3789e2'
(1240,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1270,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1301,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1329,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1336,26): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1337,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1434,19): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-divider'
(1636,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1653,22): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1751,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1754,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1762,26): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1767,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1812,17): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1828,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1859,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1938,50): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1943,45): run-time error CSS1039: Token not allowed after unary operator: '-sj-secondary'
(1948,21): run-time error CSS1039: Token not allowed after unary operator: '-sj-primary'
(1966,39): run-time error CSS1046: Expect comma, found '0'
(1966,43): run-time error CSS1046: Expect comma, found '/'
 */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    25% {
        opacity: 0;
        transform: translateX(-15px);
    }

    50% {
        opacity: 0;
        transform: translateX(-10px);
    }

    75% {
        opacity: 0;
        transform: translateX(-5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    25% {
        opacity: 1;
        transform: translateX(-5px);
    }

    50% {
        opacity: 1;
        transform: translateX(-10px);
    }

    75% {
        opacity: 1;
        transform: translateX(-15px);
    }

    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
} 
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap");

:root {
    --sj-primary: #3789e2;
    --sj-secondary: #062343;
    --sj-secondary-rgba: rgb(6, 35, 67, 90%);
    --sj-dark-text: #212121;
    --sj-body-text: #212121;
    --sj-danger: #ff1a35;
    --sj-success: #25bb2c;
    --sj-warning: #ee7b1e;
    --sj-primary-light: rgb(55, 137, 226, 15%);
}

body, p, a, li {
    font-family: "Barlow", sans-serif;
    color: #545d66;
    font-weight: 400;
    padding-top: 0;
    padding-bottom: 0;
}

table, button, label {
    font-family: "Barlow", sans-serif !important;
}

.p-6 {
    padding: 5rem !important;
}

.p-20 {
    padding: 20px !important;
    /*background: #F8FAFC;*/
}

a {
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    text-decoration: none !important;
}

.mt-2rem {
    margin-top: 2.70rem !important;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

h1,
h2,
h3 {
    font-weight: 700 !important;
    font-family: "Barlow", sans-serif;
}

h2{
    font-size: 36px;
}
h3{
    font-size: 30px;
}
h4{
    font-size: 22px;
    font-weight: 500;
}

select.form-control {
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    -ms-appearance: menulist !important;
    -o-appearance: menulist !important;
    appearance: menulist !important;
}
body h1 {
    font-size: 2rem;
    font-family: "Barlow", sans-serif;
}

h5 {
    font-size: 1rem !important;
    font-weight: 600;
    font-family: "Barlow", sans-serif;
}

h4 {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #68737e;
    font-family: "Barlow", sans-serif;
}

.curve {
    position: relative;
    left: 0;
    top: 0;
}

.navbar-light .navbar-toggler {
    color: transparent !important;
}
/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: #777;
    border-color: #fff;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 60px;
    z-index: 99;
    height: 55px;
    line-height: 35px;
}

.primary-bg{
    background-color: var(--sj-primary);
}
.secondary-bg{
    background-color: var(--sj-secondary);
}
.primary-border{
    border-color: var(--sj-primary) !important;
}
.secondary-border{
    border-color: var(--sj-secondary) !important;
}
.primary-text{
    color: var(--sj-primary);
}
.secondary-text{
    color: var(--sj-secondary);
}

/*** Button ***/

.btn-primary, .btn-secondary:hover{
    background-color: var(--sj-primary);
    border-color: var(--sj-primary) ;
    color: #fff;
}
.navbar-toggler {
    color: #fff;
    box-shadow: none !important;
    z-index: 1000;
}
.navbar-toggler-icon {
    width: 1em;
    height: 1em;
}

header .navbar-toggler{
    background-color: var(--sj-secondary) !important;
    border-radius: 0 !important;
    border: 0 !important;
}
header .navbar-toggler-icon{
    filter: invert(1);
}

/*Navbar Section*/
a.nav-link.contact:hover,
.Home-section-first button:hover {
    background: var(--sj-primary) !important;
    color: white !important;
}

.store {
    display: flex;
    align-items: center;
}
button.navbar-toggler {
    position: relative;
    z-index: 1;
}

.hero-header {
    background-image: none !important;
}

/** NAVIGATION MENU **/

header .navbar .nav-item {
    color: #fff;
    margin: 0 20px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    border-bottom: 3px solid transparent;
}
header .navbar .nav-item:last-child {margin-right: 0;}
header .navbar .nav-item:hover, 
header .navbar .nav-link.active {color: #fff !important; border-bottom: 3px solid #fff !important;}
.logout {
    border-radius: 50px;
    background: transparent !important;
    border: 2px solid #fff !important;
    padding: 7px 20px !important;
}
.logout:hover {
    background-color: #fff !important;
    font-weight: 600 !important;
    color: var(--sj-secondary) !important;
}
.logout .fa {
    font-size: 16px;
    margin-right: 6px;
}
.get-started button a {padding-right: 5px;}
.store a.cart-item-count {
    position: relative;
}
.store a.cart-item-count span {
    background: var(--sj-primary);
    color: #fff;
    width: 15px;
    height: 15px;
    font-size: 10px;
    display: inline-block;
    padding: 5px;
    border-radius: 25px;
    line-height: 7px;
    position: absolute;
    top: -4px;
    right: -10px;
}
.SJ-icon img {width: 100%;}
.navbar {
    padding-bottom: 0px !important;
    padding-top:0px !important;
    z-index: 1;
}
.telephone-no button h5{margin:0px;}
.card:hover {box-shadow: 0 0 20px rgb(0 0 0 / 10%); cursor: pointer;}
.company-insights:hover {box-shadow: 0 0 20px rgb(0 0 0 / 10%);}
.company-insights {padding: 10px;}
.navbar-collapse {justify-content: space-between;}
.navbar-brand {margin-right: 0 !important;}
.navbar .navbar-brand .SJlogo {width: 90px;}
.navbar .container {border-bottom: solid 1px #dae9f9;}
#v-pills-tab ul{position:relative;}
#v-pills-tab ul li:after {
    content: '';
    background: #DAE9F9;
    width: 1px;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 28px;
    left: -23px;
}
#v-pills-tab ul li {position: relative;}
#v-pills-tab ul li:last-child:after{display:none;}
#navbarNav .nav-link.contact {padding: 8px 20px;}
#navbarNav ul li a {
    color: #062343;
    font-size: 18px;
    font-weight: 600;
    overflow: visible;
    border-bottom: 2px solid transparent;
}
#navbarNav ul.dropdown-menu {
    top: 54px;
    border-color: #dae9f9;
    border-top: 0;
    box-shadow: 0 15px 25px rgb(50 87 126 / 10%);
    padding: 0;
    border-radius: 0 0 5px 5px;
}
#navbarNav ul.dropdown-menu li a {padding: 7px 15px;}
#navbarNav ul li a:hover {
    color: var(--sj-primary);
    border-bottom: 2px solid var(--sj-primary);
}
.contact {
    background: #e6f3ff 0% 0% no-repeat padding-box;
    border-radius: 23px;
    color: var(--sj-primary) !important;
}
.contact-us input,
.contact-us select,
.contact-us textarea {
    background: #FFFFFF;
    border: #F8FAFC;
}
.contact-us input:focus,
.contact-us textarea:focus,
.contact-us select:focus {
    border: solid 1px var(--sj-primary);
    box-shadow: none;
}
li.nav-item {padding: 0 7px;}
.contact-us h5 {margin: 0;}
.secretWord {
    position: absolute;
    right: 2rem;
}
#v-pills-tab ul li {
    color: #DAE9F9;
    font-size: 30px;
}
#v-pills-tab ul li.active {
    color: var(--sj-primary);
    font-size: 30px;
}
#v-pills-tab button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
}


/*** LANDING PAGE ***/

.main-nav{
    top: 0;
    left: 0;
    right: 0;
}
#main-banner {
    background-size: cover;
    background-position: center;
    min-height: 600px;
}
#main-banner p{
    padding-right: 70px;
    margin-bottom: 30px;
}
#main-banner .bannerBtn a {
    padding: 8px 25px;
    font-size: 18px;
    background: var(--sj-primary);
    border-color: var(--sj-primary) ;
}
#main-banner .bannerBtn a.watch-video {
    background: rgba(29, 31, 46, 0.2);
    border-color: #5E85A4 ;
}
#main-banner .bannerBtn a.watch-video:hover {
    background: var(--sj-primary);
    border-color: var(--sj-primary) ;
}
#main-banner .bannerBtn a .fa {margin-left: 10px; font-size: 15px;}
.banner-laptop img {
    margin-top: 100px;
    margin-bottom: -60px;
    margin-left: -150px;
}
#core-features .offcanvas {width: 50%;}
#core-features .icon-box img {
    background-color: #F6F6F6;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    padding: 11px;
}
#core-features .icon-box img:hover{border: 1px solid var(--sj-primary); background-color: #fff;}
#core-features .contentbox a {
    font-size: 18px;
    font-weight: 700;
    color: #212121;
    line-height: 1.3;
    margin-bottom: 5px;
    display: block;
}
#core-features .contentbox a:hover {color: var(--sj-primary);}
#core-features .contentbox a span {
    display: block;
    font-size: 14px;
    font-weight: 600;
}
#core-features .contentbox p {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
#core-features .offcanvas .featureImage {
    border: 5px solid #fff;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0,0,0,.1);
}
.offcanvas-header .btn-close{box-shadow: none;}
#core-features .offcanvas-body h6 {font-weight: 600;}
#core-features .offcanvas-body p {margin-bottom: 20px;}
#core-features ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #dadada;
    padding: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: var(--sj-secondary);
}   

/*** HOW IT WORK ***/

#how-it-work {
    margin-top: 18px;
    padding-bottom: 30px;
}

/*** FAQs ***/

#faqs .accordion-item {
    margin-bottom: 15px;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
}
#faqs .accordion-button {
    font-size: 18px;
    font-weight: 500;
    color: #212121;
    box-shadow: none;
    border-radius: 5px;
    padding: 12px 20px;
}
#faqs .accordion-button:not(.collapsed) {
    background: #fff;
    color: var(--sj-primary);
    padding-bottom: 0;
}

/** CTA SECTION CSS **/

.section-contact-us {
    background: url(/img/CTA-bg.png);
    background-size: cover;
    background-position: center;
    position: relative;
}

.section-contact-us h3 {
    color: #ffffff;
    font-size: 30px !important;
}

.section-contact-us h3 + p {
    font-size: 24px; 
    color:#fff;
}

.phone-icon {
    position: absolute;
    top: -50px;
    right: 0;
    left: 0;
    background: #ffffff;
    border-radius: 40px;
    margin: 20px auto;
    width: 60px;
    height: 60px;
    line-height: 60px;
}

.phone-icon svg {
    width: 30px;
}

.phone-icon svg #Path_394 {
    fill: var(--sj-secondary);
}

.phone-icon svg #Path_396,
.phone-icon svg #Path_397 {
    fill: var(--sj-primary);
}

.support-email {
    text-align: center;
    font: status-bar;
    letter-spacing: 0px;
    font-size: 22px;
    text-decoration: underline;
}

.contact-details .telephone-no button {
    height: 45px;
    padding: 3px 30px 3px 50px;
    border-radius: 25px;
    border: none;
    color: #ffffff;
    background: var(--sj-primary);
    position: relative;
    top: 0;
    left: 0;
}

.customerService-icons {
    position: absolute;
    top: -3px;
    left: -10px;
    width: 50px;
    height: 50px;
    padding: 12px;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 4px 2px 10px #00000029;
    border: 4px solid var(--sj-primary);
    color: #333;
    border-radius: 28px;
}

.telephone-no a, .telephone-no a:hover h5,
.telephone-no a, .telephone-no h5 {
    color: white;
}

.contatct-details {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.telephone-no ~ h6 {
    padding: 3px;
    position:relative;
    margin-right: 8px !important;
}

.telephone-no + h6:before, .telephone-no + h6:after {
    content: "";
    background-color: #ffffff;
    position: absolute;
    width: 2px;
    height: 12px;
    top: -38px;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: -1;
    margin: auto;
}

.telephone-no ~ h6:after {
    top: auto;
    bottom: -10px;
}

.contact-items img {
    width: 70% !important;
}

.contact-details .contact-items {
    align-items: center;
    padding: 20px 0;
}

.contact-details {
    position: relative;
    z-index: 1;
}

.section-contact-us:after {
    content: "";
    background: var(--sj-secondary-rgba);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.telephone-no a, .telephone-no a:hover h5 {
    color: white;
}

.contact-details .telephone-no button span i:before {
    margin-top: 2px;
    display: block;
}

.telephone-no a h5 {
    margin: 0;
}

.customerService p {
    color: #FFFFFF;
}
#contactUsForm{
    background-color: #F4F7F9;
    padding: 0px 30px 70px 30px;
    border-radius: 5px;
}

/*Footer*/

.contact-us form label.control-label {margin-bottom: 10px;}
#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--sj-primary) 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 20px var(--sj-primary)66;
    border: none;
    border-radius: 30px;
    z-index: 1;
}
.contact-us .row:nth-child(2) {row-gap: 10px;}
.SJ-icon {
    position: absolute;
    top: 0;
    left: 0;
}
.section-our-services ul li a:hover {
    color: var(--sj-primary);
}
.Home .Home-section-first {padding-top: 6rem;}
.Home-section-second img {
    width: 100%;
    height: 500px;
    object-fit: contain;
}
.Home .Home-section-first p {
    font-size: 18px;
    color: #68737e;
}
.Home .Home-section-first a {
    position: relative;
    /*z-index: 1;*/
    padding: 8px 30px;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 10px 25px #b6d8f780;
    border-radius: 23px;
    color: var(--sj-primary);
    border: none;
    font-family: "Barlow", sans-serif;
    font-weight: 600;
}

.Home .Home-section-first h1 {
    font-size: 2.5rem !important;
    font-weight: bold;
    color: var(--unnamed-color-062343);
}
.curve img {
    width: 100%;
    margin-top: -300px;
    position: relative;
    top: 0;
    left: 0;
}

img.service-img {
    position: absolute;
    top: 50px;
    width: 15% !important;
    left: 270px;
}

.curve h5 {
    position: relative;
    top: -100px;
    left: 360px;
    width: 507px;
    height: 104px;
    color: var(--unnamed-color-68737e);
    text-align: left;
    font: normal normal normal 24px/36px Barlow;
    letter-spacing: 0px;
    color: #68737e;
    text-transform: capitalize;
    opacity: 1;
}

.curve h1 {
    position: relative;
    /* Layout Properties */
    top: -100px;
    left: 360px;
    width: 211px;
    height: 48px;
    /* UI Properties */
    color: var(--unnamed-color-062343);
    text-align: left;
    font: normal normal bold 36px/48px Barlow;
    letter-spacing: 0px;
    color: #062343;
    opacity: 1;
}

.card-body {
    height: 270px;
}
/*
.card ul {
    padding-left: 20px;
}*/
.contact-details .telephone-no button span i:before {
    margin-top: 2px;
    display: block;
}

.card .card-title {
    color: #062343;
    text-align: center;
    font-weight: bold;
}

.card ul li {
    color: #68737e;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 10px;
    font-weight: 500;
}

.card-footer {
    text-align: center;
}

.card button {
    font: normal normal 600 18px/24px Barlow;
    color: var(--sj-primary);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: none;
}

    .card button a {
        color: var(--sj-primary);
        font-weight: 600;
    }

.card-footer {
    padding: 0.5rem 1rem !important;
    background-color: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.125) !important;
}

.card-box {
    border: 1px solid #dae9f9 !important;
}

.card-footer {
    border-top: 1px solid #dae9f9 !important;
}

.card {
    border: 1px solid #DAE9F9 !important;
    margin-bottom: 20px;
}

.cards {
    column-gap: 20px;
    margin-bottom: 10px;
}

.card-section-last {
    position: relative !important;
    left: 325px;
}

.card-section {
    margin-top: -70px;
}

.img-box {
    margin: 10px auto;
}

.img-box img {
    height: 50px;
    object-fit: contain;
}

/*Home Section*/
/*About Us Section*/


.Pricing-Plan .starting-from {
    width: 85px;
}

.social-icons a {
    color: #fff;
    width: 35px;
    height: 35px;
    display: inline-block;
    text-align: center;
    border-radius: 25px;
    padding: 8px;
    font-size: 9px;
}
.social-icons a:hover {color: #fff;}
.About-section .about-image img {
    width: 100%;
    height: 420px;
    object-fit: contain;
}
.About-section a {
    color: white;
    padding: 8px 30px;
    background: var(--unnamed-color-3789e2) 0% 0% no-repeat padding-box;
    background: var(--sj-primary) 0% 0% no-repeat padding-box;
    border-radius: 23px;
    color: #ffffff;
    border: 1px solid transparent;
}
.Home .Home-section-first a:hover {
    background: var(--sj-primary);
    color: #FFFFFF;
}
.About-section button:hover {
    background: #062343;
}

.About-section h1 {
    color: #062343;
}
.add-to-cart table .delete a:hover {
    border: solid 1px red;
    background:red;
}

.About-section p {
    width: 100%;
    font-size: 16px;
    color: #68737e;
}
.About-section a:hover,
.contact-us button:hover,
.add-to-cart button:hover {
    background: transparent !important;
    border: solid 1px var(--sj-primary);
    color: var(--sj-primary);
}
input#cartQuantity:hover, input#cartQuantity:visited, input#cartQuantity:focus,
.add-to-cart input:focus, .add-to-cart textarea:focus,
.add-to-cart select:focus {
    box-shadow: none !important;
    border: solid 1px var(--sj-primary);
}

.About-section {
    background-image: linear-gradient(#eef7ff, #ffffff);
}

.contact-details .telephone-no button {
    height: 45px;
    padding: 3px 30px 3px 50px;
    /* UI Properties */
    background: var(--unnamed-color-3789e2) 0% 0% no-repeat padding-box;
    background: var(--sj-primary) 0% 0% no-repeat padding-box;
    border-radius: 25px;
    border: none;
    color: #ffffff;
    position: relative;
    top: 0;
    left: 0;
}

.contact-details {
    position: relative;
    z-index: 1;
}
.ourService-title h3{
    font-size:18px;
    padding-left:10px;
}
.ourService-title img {
    width: 35px;
    height: 35px;
}

/*source Sevices Section*/

.contact-items img {width: 100%;}
.section-contact-us {
    background: url("/Content/SJ-Images/CTA-bg.png");
    background-size: cover;
    background-position: center;
    position: relative;
}

.section-contact-us:after {
    content: "";
    background: var(--sj-secondary-rgba);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.fa-angles-right {
    color: var(--sj-primary);
    margin-right: 5px;
    font-size: 10px;
}
/*.services-links {
    column-gap: 170px;
}*/
ul li a {
    font-size: 14px;
    color: #68737e;
    text-decoration: none;
}

.section-our-services h5 {
    font-size: 16px;
    font-weight: bold;
    color: #062343;
}
.bottom-logo {
    margin-top: 40px;
}
.bottom-logo img {
    position: absolute;
    width: 100px;
    top: -25px;
    right: 0;
    left: 0;
    margin: 0 auto;
    background: white;
    padding: 0px 12px;
    z-index: 1;
}
.footer-translate-middle {transform: translate(-50%, -50%) !important;}
.social-icons {text-align: right;}
footer p {
    font-size: 13px;
    color: #68737e;
    font-weight: 500;
}
a.imgbtn:hover {    
    background-color: rgba(20, 12, 16, 0.70);    
    transition: 0.5s;
}

/*---------------------------About-Us--------------------------*/

.about-image img {width: 100%;}

/*--------------------------Our-Services-----------------------*/

#v-pills-tab button {
    text-align: left;
}
.Our-Services #v-pills-tab button {
    text-align: left;
    padding:0px 10px;
}

.Our-Services .nav-pills .nav-link.active,
.Our-Services .nav-pills .show > .nav-link {
    color: #062343 !important;
    background: #F4F7F8 !important;
}

.Pricing-Plan .nav-pills .nav-link.active,
.Pricing-Plan .nav-pills .show > .nav-link {
    color: #FFFFFF !important;
    background: var(--sj-primary) !important;
}

.tab-content ul {
    color: #68737e;
}

.nav-pills .nav-link {
    /*width: 372px;*/
    height: 56px;
    background: #ffffff 0% 0% no-repeat padding-box !important;
    border-radius: 5px !important;
}

textarea#User_AdditionalInformation::placeholder {
    color: #A5B7C9;
}

.add-to-cart table td.package {
    /*white-space: nowrap;*/
    min-width: 270px;
}

#v-pills-tab {
    gap: 15px;
}

    #v-pills-tab button.nav-link {
        color: #062343;
        font-weight: 700;
        font-family: "Barlow", sans-serif;
        font-size:;
    }

.section-contact-us h4,
.section-contact-us h3 {
    color: white;
    font-size: 36px !important;
}


.add-to-cart .title label {
    font-weight: 500 !important;
}



.contact-us-form {
    padding-left: 20px !important;
}
/*.g-recaptcha div {
    width: 230px;
}*/

div#v-pills-tab {
    padding: 15px;
    background: #FFFFFF;
}

.Our-Services .row .tabs {
    background: #F4F7F9;
    border-radius: 10px;
    padding: 20px !important;
}

.AboutUs-section p {
    font-size: 18px;
    color: #68737E;
}

section.breadcrumb {
    background: url("/Content/SJ-Images/innerPagesBanner.png");
    height: 160px;
}

.breadcrumb li a {
    font-size: 16px;
    color: #b6d8f7;
    letter-spacing: 0px;
}

.Section-Portfolio #myTab {
    row-gap: 10px;
}

.breadcrumb {
    align-content: center;
}

.breadcrumb-item.active {
    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: 500;
}

.breadcrumb h1 {
    color: #ffffff;
}

#v-pills-tabContent h1 {
    font-size: 2rem;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-pills .nav-link {
    width: 100%;
}

#v-pills-tab .row {
    row-gap: 10px;
}



.contact-us h5 {
    font-size: 18px;
    font-weight: bold;
}

.contact-us input, .contact-us select, .contact-us textarea {
    font-size: 14px;
    padding: 10px;
    border: solid 1px transparent;
}

.contact-us label {
    font-weight: 600;
    margin: 10px 0 5px;
    font-size: 14px;
}

.contact-us label,
.contact-us a {
    color: #68737E;
}

.contact-us form label {
    color: #062343;
}

#v-pills-VOIP-tab .Our-Services button i {
    float: right;
    color: var(--sj-primary);
    padding-left: 5px;
}

.Our-Services button.active i {
    float: right;
    color: white;
}


.AboutUs-section img {
    float: left;
    height: 400px;
    object-fit: contain;
}

.AboutUs-section .text {
    text-align: justify;
}

    .AboutUs-section .text p {
        font-size: 16px;
        color: #68737E;
    }

label.control-label {
    color: #062343;
}

.telephone-no a,
.telephone-no a:hover h5 {
    color: white;
}
/*--------------------------Our-Services-----------------------*/
/*-------------------------------Contact-US------------------------*/
input,
select,
textarea {
    max-width: 100%;
}

.contact-us iframe {
    width: 100%;
}
/**/
.contact-us a {
    margin-right: 10px;
}

    .contact-us a i {
        background: #e6f3ff;
        padding-top: 25px;
        padding-left: 15px;
        border-radius: 50px;
        display: inline-block;
        height: 50px;
        width: 50px;
        color: var(--sj-primary);
    }

.contact-us button {
    width: 259px;
    height: 45px;
    background: var(--unnamed-color-3789e2) 0% 0% no-repeat padding-box;
    background: var(--sj-primary) 0% 0% no-repeat padding-box;
    border-radius: 23px;
    color: #ffffff;
    border: none;
}

.rc-anchor-normal .rc-anchor-pt {
    margin: 2px 45px 0 0 !important;
}
/*-------------------------------Contact-US------------------------*/

.Section-Portfolio strong {
    color: #062343;
}
.Section-Portfolio p {
    color: #68737E;
    font-size: 18px;
}
.Section-Portfolio ul {
    padding-left: 20px;
}
.Section-Portfolio ul li p {
    margin: 0;
}
.Section-Portfolio ul li {
    font-size: 20px;
}
/*Sweet alert*/
.swal2-actions .btn-success,
.swal2-actions .swal2-confirm {
    background: var(--sj-primary) !important;
}
/*Sweet alert*/


/*-----------------------Portfolio-Section-------------------------*/
.Section-Portfolio img {
    /* margin: 15px; */
    /* width: 47.5%; */
    /* height: 500px; */
    /* border-radius: 10px; */
    /* object-fit: cover; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-tabs {
    border-bottom: none !important;
}

.Section-Portfolio button {
    border: 1px solid #68737E !important;
    border-radius: 18px !important;
    font-size: 16px;
    color: #062343;
    font-weight: bold;
    padding: 5px 20px;
}

.Section-Portfolio ul li .nav-link.active {
    background-color: var(--sj-primary);
    color: white !important;
}

.nav-tabs .nav-link:hover {
    color: #062343;
}
/*-----------------------Portfolio-Section-------------------------*/


.Section-Portfolio h3 {
    font-size: 18px;
    color: #062343;
}
/*----------------------add-to-cart----------------------------*/
.add-to-cart .btn-primary.disabled, .add-to-cart .btn-primary:disabled {
    color: #444;
    background-color: #c6c9cf;
    border-color: #c6c9cf;
}

.add-to-cart .grand-total {
    font-size: 20px !important;
    font-weight: 600;
}

.add-to-cart button {
    font-weight: 500;
    background: var(--sj-primary);
    color: #FFFFFF;
    border-radius: 50px;
    padding: 7px 25px;
}

    .add-to-cart button:hover {
        background: var(--sj-primary);
        border-color: var(--sj-primary);
    }

.add-to-cart input::placeholder {
    color: #A5B7C9;
}

.add-to-cart .bg {
    background: #F8FAFC;
}


.add-to-cart select:invalid, .add-to-cart select:invalid option:first-child {
    color: #A5B7C9;
}

    .add-to-cart select:valid, .add-to-cart select:invalid option {
        color: black;
    }

.add-to-cart .text-center label {
    font-size: 24px;
}

.add-to-cart thead th:first-child {
    border-radius: 10px 0 0 0;
}

.add-to-cart thead th:last-child {
    border-radius: 0px 10px 0 0;
}

.add-to-cart table {
    vertical-align: middle;
}

.add-to-cart .bg .title {
    background: #062343;
    padding: 10px !important;
    color: #FFFFFF;
    border-radius: 10px 10px 0 0;
}

.add-to-cart a,
.add-to-cart a:hover {
    color: #062343;
}

.add-to-cart .image img {
    height: 80px;
    object-fit: cover;
    width: 100px;
    border: 1px solid #dee2e6;
}

.add-to-cart .check-box {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DAE9F9;
    border-radius: 5px;
    padding: 10px;
}


.add-to-cart input,
.add-to-cart textarea {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DAE9F9;
    border-radius: 5px;
    /* opacity: 1; */
}

.add-to-cart label {
    font-weight: 500;
    /* font-size: 18px; */
}


.add-to-cart .col-md-4 label,
.add-to-cart .col-md-12 label,
.add-to-cart .col-md-6 label {
    margin: 15px 0 5px 0;
    font-weight: 600;
}

.bg .text-center label {
    margin: 0px !important;
}

.add-to-cart thead th {
    background: #062343;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #FFFFFF !important;
    content: var(--bs-breadcrumb-divider, ">") !important;
}

.add-to-cart .Qty {
    width: 120px;
}

.add-to-cart td {
    font-weight: 600;
    font-size: 16px;
    color: #062343;
}

    .add-to-cart td.image {
        text-align: left;
        padding-left: 30px;
    }

.add-to-cart .cartItemResponse {
    text-align: center;
}

.add-to-cart input#Quantity {
    padding: 5px 5px 5px 20px;
    max-width: 70px;
    margin: 0 auto;
}

.add-to-cart .payment-sectin {
    min-height: 585px;
}
/*----------------------add-to-cart----------------------------*/


/*-------------------------facts-Figures----------------------------------*/
.facts-figures p {
    color: #68737E;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
}

.facts-figures .img-icon {
    height: 60px;
    width: 100px;
    margin: 0 auto;
}

.facts-figures h5 {
    font-size: 36px !important;
    font-weight: 700;
}

.facts-figures .img-icon.experience img {
    height: 50px;
}

.facts-figures .img-icon.project img {
    height: 37px;
}

.facts-figures .img-icon img {
    height: 40px;
    width: 55px;
    object-fit: contain;
}

.add-to-cart table td .cartItemButton {
    text-align: center;
}

.facts-figures h5::after {
    width: 54px;
    content: '';
    height: 2px;
    background: #DCDCDC;
    margin: 10px auto;
    display: block;
}

.facts-figures h1 {
    font-size: 36px;
    font-weight: bold;
    color: #062343;
}
.img-container {
    position: relative;
    width: 49%;
    height: 400px;
}

.Section-Portfolio .imgbtn {
    top: 83%;
    left: 0;
    right: 0;
    background-color: rgba(20, 12, 16, 0.40);
    color: white;
    font-size: 20px;
    padding: 20px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    height: 70px;
}
    .imgbtn:hover{
        color:white;
    }

    .portfolio-container {
        flex-wrap: wrap;
        column-gap: 13px;
        row-gap: 15px;
    }
/*-------------------------facts-Figures----------------------------------*/
/*------------------------Products------------------------------*/
.Products .card img {
    height: 177px;
}

.Products .card-body {
    height: 240px;
}

.Products h5 {
    font-size: 18px;
}

.Products .price {
    color: #68737E;
    font-weight: 600;
}

.Products p {
    margin: 0;
    color: #ABABAB;
    font-size: 14px;
}

.Products h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #68737E;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.Products .card .img-box {
    border: solid 1px #DAE9F9;
    padding: 10px;
    margin: 0 !important;
}

.Products .card .card-body {
    height: 190px;
}

/*------------------------Products------------------------------*/



/*-----------------------------Product-Detail------------------------*/

.Product-Detail .image {
    padding: 20px;
}

.Product-Detail .img img {
    width: 100%;
    height: 400px;
    border: solid 1px #DAE9F9;
    object-fit: contain;
    padding: 20px;
}


.Product-Detail select {
    width: 569px;
    height: 50px;
    /* background: var(--unnamed-color-f8fafc) 0% 0% no-repeat padding-box; */
    background: #F8FAFC 0% 0% no-repeat padding-box;
    border: 1px solid #DAE9F9;
    /* border-radius: 5px; */
}

.Product-Detail h3 {
    color: #062343;
    font-size: 24px;
}

.Product-Detail h5 {
    font-size: 18px;
    color: #062343;
    font-weight: 600;
}

.Product-Detail h4 {
    font-weight: 600 !IMPORTANT;
    color: var(--sj-primary);
}

.Product-Detail p {
    color: #68737E;
    /* font-size: 18px; */
    font-weight: 500;
}

.Product-Detail .details {
    padding: 0px 60px;
}

.Product-Detail button {
    width: 179px;
    color: #FFFFFF;
    height: 45px;
    background: var(--sj-primary) 0% 0% no-repeat padding-box;
    border-radius: 23px;
    font-size: 18px;
}

.Product-Detail i {
    font-size: 15px;
}

.Our-Services .tab-content img {
    height: 450px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}
/*-----------------------------Product-Detail------------------------*/


/*-----------------------------Pricing-Plan---------------------------*/

.add-to-cart table .description {
    color: #68737E;
    font-size: 14px;
    line-height: 18px;
    inline-size: 280px;
    overflow-wrap: break-word;
    margin: 0;
}

.Pricing-Partial h4 {
    background: #062343;
    color: #FFFFFF;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    margin: 0 auto;
    width: 25rem;
    border-radius: 5px;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding: 5px 0;
}

.Pricing-Partial .Pricing-body {
    display: flex;
    background: #F8FAFC;
    border: 1px solid #DAE9F9;
    border-left: 0;
    flex-direction: column;
    align-items: center;
    padding: 40px 15px !important;
    min-height: 270px;
    position: relative;
    justify-content: center;
}

.Pricing-Plan .Pricing-body .card-button {
    position: absolute;
    bottom: 25px;
}

.Pricing-Partial .subscription {
    position: relative;
    padding: 15px 0 25px;
    border: solid 1px #DAE9F9;
    border-bottom: 0;
}

.add-to-cart table .delete a {
    border: 1px solid #DAE9F9;
    border-radius: 5px;
    padding: 8px 10px;
}

.Pricing-Partial h4 {
    background: #062343;
    color: #FFFFFF;
    margin-top: 20px;
    z-index: 1;
}

.Pricing-Partial h5.card-title {
    margin-bottom: 30px;
}

.Pricing-Plan .contact a {
    color: white;
    padding-right: 5px;
}

.Pricing-Plan .contact:hover {
    background-color: #062343;
    border-color: #062343;
}

.Pricing-Partial .card-button button {
    border: 1px solid var(--sj-primary);
    border-radius: 25px;
    padding: 7px 30px;
    color: var(--sj-primary);
    font-weight: 600;
    margin-top: 15px;
    display: block;
    background: transparent;
}

    .Pricing-Partial .card-button button:hover {
        background: var(--sj-primary);
        color: #fff;
    }

.Pricing-Partial .body-price {
    color: var(--sj-primary);
    font-size: 24px;
    margin: 0;
    height: 30px;
}

.Pricing-Partial .flex-wrap {
    border-left: 1px solid #dae9f9;
    border-right: 1px solid #dae9f9;
}

.Pricing-Partial .body-time {
    color: #68737E;
    font-size: 13px;
    font-weight: 700;
}

.Pricing-Plan .service-title h1 {
    color: #062343;
    font-size: 24px;
}

.Pricing-Plan .service-title h5,
.Pricing-Partial .subscription h5 {
    color: #68737E !important;
    font-size: 16px;
    font-weight: 600;
}

.Pricing-Plan .starting-from p {
    margin: 0;
    font-weight: 500;
    color: #68737E;
    font-size: 13px;
    text-align: right;
}

.Pricing-Plan .tab-buttons div#v-pills-tab {
    border: solid 1px #DAE9F9;
}

.Pricing-Plan .starting-from h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sj-primary);
    text-align: right;
}

.Pricing-Plan .nav-pills button {
    background-color: #E6F3FF !important;
    color: #FFFFFF;
    font-weight: 700;
}

.Pricing-Plan .nav-pills button.active p,
.Pricing-Plan .nav-pills button.active h5 {
    color: #FFFFFF;
}

.Pricing-Plan .nav-pills button.active {
    background-color: var(--sj-primary);
    color: #FFFFFF;
}

.Pricing-Partial h5 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #062343;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.subscription h1 {
    font-size: 24px;
    margin-bottom: 5px;
}

.Pricing-Partial {
    text-align: center;
}
.Pricing-Plan .description {
    padding: 20px;
    border: 1px solid #DAE9F9;
    border-top: 0;
}
.Pricing-Plan .contact {
    border-radius: 23px;
    color: #FFFFFF !important;
    background-color: var(--sj-primary);
    padding: 8px 20px;
    font-weight: 500;
}
#offcanvasFeatures1 {width: 50%;}
#btn-chat-whatsapp {
    position: fixed;
    bottom: 19px;
    right: 90px;
    height: 50px;
    z-index: 1;
}

/*-------------------------*** RESPONSIVE CSS ***-----------------------*/

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

    .curve img {margin-top: -220px;}
}
@media only screen and (max-width: 1500px) {

    .secretWord { margin-left: 15px; position: unset; }
}

@media only screen and (max-width: 1360px) {
    
    .banner-laptop img {margin-left: -230px;}
    #offcanvasFeatures1 {width: 60%;}
    #how-it-work .step {padding: 30px 20px;}
}


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

    #v-pills-tab button.nav-link {font-size: 13px;}
    .section-contact-us h4, .section-contact-us h3 {font-size: 24px !important;}
    img .service-img {
        top: 0px;
        width: 20% !important;
        left: 115px;
    }

    .contact-us label,
    .contact-us a {
        font-size: 14px;
    }

    #navbarNav > ul > li > a {
        font-size: 14px;
    }


    .curve img {
        width: 100%;
        margin-top: -100px;
    }

    .contact-items h1 {
        font-size: 1.5rem;
    }
}

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

    .banner-laptop img {margin-left: -130px;margin-top: 200px; width: 58vw;}
    #offcanvasFeatures1 {width: 75%;}
    .Pricing-Plan .starting-from p {font-size: 11px;line-height: 12px;}
    .Pricing-Plan .nav-pills button {font-size: 12px;}
    .Pricing-Plan .starting-from h5 {font-size: 13px;text-align: right;}    
    #navbarNav ul{width:max-content;}
    .appScreen img {margin-bottom: -20px;}
    #APP-download .content-box h3 {font-size: 24px !important;}
    
}

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

    header .navbar .nav-item{margin: 0}
    header .navbar .nav-item:hover, 
    header .navbar .nav-link.active {color: var(--sj-primary) !important; border-bottom: 3px solid transparent !important;}
    .banner-laptop img {margin-left: 0;margin-top: 30px; width: 100%;}
    #main-banner p {padding-right: 0px;}
    .Home .Home-section-first {text-align: center;}
    #core-features .offcanvas {width: 85%;}
    .main-nav .navbar-nav {background: var(--sj-secondary); margin-top: -4px;}
    .main-nav .navbar-collapse .navbar-nav {text-align: center;}
    .logout {
        background: transparent !important;
        padding: 0 !important;
        color: var(--sj-primary) !important;
        margin-top: 10px !important;
    }
    .contact-details .telephone-no button {height: 42px; padding: 0px 14px 2px 47px;}
    .section-contact-us h3 + p {font-size: 20px;}
    .Section-Portfolio ul li {font-size: 14px;}
    .Section-Portfolio .imgbtn {font-size: 15px;}
    #navbarNav ul {width: auto;}
    .Our-Services .tab-content img {height: 250px; width: 100%;}
    #v-pills-tabContent h1 {font-size: 1.5rem;}
    .navbar-light .navbar-toggler {position: relative;}
    #navbarNav {
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        width: 100%;
        padding: 0 15px;
        box-shadow: 0 10px 10px rgb(0 0 0 / 10%);
        border-radius: 0 0 10px 10px;
    }
    #contactUsForm {
        background-color: #F4F7F9;
        padding: 0px 15px 20px 15px;
        border-radius: 5px;
    }
    #contactUsForm h2 {font-size: 24px;}
    #contactUsForm h2 br {display: none;}  
}


@media (min-width: 768px) and (max-width: 1024px) {

    .card-body {height: 290px;}
    .add-to-cart button {font-size: 14px; padding: 5px 15px;}
    .telephone-no button h5 {font-size: 15px;}
    img.service-img {top: 0px; width: 20% !important; left: 115px;}
    a.nav-link.contact {padding: 10px !important; width: 90px;}
    .our-service-section {margin-top: 20px;}
    .footer-translate-middle {transform: translate(-35%, -60%) !important;}
    .AboutUs-section .row {text-align: center;}
    .AboutUs-section img {height: 270px;}
    #APP-download .content-box h1 {font-size: 42px !important;}
}


@media (min-width: 766px) and (max-width: 998px) {

    .fa-phone {width: 46px; height: 46px;}
}


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

    #how-it-work .step {margin-bottom: 60px;}
    .portfolio-container {column-gap: 10px !important;}
    .fa-phone {width: 45px; height: 45px; padding: 10px;}
    img.service-img {top: 10px;width: 18% !important;left: 75px;}
    .footer-social .row div {text-align: center;}
    #v-pills-tab button.nav-link {font-size: 14px;}
    a.nav-link.contact {padding: 10px !important; width: 90px;}
    .contact-details {padding: 10px;}
    .our-service-section {margin-top: 60px !important;}
    .footer-translate-middle {transform: translate(-28%, -60%) !important;}
    .AboutUs-section .row {text-align: center;}
}

@media (max-width: 767px) {

    .Home .Home-section-first {padding-top: 2rem;}
    .Home-section-second img {height: 350px;}
    .Home .Home-section-first > div,
    .Home .Home-section-first h1  {text-align: center;}
    .Home .Home-section-first h1  {font-size: 2rem !important;}
    .telephone-no + h6:before, .telephone-no + h6:after {
        transform: rotate(90deg);
        top: 0;
        left: -40px;
    }
    .telephone-no ~ h6:after {
        top: 0;
        bottom: 0;
        left: auto;
        right: -8px;
    }
    .customerService-icons {
        padding: 9px;
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    .customerService-icons + h5 {display: none;}
    .telephone-no ~ h6 {margin-right: 20px !important; margin-left: 10px !important;}
    .contact-details .telephone-no button {height: 35px; width: 35px; padding: 0}
    #APP-download .content-box h1 {font-size: 24px !important;}
    #APP-download .content-box h3 {font-size: 18px !important;} 
    .footer-social {margin-top: 30px !important;}   

}

@media (max-width: 576px) {

    h1, h2, h3 {font-size: 24px !important;}
    p {font-size: 14px;}
    .breadcrumb h1 {text-align: center !important;}
    .breadcrumb {justify-content: center;}
    .our-service-section {text-align: center;}
    .our-service-section h4 {font-size: 16px !important;}    
    .our-service-section h1 {font-size: 24px;}   
    .our-service-section h4 br {display: none;}    
    .portfolio-container {column-gap: 7px !important;}
    .ourService-title img {width: 30px; height: 30px;}
    .add-to-cart .image img {height: 70px;width: 80px;}
    .contact-us-form {padding: 0px !important;}
    .Home .Home-section-first h1 {font-size: 1.5rem !important;}
    .Home-section-second img {height: 250px;}
    .Home .Home-section-first p {margin-bottom: 5px;}
    section.facts-figures {margin-bottom: 20px !important;}
    .facts-figures .img-icon {height: 45px; width: 50px;}
    .facts-figures .img-icon.experience img, .facts-figures .img-icon img {height: 40px; width: 40px;}
    .facts-figures .img-icon.project img {height: 27px;margin-top: 7px;}
    .facts-figures h5 {font-size: 20px !important;}
    .facts-figures h5::after {width: 25px; margin: 5px auto;}
    .facts-figures p {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0;
        margin-bottom: 0;
    }
    .section-contact-us h4, .section-contact-us h3 {font-size: 14px !important;}
    section.breadcrumb {height: 150px;}
    img.service-img {
        top: 20px;
        width: 20% !important;
        left: 20px;
    }
    #v-pills-tab button {
        display: flex;
        align-items: center;
        flex: 1;
        font-size: 12px;
        line-height: 12px;
        flex-basis: 40%;
    }
    .section-our-services ul li a {font-size: 13px;}
    i.fa-solid.fa-angles-right {font-size: 10px;}
    .contact-us h5,
    .contact-us label {font-size: 15px;}
    .footer-social .row div {text-align: center;}
    .contact-us a i {
        padding: 20px 10px;
        height: 40px;
        width: 40px;
        font-size: 20px;
    }
    .navbar-brand img {width: 65px !important;}
    section.About-section {padding-bottom: 0 !important;}
    .About-section .about-image img {height: 320px;}
    .About-section p {
        font-size: 14px;
        line-height: 18px;
        text-align: justify;
    }
    .AboutUs-section img {float: unset; height: auto;}
    .About-section a {margin-top: 15px; display: inline-block;}
    .button-submit,
    .contact-us h2,
    .about-us {text-align: center;}
    .contact-us button {width: 220px;}
    a.nav-link.contact {padding: 10px !important; width: 90px;}
    .footer-translate-middle {transform: translate(-35%, -79%) !important;}
    .contact-details h1 {font-size: 20px;}
    .contact-details img {width: 100%;}
    .Home .Home-section-first {padding-top: 2rem;}
    .our-service-section {padding-top: 100px; padding-bottom: 20px;}
    .Home-section-first p {text-align: center;}
    .Home-section-first .get-started {text-align: center;}
    .card-body {height: auto;}
    .phone-icon {
        top: -40px;
        margin: 15px auto;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }
    .phone-icon svg {width: 25px;}
    .section-contact-us h3 + p {font-size: 15px; line-height: 20px; }
    #offcanvasFeatures1 {width: 90%;}
    .bottom-logo {margin-top: 25px;}
    .bottom-logo img {width: 80px;}
    .social-icons {margin-bottom: 15px;}
    .social-icons a {
        width: 30px;
        height: 30px;
        padding: 9px 0;
        font-size: 7px;
    }
    #btn-chat-whatsapp, #btn-chat-whatsapp img {height: 35px !important;}
    #btn-chat-whatsapp {right: 70px;}
    #btn-back-to-top {
        width: 35px;
        height: 35px;
        padding: 0;
    }
    
}


@media (max-width: 480px) {

    #main-banner {min-height: 400px;}
    #main-banner p {font-size: 14px !important; margin-bottom: 20px;}
    #main-banner .bannerBtn a, .logout {padding: 5px 15px; font-size: 14px; }
    .logout .fa {font-size: 13px;}
    #main-banner .bannerBtn a .fa {margin-left: 7px;font-size: 12px;}
    #core-features .offcanvas {width: 90%;}
    #core-features .icon-box img {width: 40px; height: 40px; padding: 7px;}
    #core-features .contentbox a {font-size: 16px; line-height: 1;}
    #core-features .contentbox a span {font-size: 12px;}
    #faqs .accordion-button {font-size: 14px; padding: 10px 20px;}
    .Pricing-Partial h4 {width: 90%; font-size: 15px !important;}
    
}