/**
 * @file
 * Styles for Bootstrap Barrio page.
 */

/* Hack for .placeholder issue https://www.drupal.org/project/drupal/issues/3233533 */
:root{
  --primary-color:#00454D;
  --mdc-color-neutral-white:#fff;
  --secondary-color:#e0c345 ;
  /* #9d882d */
}

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

        ul.nav.navbar-nav li {
          margin-right: 21px !important;
        }

html {
  scroll-behavior: smooth;
}
body{
  overflow-x: hidden !important;
}
em.placeholder {
  vertical-align: unset!important;
  cursor: unset!important;
  background-color: unset!important;
  opacity: unset!important;
}
section.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.page-node-21 #block-bootstrap-barrio-page-title{display: none !important}

section.my-features.region.region-featured-top {
  overflow: hidden;
  width: 100%;
}
section.my-features.region.region-featured-top img{
  width:100%;
  height: auto;
}
/* .path-contact section.my-features.region.region-featured-top img {
  width: 100%;
  height: auto;
  max-height: 300px;
} */
.tes_im {
  width: 200px;
  margin: auto;
}
.mantra .hd-mnt {
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 10px;
  font-size: larger;
}
.container.mantra {
  padding: 25px 0;
}
.wht-w{
  background: url("../../images/heroo2.jpg") no-repeat scroll -86px 0px /cover;
  min-height:300px;
}
.wht-w-1{
  background: url("../../images/man_on_computer.jpg") no-repeat scroll center /cover;
    min-height:300px;
}
.b-tile {
  font-size: 37px;
  text-transform: capitalize;
  font-weight: 600;
  margin-bottom: 10px;
}
.wht-w-2{
  padding: 60px 100px 60px 60px;
}
.ryw {
  padding: 60px 77px;
}
.wht_, div#block-bootstrap-barrio-views-block-testimonials-block-1 {
  background-color: #b3b3b320;
}

.stp_w {
  /* border: 1px solid; */
  margin-bottom: 26px;
  padding: 20px 28px;
  border-radius: 5px;
  position: relative;
  margin-bottom: 60px;
  background: #F6F6F6;
  min-height: 200px;
}
.stp_t {
  text-transform: capitalize;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.1;
  margin: 24px 0 10px 0;
  color: var(--primary-color);
}
.stp_n {
  font-weight: 800;
  text-transform: capitalize;
  position: absolute;
  top: -25px;
  background: var(--primary-color);
  color: #fff;
  padding: 12px 15px;
  left: 24px;
  font-size: 17px;
  border-radius: 5px;
}

.node--type-blog .field--name-field-image img{
width: 100%;
height:auto;
}
.node--type-blog .field.field--name-field-image.field--type-image.field--label-hidden.field__item {
    display: block;
    width: 100%;
}

.feat_blog_main {
  overflow: hidden;
}

.feat_blog{
  position:relative;
  overflow: hidden;
}

.feat_blog img, .feat_blog_1 img,.feat_blog_v img{
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}
.feat_blog:hover img, .blog_sec_2:hover img, .feat_blog_lower_1:hover img, 
.feat_blog_1:hover img, .srv:hover .srv_i img, .feat_blog_v:hover img{
  transform: scale(1.2);
}
h1.title.aos-init {
    padding: 22px 0 10px 0;
}


.blog_sec_2 img {
  height: 20rem;
  width: 100%;
  object-fit: cover;
    transition: transform 0.5s ease;
}

.blog_sec_2{
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

.blg {
 position: relative;
  padding: 0 !important;
  object-fit: cover;
  overflow: hidden;
}

.blg img{
  width:100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s ease;
}


.row_nxt{
  background-color: var(--primary-color)
}

.feat_title {
  position: absolute;
  bottom: 0;
  
  padding: 40px 100px 40px 70px;
  line-height: 1.3;
}
.inr {
  position: relative;
  z-index: 10;
  font-size: 26px;
  font-weight: 500;
}
.feat_title::before {
  background: linear-gradient(to top, var(--mdc-color-neutral-white) 10%, rgba(0, 0, 0, 0));
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .7;
  transition: all .4s ease-in-out;
}


.feat_title_only {
  color: #fff;
  padding: 44px;
}
._ony_t{font-size: 25px;
  line-height: 1.2;}

.feat_title_ {
  padding-top: 180px;
  padding-right: 40px;
}
.ft_inr {
  font-weight: 500;
  line-height: 1.2;
  font-size: 24px;
}

.blog_bottom_front .row div{
  padding:0 !important;
  --bs-gutter-x:0 !important;
}
.blog_bottom_front .row{
  --bs-gutter-x:0 !important;
}
.feat_title_b_1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}
.blg_tb {
  padding-left: 69px;
}
.view-id-blog a{
text-decoration: none;}

