/*  #3871C1 --- dark blue
    #51ADE5 --- light blue
    #80CC28 --- light green
*/


/* testing area */

.img-bna-div {
    background-size: cover;
    background-position: center;
    background-color: #f4f4f4;
    height: 180px;
    overflow: hidden;
}

.img-bna-div-label {
    margin: 0;
    font-weight: 700;
    color: white;
    font-size: 20px;
    padding: 15px;
}

.section-item-side-com-img-list-item {
    width: 100%;
    /* height: 100%; */
    height: 0%;
    background-size: cover;
    transition-duration: 0.35s;
}

.limited-text {
    overflow: hidden;
    display: block;
    line-height: 1.5em;
    /* Adjust based on font size */
    max-height: 6em;
    /* 4 lines × 1.5em line-height */
    position: relative;
}


/* testing area end */

:root {
    --navbar-height: 85px;
    --title-highlight-color: #51ADE5;
    --dark-blue: #3871C1;
    --light-blue: #51ADE5;
    --light-green: #80CC28;
}

body {
    margin: 0!important;
    font-family: "Sora", sans-serif;
}

html {
    scroll-behavior: auto !important;
}

.row {
    margin: 0;
}

.container-fluid {
    padding: 0;
}

input[type='text'],
input[type='email'],
textarea {
    font-size: 16px!important;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: revert;
    margin-bottom: revert;
    font-weight: revert;
    line-height: revert;
    font-size: revert;
}

b,
strong {
    font-weight: revert;
}

img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.nav-bar {
    /* padding: 10px 30px; */
    height: var(--navbar-height);
    vertical-align: middle;
    background-color: #f4f4f4;
    display: flex;
    align-items: center;
    transition-duration: 0.5s;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 2;
    justify-content: center;
}

#section-mid .section-title #googleadsspan1 {
    color: #3C8BD9!important;
}

#section-mid .section-title #googleadsspan2 {
    color: #34A852!important;
}

#section-mid .section-title #googleadsspan3 {
    color: #FABC04!important;
}


/* navbar toggle  */

#nav-bar-toggle-div {
    display: none;
}

#nav-bar-toggle-div img {
    cursor: pointer;
    width: 22px;
}

.nav-bar-toggle-close-btn-div {
    cursor: pointer;
    float: right;
    display: inline-block;
}

#nav-bar-toggle-close {
    /* width: 19px; */
    cursor: pointer;
    float: right;
    background-size: 15px!important;
}

.nav-bar-toggle-close-btn-div #nav-bar-toggle-close:hover {
    background-color: #d9d9d9!important;
}

.nav-bar-toggled .nav-bar {
    position: relative;
}

div#indipa {
    opacity: 0.3;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    background: black;
    z-index: 3;
}

.nav-bar-toggled {
    width: 100%;
    display: block;
    height: 100%;
    position: fixed;
    transition-duration: 0.5s;
    top: 100%;
    background-color: white;
    z-index: 4;
}

.nav-bar-toggled-items {
    padding: 30px 20px!important;
}

.nav-bar-toggled-items h4 {
    font-size: 21px;
    color: #404452;
    width: fit-content;
    margin-top: 12px;
    display: inline-block;
}

.nav-bar-toggled-items p {
    margin: 20px 0;
    font-size: 19px;
}

.nav-bar-white {
    background-color: #3973c2 !important;
    position: fixed;
    transition-duration: 0.5s;
    top: 0;
    /* border-bottom: 1px solid #6464644a; */
    width: 100%;
}

.nav-bar-white p.navbar-navigate-link {
    color: white!important;
}

.nav-bar-white #nav-bar-contact-us {
    background: white!important;
    color: #51ADE5!important;
}


/* .nav-bar-white #light-logo {
    display: none;
} */


/* .nav-bar-white #dark-logo {
    display: block!important;
} */

#light-logo {
    display: none;
}


/* .nav-bar-white .nav-bar-left p {
    color: white!important;
} */

.action-btn a {
    text-decoration: none;
    color: white!important;
}

#nav-bar-contact-us:hover {
    text-decoration: none;
}

.nav-bar-white .nav-bar-left p:hover {
    text-decoration: underline;
}

.nav-bar img {
    width: 190px;
}

.nav-bar img:hover {
    cursor: pointer;
}

.nav-bar-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    max-width: 1200px;
}

.nav-bar-left {
    display: inline-block;
    float: right;
}

