/* =========================================================
   COMPONENTS.CSS - UNIFICADO Y OPTIMIZADO
   Incluye: Botones, Alertas, Modales, Animaciones y Newsletter
   ========================================================= */

/* ==========================================
   1. BOTONES (Bootstrap 5 Base)
   ========================================== */
.btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: #212529;
  --bs-btn-bg: transparent;
  --bs-btn-border-width: 1px;
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: 0.375rem;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn:hover { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); }
.btn-check + .btn:hover { color: var(--bs-btn-color); background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); }
.btn:focus-visible { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); outline: 0; box-shadow: var(--bs-btn-focus-box-shadow); }
.btn-check:focus-visible + .btn { border-color: var(--bs-btn-hover-border-color); outline: 0; box-shadow: var(--bs-btn-focus-box-shadow); }
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active { color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color); }
.btn.disabled, .btn:disabled, fieldset:disabled .btn { color: var(--bs-btn-disabled-color); pointer-events: none; background-color: var(--bs-btn-disabled-bg); border-color: var(--bs-btn-disabled-border-color); opacity: var(--bs-btn-disabled-opacity); }

/* Variantes de Botones (Resumidas para ahorrar espacio, usa las que necesites) */
.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #0d6efd; --bs-btn-border-color: #0d6efd; --bs-btn-hover-bg: #0b5ed7; --bs-btn-hover-border-color: #0a58ca; }
.btn-secondary { --bs-btn-color: #fff; --bs-btn-bg: #6c757d; --bs-btn-border-color: #6c757d; --bs-btn-hover-bg: #5c636a; --bs-btn-hover-border-color: #565e64; }
.btn-success { --bs-btn-color: #fff; --bs-btn-bg: #198754; --bs-btn-border-color: #198754; --bs-btn-hover-bg: #157347; --bs-btn-hover-border-color: #146c43; }
.btn-danger { --bs-btn-color: #fff; --bs-btn-bg: #dc3545; --bs-btn-border-color: #dc3545; --bs-btn-hover-bg: #bb2d3b; --bs-btn-hover-border-color: #b02a37; }
.btn-warning { --bs-btn-color: #000; --bs-btn-bg: #ffc107; --bs-btn-border-color: #ffc107; --bs-btn-hover-bg: #ffca2c; --bs-btn-hover-border-color: #ffc720; }
.btn-info { --bs-btn-color: #000; --bs-btn-bg: #0dcaf0; --bs-btn-border-color: #0dcaf0; --bs-btn-hover-bg: #31d2f2; --bs-btn-hover-border-color: #25cff2; }
.btn-light { --bs-btn-color: #000; --bs-btn-bg: #f8f9fa; --bs-btn-border-color: #f8f9fa; --bs-btn-hover-bg: #d3d4d5; --bs-btn-hover-border-color: #c6c7c8; }
.btn-dark { --bs-btn-color: #fff; --bs-btn-bg: #212529; --bs-btn-border-color: #212529; --bs-btn-hover-bg: #424649; --bs-btn-hover-border-color: #373b3e; }

.btn-outline-primary { --bs-btn-color: #0d6efd; --bs-btn-border-color: #0d6efd; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0d6efd; --bs-btn-hover-border-color: #0d6efd; }
.btn-outline-secondary { --bs-btn-color: #6c757d; --bs-btn-border-color: #6c757d; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6c757d; --bs-btn-hover-border-color: #6c757d; }
.btn-outline-success { --bs-btn-color: #198754; --bs-btn-border-color: #198754; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #198754; --bs-btn-hover-border-color: #198754; }
.btn-outline-danger { --bs-btn-color: #dc3545; --bs-btn-border-color: #dc3545; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #dc3545; --bs-btn-hover-border-color: #dc3545; }
.btn-outline-warning { --bs-btn-color: #ffc107; --bs-btn-border-color: #ffc107; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #ffc107; --bs-btn-hover-border-color: #ffc107; }
.btn-outline-info { --bs-btn-color: #0dcaf0; --bs-btn-border-color: #0dcaf0; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #0dcaf0; --bs-btn-hover-border-color: #0dcaf0; }
.btn-outline-light { --bs-btn-color: #f8f9fa; --bs-btn-border-color: #f8f9fa; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #f8f9fa; --bs-btn-hover-border-color: #f8f9fa; }
.btn-outline-dark { --bs-btn-color: #212529; --bs-btn-border-color: #212529; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #212529; --bs-btn-hover-border-color: #212529; }

.btn-link { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-link-color); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--bs-link-hover-color); text-decoration: underline; }
.btn-group-lg > .btn, .btn-lg { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1.25rem; --bs-btn-border-radius: 0.5rem; }
.btn-group-sm > .btn, .btn-sm { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; --bs-btn-font-size: 0.875rem; --bs-btn-border-radius: 0.25rem; }

.btn-close {
  box-sizing: content-box; width: 1em; height: 1em; padding: .25em .25em; color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0; border-radius: .375rem; opacity: .5;
}
.btn-close:hover { color: #000; text-decoration: none; opacity: .75; }
.btn-close:focus { outline: 0; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); opacity: 1; }
.btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }

/* ==========================================
   2. ALERTAS
   ========================================== */
.alert { position: relative; padding: 1rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.375rem; }
.alert-heading { color: inherit; }
.alert-link { font-weight: 700; }
.alert-dismissible { padding-right: 3rem; }
.alert-dismissible .btn-close { position: absolute; top: 0; right: 0; z-index: 2; padding: 1.25rem 1rem; }

.alert-primary { color: #084298; background-color: #cfe2ff; border-color: #b6d4fe; }
.alert-secondary { color: #41464b; background-color: #e2e3e5; border-color: #d3d6d8; }
.alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; }
.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; }
.alert-info { color: #055160; background-color: #cff4fc; border-color: #b6effb; }
.alert-light { color: #636464; background-color: #fefefe; border-color: #fdfdfe; }
.alert-dark { color: #141619; background-color: #d3d3d4; border-color: #bcbebf; }

/* ==========================================
   3. MODALES
   ========================================== */
.modal { position: fixed; top: 0; left: 0; z-index: 1055; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; }
.modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; }
.modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translate(0, -50px); }
@media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } }
.modal.show .modal-dialog { transform: none; }
.modal.modal-static .modal-dialog { transform: scale(1.02); }
.modal-dialog-scrollable { height: calc(100% - 1rem); }
.modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; color: #212529; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.175); border-radius: 0.5rem; outline: 0; }
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1050; width: 100vw; height: 100vh; background-color: #000; }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 0.5; }
.modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: calc(0.5rem - 1px); border-top-right-radius: calc(0.5rem - 1px); }
.modal-header .btn-close { padding: 0.5rem 0.5rem; margin: -0.5rem -0.5rem -0.5rem auto; }
.modal-title { margin-bottom: 0; line-height: 1.5; }
.modal-body { position: relative; flex: 1 1 auto; padding: 1rem; }
.modal-footer { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: 0.75rem; border-top: 1px solid #dee2e6; border-bottom-right-radius: calc(0.5rem - 1px); border-bottom-left-radius: calc(0.5rem - 1px); }
.modal-footer > * { margin: 0.25rem; }

@media (min-width: 576px) {
  .modal-dialog { max-width: 500px; margin: 1.75rem auto; }
  .modal-dialog-scrollable { height: calc(100% - 3.5rem); }
  .modal-dialog-centered { min-height: calc(100% - 3.5rem); }
  .modal-sm { max-width: 300px; }
}
@media (min-width: 992px) { .modal-lg, .modal-xl { max-width: 800px; } }
@media (min-width: 1200px) { .modal-xl { max-width: 1140px; } }

/* ==========================================
   4. ANIMACIONES (Unificadas y limpias)
   ========================================== */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.animated.hinge { animation-duration: 2s; }

/* --- Keyframes Estándar --- */
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } }
@keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } }
@keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }
@keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } }

/* --- Keyframes Fade --- */
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(60px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } }
@keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } }
@keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } }
@keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } }

