/* =========================================================
   BASE
   ========================================================= */
body{
  font-family:"Open Sans", sans-serif;
  background-color:#fffcf4;
}

.layout_padding{ padding:75px 0; }
.layout_padding-top{ padding-top:75px; }
.layout_padding-bottom{ padding-bottom:75px; }

a, a:hover, a:focus{ text-decoration:none; }
.btn, .btn:focus{ outline:none !important; box-shadow:none; }

/* =========================================================
   WHATSAPP FLOAT
   ========================================================= */
.whatsapp-float{
  position:fixed;
  bottom:25px;
  right:25px;
  z-index:9999;
  background-color:#25d366;
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 15px rgba(0,0,0,0.3);
  transition:transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float::before{
  content:"";
  position:absolute;
  width:70px;
  height:70px;
  border-radius:50%;
  background:rgba(37,211,102,0.35);
  animation:whatsapp-pulse 1.6s infinite;
  z-index:-1;
}

@keyframes whatsapp-pulse{
  0%{ transform:scale(.85); opacity:.85; }
  70%{ transform:scale(1.25); opacity:0; }
  100%{ transform:scale(1.25); opacity:0; }
}

.whatsapp-float:hover{
  transform:scale(1.08);
  box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.whatsapp-icon{ width:34px; height:34px; }

.whatsapp-tooltip{
  position:absolute;
  right:75px;
  bottom:50%;
  transform:translateY(50%);
  background:#111;
  color:#fff;
  font-size:13px;
  padding:8px 10px;
  border-radius:10px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:all .2s ease;
}

.whatsapp-tooltip::after{
  content:"";
  position:absolute;
  right:-6px;
  top:50%;
  transform:translateY(-50%);
  border-width:6px;
  border-style:solid;
  border-color:transparent transparent transparent #111;
}

.whatsapp-float:hover .whatsapp-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(0,50%);
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.header_section{
  font-family:"Roboto", sans-serif;
  background-color:#fcfcfc;
  color:#fff;
  min-height:90px;
  padding:1% 0;
}

.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link{
  color:#1f233e;
  padding:0 12px;
}

.nav-link:hover{ color:#fefefe; }

.logo_box{ width:120px; }
.logo_box img{ width:100%; }

.call_to_btn{
  display:inline-block;
  color:#fefefe;
  padding:10px 35px;
  background-color:#f6bb08;
  margin-top:5%;
  margin-bottom:20%;
  border-radius:0;
}

/* Hamburguesa (negra) */
.custom_nav-container .navbar-toggler{
  border-color:#1f233e;
  outline:none;
}

.custom_nav-container .navbar-toggler .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(31,35,62,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* (si no usas search btn, puedes borrarlo sin problema) */
.custom_nav-container .nav_search-btn{
  background-image:url(../images/search-icon.png);
  background-size:22px;
  background-repeat:no-repeat;
  background-position-y:7px;
  width:35px;
  height:35px;
  padding:0;
  border:none;
}

/* =========================================================
   SLIDER
   ========================================================= */
.slider_section{ height:calc(100vh - 90px); }

.slider_section .carousel-indicators{
  top:50%;
  left:-75px;
  transform:translateY(-50%);
  display:block;
  bottom:unset;
  right:unset;
}

.slider_section .carousel-indicators li{
  width:16px;
  height:16px;
  opacity:1;
  margin:0 auto;
}

.slider_section .carousel-indicators .active{
  width:24px;
  height:24px;
  background-color:#2561db;
}

.carousel-control-prev,
.carousel-control-next{ display:none; }

/* Carrusel vertical */
.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right{
  transform:translate3d(0,0,0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right{
  transform:translate3d(0,100%,0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left{
  transform:translate3d(0,-100%,0);
}

.slider_section .slider_box{
  display:flex;
  position:relative;
  height:calc(100vh - 90px);
  background-size:cover;
  background-repeat:no-repeat;
}

/* Slides backgrounds */
.carousel-item.slide-1 .slider_box{ background-image:url("../images/banner.jpg"); }
.carousel-item.slide-2 .slider_box{ background-image:url("../images/power_bi.png"); }
.carousel-item.slide-3 .slider_box{ background-image:url("../images/big_data.png"); }

/* Overlay por slide */
.carousel-item.slide-1 .slider_box::before,
.carousel-item.slide-2 .slider_box::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
  z-index:1;
}

.carousel-item.slide-3 .slider_box::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:1;
}

/* Texto sobre overlay */
.carousel-item.slide-1 .slider-detail,
.carousel-item.slide-2 .slider-detail,
.carousel-item.slide-3 .slider-detail{
  position:relative;
  z-index:2;
}

.slider_section .slider_box .fixed_company-detail{
  position:absolute;
  top:50%;
  right:10%;
  transform:translate(-50%,-50%);
}

.slider_section .slider_box .fixed_company-detail p{
  width:12px;
  text-align:center;
  word-break:break-word;
  color:#fff;
  text-transform:uppercase;
}

.slider_section .slider_box .slider-detail{
  color:#fff;
  width:60%;
  margin-top:14%;
  margin-left:20%;
}

.slider_section .slider_box .slider-detail .slider_detail-heading h2{
  font-weight:100;
  text-transform:uppercase;
}

.slider_section .slider_box .slider-detail .slider_detail-heading h1{
  font-weight:700;
  text-transform:uppercase;
}

.slider_section .slider_box .slider-detail .slider_detail-text{
  width:55%;
  color:#f8fafd;
}

.slider_section .slider_box .slider-detail .slider_detail-btn{
  display:flex;
}

.slider_section .slider_box .slider-detail .slider_detail-btn a{
  margin-top:28px;
  padding:16px 20px;
  background-color:#2561db;
  color:#fff;
}

/* =========================================================
   WELCOME
   ========================================================= */
.welcome_section .col-md-6{ padding:0 4%; }

.welcome_detail{ width:75%; }

.welcome_detail h2{
  text-transform:uppercase;
  color:#0c0b09;
  font-weight:bold;
}

.welcome_detail h3{
  text-transform:uppercase;
  color:#254a93;
  position:relative;
}

.welcome_detail h3::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  height:1.5px;
  width:140px;
  background-color:#36bb25;
}

.welcome_detail h2,
.welcome_detail p,
.welcome_detail .welcome_detail-btn{ margin-top:25px; }

.welcome_section .welcome_detail-btn a,
.welcome_section .welcome_detail-btn a:hover{
  text-transform:uppercase;
  color:#0c0b09;
}

.welcome_section .welcome_detail-btn a img{ width:25px; }

/* =========================================================
   PORTAFOLIO (Service section)
   ========================================================= */
.service_section{ padding-top:80px; }
.service_section .container{ padding:0 50px; }

.service_detail h2{
  text-align:center;
  text-transform:uppercase;
  font-weight:bold;
  color:#0c0b09;
  margin-bottom:45px;
}

.service_detail h3{
  text-transform:uppercase;
  color:#254a93;
  position:relative;
}

.service_detail h3::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  height:1.5px;
  width:45px;
  background-color:#36bb25;
}

.service_section .service_img-container{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  padding-top:40px;
}

.service_section .service_img-container .service_img-box{
  height:280px;
  min-width:0;
  background-size:cover;
  background-position:center;
  border-radius:10px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  box-shadow:0 10px 25px rgba(0,0,0,0.10);
  transition:transform .25s ease, box-shadow .25s ease;
}

.service_img-container .service_img-box.i-box-1{ background-image:url(../images/s-1.jpg); }
.service_img-container .service_img-box.i-box-2{ background-image:url(../images/s-2.jpg); }
.service_img-container .service_img-box.i-box-3{ background-image:url(../images/s-3.jpg); }
.service_img-container .service_img-box.i-box-4{ background-image:url(../images/s-4.jpg); }

.service_section .service_img-container .service_img-box::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.15) 55%,
    rgba(0,0,0,0.05) 100%
  );
  opacity:.85;
  transition:opacity .25s ease;
}

.service_section .service_img-container a{
  width:100%;
  text-align:center;
  position:relative;
  z-index:2;
  color:#fff;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.6px;
  font-size:13px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.65);
  background:rgba(0,0,0,0.25);
  transition:all .25s ease;
}