._b_a {
  background: var(--primary-color);
  color: #fff;
  padding: 27px 53px;
}
._b_a a {
  color:  #fff !important;
  font-weight: 700;
  text-decoration: none;
}
._b_1 {
  padding: 49px;
}

.site-footer__bottom svg {
  /* width: 5%; */
  fill: rgba(255, 255, 255, 0.65);
  margin-right: 20px;
  width: 18px;
  height: 18px;
}

.ftr_logo img{
  height:auto;
  filter: grayscale(2);
}
.site-footer .content ul li a {
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease-in-out;
}
.site-footer .content ul li a:hover{
  color: var(--secondary-color);
}

.site-footer__bottom h5 {
  margin-bottom: 26px;
}

.border-top.border-body-secondary.pt-4 {
  border-color: #ffffff20 !important;
}

.soc svg {
  width: 23px;
  height: 23px;
}

.soc p {
 margin-bottom:0 !important
}
.soc li {
  margin-bottom: 31px !important;
}
.soc li  a{
  font-size: 16px !important;
}

.ms_block{
  background-color: var(--primary-color);
  color:#fff
}

.ms_block .row .col>div {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  color: #000;
}
.ms_block .hd-mnt {
  text-transform: capitalize;
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 10px;
}
.mission {
  font-size: 26px;
  font-weight: 400;
  text-align: center;
  margin: 48px 0;
  text-transform: uppercase;
  color: #c8ae42;
}
.ms_block h2{
  text-align: center;
  color:rgba(255, 255, 255, 0.55) ;
}

.ms_block svg {
  width: 50px;
  height: 50px;
  fill: #e7c94b;
  border: 1px solid #00000020;
  padding: 8px;
  border-radius: 50%;
  margin-bottom: 15px;
}
.ms_block .ms-mnt{
  line-height: 1.8;
    font-size: 15px;
}

.vs {
  text-transform: uppercase;
  font-size: 40px;
  font-weight: 800;
  padding: 10px 40px;
  display: flex;
  align-items: center;
  position:relative;
  color:#fff;
}
.vs p{
  margin-bottom: 0;
}
.vs svg {
  width: 28px;
  height: 28px;
  margin-right: 24px;
  fill: #ffffff60;
}
.vs_1{
  background-color: #ae9424;
  border-radius: 5px 0 0 5px;
}
.vs_1::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0px;
  border-left: 40px solid transparent;
  border-bottom: 40px solid #817024;
  border-top: 40px solid #817024;
  z-index: 10;
}
.vs_2{
  background-color: #817024;
}
.vs_w h2 {
  color: var(--primary-color);
  font-weight: 800;
  font-size: 39px;
  opacity: 0.8;
}
.vs_2::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0px;
  border-left: 40px solid transparent;
  border-bottom: 40px solid #62551d;
  border-top: 40px solid #62551d;
  z-index: 10;
}
.vs_3{
  background-color: #62551d;
  border-radius: 0 5px 5px 0;
}

.git {
  background-color: #F6F6F6;
  padding: 50px 0;
}
.htr {
  font-weight: 700;
  font-size: 45px;
  padding: 40px 0 20px 0;
}
.inr_git {
 color:#fff;
  max-width: 1200px;
  margin: 42px auto;
  padding: 40px;
  text-align: center;
  background-color: var(--primary-color);
    background-image: url("../../images/spiral.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75% auto;
    --overlay-opacity: 0.65;
    border-radius: 16px;
}

.inr_git a.btn {
  background-color: var(--secondary-color);
  color: #fff !important;
  text-decoration: none;
  padding: 11px 75px;
  border-radius: 79px;
  border:1px solid #817024;
  text-transform: capitalize;
}
div#sidebar_second {
    padding-top: 40px;
}

.page-node-9 section.feature_btm_first.region.region-featured-bottom-first,
.page-node-21 section.feature_btm_first.region.region-featured-bottom-first {
  margin-bottom: -28px;
}

.srv_i img {
  width: 100%;
  /* max-height: 400px;
  height: 100%; */
}

.srv-wrap .views-row:nth-child(odd) .row{
  flex-direction: row-reverse;
}