.nav-bar-left p {
    color: #404452;
    display: inline;
    font-size: 13px;
    font-weight: 500;
    margin: 0px 15px;
    cursor: pointer;
}

.nav-bar-left p#nav-bar-contact-us {
    background: #51ADE5;
    padding: 10px 18px;
    color: white;
    border-radius: 10px;
}

.nav-bar-left p:hover {
    font-weight: 600;
}


/* header section  */

.header-section {
    padding-top: var(--navbar-height)!important;
    height: fit-content;
}

#header-section-item-desc {
    margin-bottom: 50px;
}

#header-section-item-ext {
    background-color: #f4f4f4;
}


/* home4.css code */


/* header section */

#header-section-item {
    padding-bottom: 0 !important;
    padding-top: 0!important;
}

.full-width-container {
    padding: 30px 0!important;
}

#desc-with-side-img-1,
#desc-with-side-img-2,
#why-choose-us-section-item,
#services-section-item,
#full-width-container-1,
#full-width-container-2,
#projects-section-item,
#reviews-section-item,
#faq-section-item-ext,
#contact-us-section-item,
#header-section-item {
    margin: 0!important;
    padding: 45px 0;
}


/* main section  */

.main-section {
    padding: 0 30px;
    /* margin: 25px 0; */
    text-align: left;
    width: 100%;
    display: inline-block;
    max-width: 1200px;
}

.main-section .row>* {
    padding: revert;
}


/* main section's title and desc */

.main-section .main-section-title {
    width: 100%;
    font-weight: 800;
    font-size: 30px;
    margin: 0;
}

.main-section-desc {
    font-size: 16px;
}

.section-title span,
.main-section-title span {
    color: var(--title-highlight-color);
}


/* main section's image */

.main-section .main-section-img-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.main-section .main-section-img-img {
    float: right;
    width: 100%;
    max-width: 500px;
}

.main-section #main-img-mobile {
    width: 100%;
}

.img-bna-1 {
    padding-bottom: 3px!important;
}

.img-bna-2 {
    padding-top: 3px!important;
}


/* normal section */

.section-item-main {
    text-align: center;
}

.section-item {
    padding: 30px;
    text-align: left;
    max-width: 1200px;
    display: inline-block;
    width: 100%;
}

.section-heading {
    text-transform: uppercase;
    color: #646464;
    margin: 0;
    /* font-size: 14px!important; */
    font-size: 14px;
}

.section-title-inline {
    display: inline-block;
    width: 80%!important;
}

.section-title {
    color: #404452;
    font-size: 21px;
    width: 100%;
    margin-top: 15px;
}

.section-title-center {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.section-title .underlined {
    text-decoration: underline;
}

.section-desc {
    color: #404452;
    font-size: 16px;
    line-height: 27px;
}


/* section's button styles */

.main-section #main-section-btn,
.section-mid-item-btn {
    margin-top: 30px;
    background-color: var(--light-blue);
    padding: 10px 35px;
    border: none;
    font-family: "Sora", sans-serif;
    font-size: revert;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.7px;
    color: white;
    border-radius: 10px;
    transition-duration: 0.4s;
    margin-bottom: 0;
}

.section-mid-item-btn-white {
    background-color: white;
    color: var(--light-blue);
}

.section-mid-item-btn-white:hover {
    background-color: white!important;
    color: var(--light-blue)!important;
}

.main-section button:hover {
    background-color: white;
    font-weight: 500;
    color: #404452;
    cursor: pointer;
}

#main-section-btn:hover {
    opacity: 0.8;
}


/* normal sections' comparison image */

.section-tab-side-comp-img {
    width: 85%;
    float: right;
    max-width: 450px;
}

.section-item-side-comp-img-item img {
    width: 100%;
}


/* normal section's list */

.section-list {
    margin-top: 40px;
    padding-left: 30px;
    margin-bottom: 40px;
}

.section-list p {
    margin: 13px 0;
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
}

.section-list-item-icon {
    display: inline-block;
    margin-right: 10px;
    float: left;
}

.section-list-item-icon img {
    width: 20px;
}

.section-list-item p {
    display: inline-block;
    width: 85%;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}


/* why choose us section */

.section-item-main-center {
    text-align: center;
}

.why-choose-us-section-table {
    margin: 0 -5px;
    margin-top: 35px;
}

.why-choose-us-section-table>* {
    text-align: left;
}