.service_section .service_img-container .service_img-box:hover{
  cursor:pointer;
  transform:translateY(-4px);
  box-shadow:0 16px 35px rgba(0,0,0,0.18);
}

.service_section .service_img-container .service_img-box:hover::after{ opacity:1; }

.service_section .service_img-container .service_img-box:hover a{
  background:rgba(37,97,219,0.65);
  border-color:rgba(255,255,255,0.85);
}

/* =========================================================
   SERVICIOS (Security section / Owl)
   ========================================================= */
.security_section{
  background:#f2f2f2;
  padding:70px 0 100px;
  position:relative;
  overflow:hidden;
}

.security_section h2{
  text-align:center;
  text-transform:uppercase;
  font-weight:bold;
  color:#0c0b09;
  margin-bottom:45px;
}

.security_section h3{
  text-transform:uppercase;
  color:#254a93;
  position:relative;
  text-align:center;
  margin-bottom:30px;
}

.security_section h3::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  width:140px;
  height:1.5px;
  background-color:#36bb25;
}

.security_section .security_container{
  width:92%;
  margin:0 auto;
  position:relative;
}

.security_section .owl-carousel .owl-item{
  padding:0 10px;
  box-sizing:border-box;
}

.security_section .security_img-box{
  width:100%;
  max-width:380px;
  margin:0 auto;
  aspect-ratio:3 / 4.6;
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  border-radius:16px;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.10);
  transition:transform .25s ease, box-shadow .25s ease;
}