/* --- Keyframes Zoom --- */
@keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
@keyframes zoomInDown { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } }
@keyframes zoomInLeft { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } }
@keyframes zoomInRight { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } }
@keyframes zoomInUp { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } }
@keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(.3, .3, .3); } to { opacity: 0; } }

/* --- Keyframes Personalizados del Tema (tp) --- */
@keyframes tpfadeUp { 0% { opacity: 0; transform: translateY(60px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes tpfadeLeft { 0% { opacity: 0; transform: translateX(-60px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes tpfadeRight { 0% { opacity: 0; transform: translateX(30px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes tpfadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tpswing { 0% { transform: rotate(25deg); } 100% { transform: rotate(0deg); } }
@keyframes movingleftright1 { 0% { transform: translateX(0) translateY(0); } 40% { transform: translateX(50px) translateY(-100px); } 75% { transform: translateX(200px); } 100% { transform: translateY(0) translateX(0); } }
@keyframes jump { 0%, 100% { transform: translate3d(0,0,0); } 40% { transform: translate3d(0,50%,0); } }
@keyframes jumpTwo { 0%, 100% { transform: translate3d(0,0,0); } 40% { transform: translate3d(0,20px,0); } }
@keyframes jumpThree { 0%, 100% { transform: translate3d(0,0,0); } 40% { transform: translate3d(0,-20px,0); } }
@keyframes jumpFour { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-10px,0); } }
@keyframes jumpFive { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,10px,0); } }
@keyframes prXOne { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-15px); } }
@keyframes prXTwo { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(15px); } }
@keyframes rotated { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes rotatedTwo { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }
@keyframes rotatedHalf { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }
@keyframes rotatedHalfTwo { 0% { transform: rotate(-90deg); } 100% { transform: rotate(90deg); } }
@keyframes scale-upOne { 0%, 100% { transform: scale(1); } 50% { transform: scale(.85); } }
@keyframes scale-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20%); } }
@keyframes fade-in { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
@keyframes hvr-ripple-out { 0% { top: -5px; right: -5px; bottom: -5px; left: -5px; } 50% { top: -15px; right: -15px; bottom: -15px; left: -15px; opacity: .8; } 100% { top: -5px; right: -5px; bottom: -5px; left: -5px; opacity: 1; } }
@keyframes hvr-ripple-out-two { 0% { top: 0; right: 0; bottom: 0; left: 0; } 100% { top: -30px; right: -30px; bottom: -30px; left: -30px; opacity: 0; } }
@keyframes scale-up-one { 0%, 100% { transform: scale(1); } 40% { transform: scale(.5); } }
@keyframes scale-up-two { 0%, 100% { transform: scale(.5); } 40% { transform: scale(.8); } }
@keyframes scale-up-three { 0%, 100% { transform: scale(1); } 40% { transform: scale(2); } }
@keyframes jump5p { 0%, 100% { transform: translate3d(0,0,0); } 40% { transform: translate3d(0,5px,0); } }
@keyframes jump5pRsv { 0%, 100% { transform: translate3d(0,0,0); } 40% { transform: translate3d(0,-5px,0); } }
@keyframes moveclouds { 0% { margin-left: 200px; } 100% { margin-left: -200px; } }
@keyframes moveclouds2 { 0% { margin-right: 200px; } 100% { margin-right: -200px; } }
@keyframes moveUp { 0% { transform: translateY(0); } 100% { transform: translateY(-70%); } }
@keyframes pulse-shadow { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.4); } 70% { box-shadow: 0 0 0 45px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@keyframes animationglob { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes tpupdown { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } }
@keyframes tptranslateY2 { 0% { transform: translateY(0); } 100% { transform: translateY(-40px); } }
@keyframes tptranslateX2 { 0% { transform: translateX(0); } 100% { transform: translateX(40px); } }
@keyframes section-animation { 0% { width: 0; } 15% { width: 100%; } 85% { opacity: 1; } 90% { width: 100%; opacity: 0; } 100% { width: 0; opacity: 0; } }

/* --- Clases de Animación --- */
.bounce { animation-name: bounce; }
.flash { animation-name: flash; }
.pulse { animation-name: pulse; }
.shake { animation-name: shake; }
.swing { transform-origin: top center; animation-name: swing; }
.tada { animation-name: tada; }
.wobble { animation-name: wobble; }
.fadeIn { animation-name: fadeIn; }
.fadeInDown { animation-name: fadeInDown; }
.fadeInLeft { animation-name: fadeInLeft; }
.fadeInRight { animation-name: fadeInRight; }
.fadeInUp { animation-name: fadeInUp; }
.fadeOut { animation-name: fadeOut; }
.fadeOutDown { animation-name: fadeOutDown; }
.fadeOutLeft { animation-name: fadeOutLeft; }
.fadeOutRight { animation-name: fadeOutRight; }
.fadeOutUp { animation-name: fadeOutUp; }
.zoomIn { animation-name: zoomIn; }
.zoomInDown { animation-name: zoomInDown; }
.zoomInLeft { animation-name: zoomInLeft; }
.zoomInRight { animation-name: zoomInRight; }
.zoomInUp { animation-name: zoomInUp; }
.zoomOut { animation-name: zoomOut; }

/* Clases Personalizadas del Tema */
.tpfadeUp { animation-name: tpfadeUp; }
.tpfadeLeft { animation-name: tpfadeLeft; }
.tpfadeRight { animation-name: tpfadeRight; }
.tpfadeIn { animation-name: tpfadeIn; }

/* ==========================================
   5. NEWSLETTER
   ========================================== */
.tp-newslatter__bg { padding-top: 110px; padding-bottom: 145px; }
.tp-newslatter__title-sm { font-weight: 700; font-size: 44px; text-transform: capitalize; color: var(--tp-common-white); }

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-newslatter__title-sm { font-size: 35px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tp-newslatter__title-box { margin-bottom: 30px; }
}

.tp-newslatter__input input {
  background: var(--tp-theme-1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 40px;
  height: 77px;
  padding-left: 45px;
  padding-right: 225px;
  font-weight: 400;
  font-size: 18px;
  text-transform: capitalize;
  color: var(--tp-common-white);
}
@media (max-width: 767px) {
  .tp-newslatter__input input { padding: 0px 45px; margin-bottom: 20px; }
}

.tp-newslatter__input input::placeholder {
  font-weight: 400;
  font-size: 18px;
  text-transform: capitalize;
  color: var(--tp-common-white);
}
.tp-newslatter__input input:focus { border-color: rgba(255, 255, 255, 0.16); }

.tp-newslatter__btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  line-height: 0;
}
@media (max-width: 767px) {
  .tp-newslatter__btn { position: static; transform: translateY(0%); }
}

.tp-newslatter-3__customize {
  margin-top: -75px;
  position: relative;
  z-index: 9;
}
.tp-newslatter-3__customize .tp-newslatter__bg {
  max-width: 1240px;
  margin: 0 auto;
  padding: 55px 40px;
}
.tp-newslatter-3__customize .tp-newslatter__title-sm { font-size: 34px; }