.why-choose-us-section-table .num-item-cell-div .row {
    height: 100%;
}

#why-choose-us-section-item {
    background-color: #F4F4F4;
    padding: 30px 0;
}

#why-choose-us-section-item .num-item-cell-div {
    border: 1px solid #d4d4d4;
    background-color: white;
}


/* numbered item cell */

.our-services-table {
    margin: 0 -5px;
}

.num-item-cell {
    padding: 5px;
    height: 100%;
}

#why-choose-us-section-item .num-item-cell {
    padding: 5px;
}

.num-item-cell .num-item-cell-div {
    border: 1px solid #40445242;
    border-radius: 5px;
    padding: 20px;
    height: 100%;
}

.why-choose-us-section-table .num-item-cell .num-item-cell-div {
    padding: 1.8vw;
}

.num-item-cell .num-item-cell-title {
    color: #404452;
    font-size: 18px;
    font-weight: 700;
}

.num-item-cell-desc-container {
    padding: 0 15px;
}

.num-item-cell .num-item-cell-desc {
    width: 100%;
    font-size: 15.5px;
}

.num-item-cell-top-sec {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.why-choose-us-section-table .num-item-cell-top-sec {
    display: none;
}

.num-item-cell-top-sec .num-item-cell-top-sec-number {
    color: #6464644a;
    font-weight: 800;
    display: inline-block;
    font-size: 40px;
    margin: 0;
}


/* home6.css code start */

.num-item-cell-img {
    width: 100%;
    height: 100%;
    background: #D9D9D9;
    display: inline-block;
    text-align: center;
    border-radius: 8px;
}

.num-item-cell-desc-cont {
    display: inline-block;
    padding: 0 30px;
}

.num-item-cell .num-item-cell-title {
    margin-top: 0;
}

.num-item-cell-img img {
    width: 40%;
}

.contact-section-form {
    padding: 0 15px!important;
}


/* home6.css code end */

.osc-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.osc-btn-div {
    height: 60px;
}

.osc-btn-container {
    display: inline-block;
    float: right;
    width: 50px;
    height: 50px;
    border: none;
    background-color: #40445211!important;
    border-radius: 100px;
    margin: 0;
    background-image: url('../contents/images/linkarrow.svg');
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    transition-duration: 0.3s;
}

.osc-btn-container:hover {
    background-color: var(--light-blue)!important;
    background-image: url('../contents/images/linkarrowwhite.svg');
    color: var(--light-blue);
}

.projects-item-img .osc-btn-container {
    background-color: white!important;
}

.projects-item-img .osc-btn-container:hover {
    background-color: white!important;
    background-image: url('../contents/images/linkarrow.svg')!important;
}

.num-item-cell-div .projects-item-div {
    padding: 0 !important;
}


/* full width container */

.full-width-container {
    width: 100%;
    /* background-image: url('../contents/images/fullwidthbg.svg'); */
    background-image: linear-gradient(to right, var(--dark-blue), var(--light-blue));
    background-size: contain;
    text-align: center;
    padding: 50px 0;
}

.full-width-container-title {
    color: white;
    margin: 0;
    font-size: 22px;
}

.full-width-container-btn {
    text-align: right;
    height: 100%;
}

.full-width-container-text {
    height: 100%;
    flex-direction: column;
    align-items: normal!important;
}

.full-width-container-btn button {
    margin: 0;
}


/* projects we've done */

.carousel-item .projects-item-div {
    padding: 0;
}


/* carousel */

.car-control-btns {
    display: inline-block;
    float: right;
}

.car-control-btn {
    background-color: #f4f4f4;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 100%;
    background-size: 15px;
    background-position: center;
    background-repeat: no-repeat;
    transition-duration: 0.3s;
}

.car-control-btn-next {
    background-image: url(../contents/images/rightarrowblack.svg);
}

.car-control-btn-prev {
    background-image: url(../contents/images/leftarrowblack.svg);
}

.car-control-btn:hover {
    background-color: var(--light-blue)!important;
}

.car-control-btn-next:hover {
    background-image: url(../contents/images/rightarrowwhite.svg)!important;
}

.car-control-btn-prev:hover {
    background-image: url(../contents/images/leftarrowwhite.svg)!important;
}


/* our projects */

.projects-item-img {
    width: 100%;
    height: 250px;
    background-color: #f4f4f4;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.projects-item-desc {
    padding: 20px;
}

.projects-item-desc-text {
    display: inline-block;
    width: max-content;
}

.projects-item-desc-text h4 {
    font-size: 17px;
    margin: 0;
    font-weight: 500;
}

.projects-item-desc-text h4 a {
    color: #1F1D1D;
    text-decoration: none;
}

.main-section .projects-item-desc-text p {
    font-size: 14px;
    margin: 0;
    margin-top: 4px;
}

#projects-section-item .projects-item-desc-btn {
    margin: 10px;
}