.security_section .security_img-box:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(0,0,0,0.18);
}

.security_section .security_img-box::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.35)
  );
}

.security_section .security_img-box a{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  padding:8px 16px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#fff;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.75);
  transition:all .25s ease;
}

.security_section .security_img-box:hover a{
  background:rgba(37,97,219,0.7);
  border-color:rgba(255,255,255,0.95);
}

/* Backgrounds cards */
.security_section .security_img-box.i-box-1{ background-image:url(../images/Diagnostico_estrategia_datos.png); }
.security_section .security_img-box.i-box-2{ background-image:url(../images/Plataforma_datos_big_data.png); }
.security_section .security_img-box.i-box-3{ background-image:url(../images/Bi_Analitycs_para_tomar_desiciones.png); }
.security_section .security_img-box.i-box-4{ background-image:url(../images/Automatizacion_reportes_monitero.png); }

/* Flechas */
.security_section .owl-carousel .owl-nav{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  transform:translateY(-50%);
  z-index:30;
  pointer-events:none;
}

.security_section .owl-carousel .owl-nav .owl-prev,
.security_section .owl-carousel .owl-nav .owl-next{
  pointer-events:auto;
  position:absolute;
  width:52px;
  height:44px;
  background-color:#254a93;
  background-repeat:no-repeat;
  background-size:22px;
  background-position:center;
  border-radius:10px;
  opacity:.95;
  transition:transform .2s ease, opacity .2s ease;
}

.security_section .owl-carousel .owl-nav .owl-prev:hover,
.security_section .owl-carousel .owl-nav .owl-next:hover{
  transform:scale(1.05);
  opacity:1;
}

.security_section .owl-carousel .owl-nav .owl-prev{
  left:10px;
  background-image:url(../images/left-arrow.png);
}

.security_section .owl-carousel .owl-nav .owl-next{
  right:10px;
  background-image:url(../images/right-arrow.png);
}

/* =========================================================
   STORY
   ========================================================= */
.story_section{
  margin-top:70px;
  padding-top:20px;
}

.story_section .container-fluid{
  box-shadow:1px -1px 24px -13px rgba(0,0,0,0.75);
}

.story_section .col-md-6{
  padding:0;
  display:flex;
  align-items:center;
  background-color:#fcfcfc;
}