.srv_cont {
  padding: 80px;
}
.views-row:nth-child(odd) .srv_c_wrap{background-color: #F6F6F6;}

.srv_t {
  font-size: 25px;
  font-weight: 600;
  text-transform: uppercase;
}
.srv_i{
  position: relative;
  overflow: hidden;
}
.srv_i img {
    transition: transform 0.5s ease;
}
.side_contact svg{
  width: 25px;
  height: 25px;
  fill: var(--primary-color);
  margin-right:10px
}

ol.breadcrumb {
  padding-top: 20px;
}
.path-contact .btn-primary { color: #fff !important}

.timeline-9>.timeline-9-item .timeline-9-date>div {
  background-color: #00454D;
  box-shadow: 0 0 0 4px rgba(0, 69, 77, 0.2);
  border-radius: 50px;
  color: #ffffff;
  padding: 10px 20px;
}
.timeline-9>.timeline-9-item .timeline-9-content>h2 {
  color: #00454D;
  margin: 0 0 10px 0;
  font-size: 1.5em;
  font-weight: bold;
}
.timeline-9>.timeline-9-item>div:first-child::after {

  background-color: #00454D;

  box-shadow: 0 0 0 4px rgba(0, 69, 77, 0.2);
}
.timeleine-content-wrapper li {
  display: block;
}

.page-node-3 h1.title {
  text-align: center;
  margin-bottom: 30px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--primary-color);
  font-size: 43px;
  border-bottom: 1px solid #00000010;
  padding-bottom: 20px;
}

.testi img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
}
.testi {
  text-align: center;
}

.ts_b {
  max-width: 700px;
  margin: auto;
}

div#block-bootstrap-barrio-views-block-testimonials-block-1{
  padding:40px 0 ;
}
.tst_t.mb-4 {
  font-weight: 500;
  font-size: 25px;
  text-transform: capitalize;
}

.feat_blog_v img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.feat_title_v {
  font-weight: 700;
  font-size: 17px;
}

.list-group-item {
  border-radius: 5px;
  position: relative;
  border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}

.page-node-20 #page-wrapper {
  background-color: #F6F6F6 !important;
}

.rowsd a{
  text-decoration: none !important;;
}

/* .row.row-cols-1.row-cols-md-2.ns_low.feat_blog_lower_1 .blg {
  height: 254px;
} */

.ac_btn {
  background-color: #00454d1c ;
  padding: 18px;
  color: var(--primary-color) !important;
  text-decoration: none;
  border-radius: 3px;
  text-transform: uppercase;
  border: none;
  text-size-adjust: auto;
  font-size: 14px;
  font-weight: 800;
  transition: all ease-in-out .5s;
}
.ac_btn:hover {
  color: var(--secondary-color) !important;
  background-color: var(--primary-color);
  
}

.counter {
  font-size: 37px;
  font-weight: 800;
}
.count_text {
  text-transform: uppercase;
  font-size: 14px;
}
.countr-wig svg {
  width: 87px;
  height: 87px;
  background: #00454d1c;
  padding: 20px;
  fill: #00454d;
  border-radius: 3px;
  margin-bottom: 20px;
  transition:all ease-in-out .5s
}


.countr-wig .col:hover svg{
  background: var(--primary-color);
  fill: #e0c345;
}
.wcu_l {
  padding: 40px 0;
  line-height: 1.5;
}

.wcu_m {
  font-size: 45px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 20px;
  max-width: 600px;
}

.wc_fn {
  padding: 20px 30px;
  background: #f5f5f5;
  font-size: 18px;
  position: relative;
  border-left: 4px solid var(--secondary-color);
  line-height: 1.8;
  font-weight: 400;
}

.wcu_ {
  color: var(--primary-color);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 21px;
  position: relative;
  padding-right: 60px;
}

.pxl-item--subdivider {
  position: absolute;
  top: 50%;
  right: 0;
  width: 40px;
  height: 2px;
  background-color: var(--primary-color);
}

.px-divider-bn {
  width: 70%;
  height: 10px;
  background-color: var(--secondary-color);
  margin-top: 30px;
}



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

.wht-w-2,.ryw {
      padding: 60px 20px 10px 20px;
    }
    
.row.row-cols-1.row-cols-md-2.ns_low {
  flex-direction: column-reverse;
}

.htr {
  font-weight: 700;
  font-size: 26px;
  padding: 19px 0 12px 0;
}

.inr_git {

  margin: 42px 20px;

}
.srv_cont {
  padding: 20px;
}
.srv_i img {
  width: 100%;
  height: auto;
}


.srv-wrap .views-row:nth-child(odd) .row {
  flex-direction: column-reverse;
}

.srv-wrap .views-row:nth-child(even) .row {
  flex-direction: column-reverse;
}
a.navbar-brand {
    width: 36%;
}

}