.projects-item-desc-btn {
    width: 45px;
    height: 45px;
}


/* reviews */

.review-profile-pic {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #40445211;
    border-radius: 100%;
    background-size: cover;
    background-position: center;
}

.review-profile-name {
    display: inline-block;
    color: #000000;
    margin-left: 20px;
}

.review-profile-name h4 {
    font-weight: 500;
    /* font */
    font-size: 17px;
    color: #404452;
    margin: 0;
}

.num-item-cell-div .reviews-desc {
    font-size: 16px;
    line-height: 25px;
}

.review-profile-name p {
    font-size: 16px!important;
    margin: 0;
    color: #40445298;
}

.display-flex {
    display: flex;
}


/* FAQ Section Container */
#faq-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 15px 25px 15px;
}

/* Each FAQ question box */
.faq-item {
  width: 100%;
  max-width: 1150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F4F4F4;
  border-radius: 5px;
  padding: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, border 0.3s ease;
  box-sizing: border-box;
  border: none; /* no border by default */
}

/* Question text */
.faq-item-quest {
  margin: 0;
  color: #404452;
  font-weight: normal;
  font-size: 16px;
  flex: 1;
}

/* Arrow image with transition */
.faq-item-arrow img {
  width: 20px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Expanded question box styles */
.faq-item-expanded {
  background-color: #3871C1;
  color: white;

  /* Add border except bottom */
  border: 1px solid #CFCFCF;
  border-bottom: none;

  /* Remove bottom border-radius to connect to answer */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Change question text color when expanded */
.faq-item-expanded .faq-item-quest {
  color: white;
}

/* Rotate arrow and make it white when expanded */
.faq-item-expanded .faq-item-arrow img {
  filter: brightness(0) invert(1);
  transform: rotate(180deg);
}

/* Answer box */
.faq-answer {
  width: 100%;
  max-width: 1150px;
  padding: 10px 15px;
  margin: 0 auto;
  margin-top: -1px; /* pull up to connect with question box border */
  background-color: #E0E0E0;
  border-radius: 0 0 5px 5px;
  border: 1px solid #CFCFCF;
  border-top: none; /* no top border to merge with question box */
  box-sizing: border-box;
  display: none;
  transition: margin 0.3s ease, background-color 0.3s ease;
}

/* Remove margin from paragraphs inside answer to avoid extra space */
.faq-answer p:first-child {
  margin-top: 0;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}






/* contact us section */

.contact-section {
    display: flex;
}

.contact-section-item {
    display: inline-block;
    width: 50%;
}

.contact-section-item .section-desc {
    margin-top: 0;
}

.section-heading-small {
    font-size: 17px;
}


/* contact forum */

.contact-section-form-div {
    border: 1px solid #64646456;
    padding: 25px 20px;
    border-radius: 15px;
    max-width: 500px;
    float: right;
    margin-top: 20px;
}

.contact-text-input {
    background-color: #F7F8FD;
    border: none;
    width: 100%;
    padding: 15px 20px;
    font-family: "Sora", sans-serif;
    font-size: 15px;
    border: 1px solid #64646456;
    border-radius: 10px;
    display: block;
    margin: auto;
    margin-bottom: 15px;
}

.contact-section-form h3 {
    /* font-size: 24px; */
}

.contact-section-form .section-heading {
    font-size: 16px;
    text-transform: none!important;
}

.contact-text-form {
    margin-top: 30px;
    width: 100%;
    text-align: center;
}

.contact-text-field {
    resize: none;
    width: 100%;
}

#form-error {
    font-weight: 600;
    display: none;
    color: #FF1A1A;
}

.contact-text-submit {
    background-color: var(--light-blue);
    color: white;
    font-family: "Sora", sans-serif;
    transition-duration: 0.3s;
    padding: 15px 25px;
    border: none;
    border-radius: 10px;
    width: 100%;
    margin-top: 20px;
}

#contact-section-success {
    color: #404452;
    font-weight: 500;
    font-size: 19px;
    display: none;
}