.story_detail{
  width:85%;
  margin-left:40px;
}

.story_detail h2{
  text-transform:uppercase;
  color:#0c0b09;
  font-weight:bold;
}

.story_detail h3{
  text-transform:uppercase;
  color:#254a93;
  margin:0;
}

.story_detail .story_detail-btn{ margin-top:25px; }

.story_section .story_detail-btn a,
.story_section .story_detail-btn a:hover{
  text-transform:uppercase;
  color:#0c0b09;
}

.story_section .story_detail-btn a img{ width:25px; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact_form-container{
  background-image:url(../images/guards.jpg);
}

.contact_form-container form{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.contact_form-container .contact_box{
  background-color:#fff;
  padding:35px 40px;
  width:50%;
  height:60%;
  margin:100px 50px;
}

.contact_form-container form input,
.contact_form-container form input:focus,
.contact_form-container form input:active{
  border:none;
  background-color:transparent;
  border-bottom:1px solid #00cc99;
  width:85%;
  margin-top:12px;
  outline:none;
}

.contact_form-container form button{
  border:none;
  background-color:#254a93;
  color:#fff;
  padding:8px 20px;
  margin-top:15px;
}

.contact_section .row .col-md-6{ padding:0; }

/* =========================================================
   INFO + FOOTER
   ========================================================= */
.info_section{
  background-color:#000202;
  font-family:"Roboto", sans-serif;
}

.info_section .info_detail{
  display:flex;
  align-items:center;
}

.info_section .info_detail p{ color:#fff; }

.address_link-container{ display:block; }

.address_link-container a{
  display:flex;
  color:#fff;
  margin:15px 0;
  align-items:center;
}

.address_link-container a img{ margin-right:10px; }

.info_section .news_container h3,
.info_section .address_container h3{
  text-transform:uppercase;
  color:#fff;
  font-size:22px;
}

.info_section .news_container form{ margin:28px 0; }

.info_section .news_container form input{
  border:none;
  background-color:#fff;
  width:70%;
  padding:7px 10px;
}

.info_section .news_container form button{
  border:none;
  background-color:#254a93;
  color:#fff;
  font-size:14px;
  padding:8px 15px;
  margin-top:15px;
  text-transform:uppercase;
}

.info_section .news_container .social_container{
  width:50%;
  display:flex;
  justify-content:space-between;
}

.footer_section{
  background-color:#254a93;
  padding:20px 0;
  font-family:"Roboto", sans-serif;
}

.footer_section p{
  color:#fff;
  margin:0;
  text-align:center;
}

.footer_section a{ color:#fff; }

/* =========================================================
   RESPONSIVE (agrupado)
   ========================================================= */
@media (max-width: 992px){
  .service_section .service_img-container{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 768px){
  /* WhatsApp */
  .whatsapp-float{
    width:52px;
    height:52px;
    bottom:20px;
    right:20px;
  }

  .whatsapp-float::before{
    width:62px;
    height:62px;
  }

  .whatsapp-icon{ width:30px; height:30px; }
  .whatsapp-tooltip{ display:none; }

  /* Portafolio */
  .service_section .container{ padding:0 20px; }
  .service_section .service_img-container{
    grid-template-columns:1fr;
    gap:14px;
  }
  .service_section .service_img-container .service_img-box{
    height:220px;
    border-radius:12px;
  }

  /* Servicios (carrusel) */
  .security_section{ padding:50px 0 90px; }
  .security_section .security_container{ width:95%; }
  .security_section .security_img-box{
    max-width:320px;
    aspect-ratio:3 / 4.8;
  }

  .security_section .owl-carousel .owl-nav{
    top:auto;
    bottom:14px;
    transform:none;
  }

  .security_section .owl-carousel .owl-nav .owl-prev,
  .security_section .owl-carousel .owl-nav .owl-next{
    width:46px;
    height:40px;
    border-radius:12px;
  }

  .security_section .owl-carousel .owl-nav .owl-prev{ left:35%; }
  .security_section .owl-carousel .owl-nav .owl-next{ right:35%; }
}