#contact-section-success span {
    color: #FF1A1A;
    font-weight: 600;
}

.contact-text-submit:hover {
    cursor: pointer;
    font-weight: 500;
    background-color: var(--dark-blue);
}


/* contact method items including the main and sub-units */


/* main contact method */


/* .contact-method-main-icon {
    display: inline-block;
    width: 90px;
    height: 90px;
    background-color: #F7F8FD;
    border-radius: 100%;
    vertical-align: top;
} */

.contact-method-main {
    width: fit-content;
    padding: 10px 20px;
    background-color: #F7F8FD;
    border-radius: 10px;
    margin: 20px 0!important;
}

.contact-method-main-icon-img {
    width: 25px;
}

.contact-method-main h3 {
    display: inline-block;
    /* font-size: 1.3vw; */
    margin-left: 25px;
    margin-right: 25px;
}

.contact-method-main p a {
    margin: 0;
}

.contact-method-main-desc.contact-method-desc {
    height: 60px;
}

#contact-us-section-item .section-item-main {
    height: 100%;
}

.contact-method-main-icon img {
    width: 30px!important;
    height: 30px!important;
}

.contact-method-main-desc {
    color: #34A852;
}


/* normal contact method */

.contact-method-item {
    margin-top: 30px;
}

.contact-method-icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    background-color: #F7F8FD;
    border-radius: 100%;
    vertical-align: top;
}

.contact-method-icon:hover {
    background-color: #6464642a;
}

.contact-method-desc {
    display: inline-block;
    padding-left: 25px;
}

.contact-method-desc h4 {
    margin-top: 0;
    margin-bottom: 8px;
}

.contact-method-desc p {
    margin-top: 0;
}

.contact-method-desc p a {
    color: #404452;
    /* text-decoration: none; */
    cursor: pointer;
}

.contact-method-icon img {
    width: 20px;
}


/* footer design */

#footer-section-item {
    padding-top: 50px;
}

.hrr-red {
    height: 7px!important;
    background-color: var(--light-blue)!important;
    opacity: 100%!important;
}

.footer-main {
    background-color: #1F1D1D;
    padding: 20px 30px;
    height: fit-content;
}

.footer-item-main {
    max-width: 1200px;
    display: inline-block;
    text-align: left;
    width: 100%;
}


/* footer's first row */

.footer-logo {
    width: 170px;
}

.ventoras-tagline {
    margin-top: 20px;
    line-height: 25px;
    opacity: 0.8;
}

.footer-social-media {
    float: right;
    height: 100%;
    display: flex;
    align-items: center;
}

.footer-social-media-title {
    font-size: 15px;
    color: white;
    text-align: right;
    font-weight: 600;
    margin-bottom: 0!important;
    margin-top: 0!important;
}

.social-media-icons {
    text-align: right;
}

.footer-1-row-col-top {
    /* margin-bottom: 20px; */
}

.footer-social-media img {
    display: inline-block;
    opacity: 0.8;
    width: 19px;
    margin: 0 4px
}


/* same alike texts in footer */

.ventoras-tagline,
.footer-copyright {
    font-size: 15px;
    color: white;
}

.footer-social-media p {
    color: white!important;
    /* opacity: 0.8; */
}

.footer-social-media p a {
    /* color: #FF1A1A!important; */
    color: white!important;
    text-decoration: none;
    cursor: pointer;
}


/* footer's 2nd row */

.footer-2-row {
    margin-top: 60px!important;
}

.made-in-sl img {
    display: inline-block;
    width: 40px;
    height: fit-content;
}


/* 
.made-in-sl p {
    display: inline-block;
    font-weight: 500;
   
} */

.footer-copyright {
    text-align: right;
}


/* Miscellaneous Elements used throughout the website */


/* vertical and horizontal centering element */

.section-mid-item-contact {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* hr  */

.hrr {
    width: 100%;
    height: 1px;
    background-color: #646464;
    opacity: 34%;
}


/* popup */


/* Fullscreen dark overlay */

#popupOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent dark background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}


/* Popup box */

#popupMessage {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 50%;
    max-width: 1000px;
}


/* Success & Danger popup color styles */

.success {
    border-left: 6px solid green;
}

.danger {
    border-left: 6px solid red;
}


/* Button spacing */

#popupMessage button {
    margin-top: 10px;
}