:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Nunito", sans-serif;
  --nav-font: "Inter", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff;
  /* Background color for the entire website, including individual sections */
  --default-color: #3d4348;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #3e5055;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #07458D;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff;
  /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #313336;
  /* The default color of the main navmenu links */
  --nav-hover-color: #77b6ca;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #313336;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #77b6ca;
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*
---------------------------------------------
font & reset css
---------------------------------------------
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");

/*
---------------------------------------------
reset
---------------------------------------------
*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header,
nav,
nav-list,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Poppins', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 28px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}

/*
---------------------------------------------
Global Styles
---------------------------------------------
*/
html,
body {
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #07458D;
  color: #fff;
}

::-moz-selection {
  background: #07458D;
  color: #fff;
}

.section {
  padding-top: 30px;
  margin-top: 120px;
}



.section-heading {
  margin-bottom: 0px;
}

.section-heading h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 20px 0;
  line-height: 44px;
}

.section-heading h2 em {
  color: #07458D;
  font-style: normal;
}

.section-heading h6 {
  color: #07458D;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
}

.main-button a {
  display: inline-block;
  background-color: #fff;
  color: #07458D;
  font-size: 15px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0px 25px;
  border-radius: 20px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #07458D;
  color: #fff;
}

.main-buttonP a {
  display: inline-block;
  background-color: #07458D;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0px 25px;
  border-radius: 20px;
  transition: all .3s;
  margin-top: auto;
}

.main-buttonP a:hover {
  background-color: #0b5bb7;
  color: #ffffff;
  margin-top: auto;
}

/*
---------------------------------------------
Pre-loader Style
---------------------------------------------
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #07458D;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #07458D;
  border-radius: 50%;
}



/*
---------------------------------------------
Header Style
---------------------------------------------
*/

.background-header {
  background-color: #07458D !important;
  border-radius: 0px 0px 25px 25px;
  height: 80px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15) !important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area {
  position: absolute;
  height: 100px !important;
  background-color: #07458D;
  top: 0px;
  padding-top: 20px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  background: #07458D;
  display: flex
}

.header-area .main-nav .logo {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;

  /* CAMBIOS CLAVE AQUÍ: */
  display: flex !important;
  /* Cambiado de inline-block a flex */
  flex-direction: column;
  /* Alinea imagen arriba y texto abajo */
  align-items: flex-start;
  /* Alinea todo a la izquierda */
  justify-content: center;
  text-decoration: none;
}

.header-area .main-nav .logo h1 {
  font-size: 20px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid rgba(250, 250, 250, 0.3);
}

.header-area .main-nav .logo .dev-text {
  font-size: 11px;
  font-weight: 700;
  color: #ffff00;
  /* Amarillo */
  background: #ff0000;
  /* Rojo */
  padding: 1px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-top: 5px;
  /* Separación del logo */
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.background-header .main-nav .logo,
.background-header .main-nav #search {
  margin-top: 10px;
}

.header-area .main-nav #search {
  position: relative;
}

.header-area .main-nav #search input {
  background-color: rgba(255, 255, 255, 0.10);
  height: 44px;
  width: 250px;
  border-radius: 23px;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  padding: 0px 20px 0px;
}

.header-area .main-nav #search input::placeholder {
  color: rgba(250, 250, 250, 0.75);
}

.header-area .main-nav #search i {
  position: absolute;
  color: #fff;
  right: 20px;
  top: 10px;
  font-size: 16px;
}

.header-area .main-nav ul.nav {
  border-radius: 0px 0px 25px 25px;
  flex-basis: 280%;
  margin-right: 0px;
  justify-content: right;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 5px;
  padding-right: 5px;
  height: 20px;
  line-height: 40px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 20px;
  font-weight: 280;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #fff;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  border: transparent;
  letter-spacing: .25px;
}

.background-header .main-nav .nav {
  margin-top: 20px;
}

.background-header .main-nav .nav li {
  height: 80px;
  line-height: 80px;
}

.header-area .main-nav .nav li:hover a {
  opacity: 0.8;
}

.header-area .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
  opacity: 1;
}

.background-header .main-nav .nav li:hover a {
  opacity: 0.8;
}

.background-header .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
  opacity: 1;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 20px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky .nav li a.active {
  color: #fff;
}

.visible {
  display: inline !important;
}

/* 
@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 2px;
    padding-right: 2px;
  }

  .header-area .main-nav .nav li a {
    padding-left: 10px;
    padding-right: 10px;
  }

} */

@media (max-width: 767px) {
  .header-area .main-nav .nav {
    display: none !important;
    flex-basis: 100%;
    background-color: #ffffff !important;
    position: absolute;
    top: 80px;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 10px 0;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 25px 25px;
    transition: all 0.3s ease-in-out;
  }

  /* 2. Cuando el menú está activo (al hacer clic) */
  .header-area .main-nav .nav.active {
    display: block !important;
  }

  /* 3. Estilo de los items del menú en móvil */
  .header-area .main-nav .nav li {
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    height: auto !important;
    line-height: normal !important;
  }

  .header-area .main-nav .nav li a {
    color: #07458D !important;
    /* Texto azul para resaltar en el fondo blanco */
    background-color: #f8f9fa !important;
    /* Gris muy tenue */
    margin: 5px 20px;
    border-radius: 15px !important;
    /* Botones redondeados */
    text-align: center;
    height: 50px !important;
    line-height: 50px !important;
    font-weight: 500 !important;
  }

  .header-area .main-nav .nav li a.active,
  .header-area .main-nav .nav li a:hover {
    background-color: #07458D !important;
    color: #ffffff !important;
  }

  .header-area .main-nav .menu-trigger {
    display: block !important;
  }

  .header-area .main-nav .logo {
    position: absolute;
    left: 20px;
    top: 15px;
    width: 150px;
  }

  .header-area .main-nav .menu-trigger {
    display: block !important;
    /* Fuerza la aparición */
    position: absolute;
    right: 20px;
    top: 20px;
    /* Ajusta esto para centrarlo verticalmente en tu barra azul */
    width: 40px;
    height: 40px;
    z-index: 9999 !important;
    /* Ponerlo por encima de todo */
  }

  /* Color de las rayitas (blanco para que resalte en el azul) */
  .header-area .main-nav .menu-trigger span,
  .header-area .main-nav .menu-trigger span:before,
  .header-area .main-nav .menu-trigger span:after {
    background-color: #ffffff !important;
    width: 30px;
    height: 3px;
  }
}

/*
---------------------------------------------
Banner Style
---------------------------------------------
*/

.main-banner {
  padding: 100px 0px 0px 0px;
}


/*
---------------------------------------------
Services Style
---------------------------------------------
*/
.services .row {
  display: flex;
  flex-wrap: wrap;
}

.services .service-item:hover .icon img {
  margin-top: -10px;
}

.services .service-item {
  position: relative;
  margin-top: 95px;
}

.services .service-item .icon {
  width: 190px;
  height: 190px;
  display: inline-block;
  text-align: center;
  line-height: 190px;
  background-color: #07458D;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: -95px;
}

.services .service-item .icon img {
  max-width: 100px;
  transition: all .2s;
}

.services .service-item .main-content {
  border-radius: 25px;
  padding: 80px 30px 50px 30px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  margin-bottom: 30px;
  margin-right: 80px;
  transition: all .4s;
  /* height: 450px; */
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
}

.services .service-item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 30px;
  transition: all .4s;
}

.services .service-item p {
  color: #4a4a4a;
  margin-bottom: 25px;
}

/*
---------------------------------------------
About Style
---------------------------------------------
*/

.about-us {
  position: relative;
  padding: 0px;
  margin-top: 130px;

}

/* .about-us:before {
  position: absolute;
  top: 70px;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 64%;
  height: 60%;
  background-color: #83b5ee;
  content: '';
  border-top-left-radius: 500px;
  border-bottom-left-radius: 500px;
} */

.margin {
  margin-top: 100px !important;
  margin-bottom: 120px !important;
}

.accordion {
  margin-top: -40px;
  margin-bottom: -40px;
  background-color: #07458D;
  border-radius: 40px;
  padding: 80px 50px 50px 50px;
  /* width: 500px; */
}

.accordionP {
  margin-top: -40px;
  margin-bottom: -40px;
  background-color: #07458D;
  border-radius: 40px;
  padding: 20px 20px 50px 50px;
  /* width: 500px; */
}

.accordionP p {
  color: #fff;
}

.accordionP h3 {
  color: #fff;
  text-align: center;
  position: relative;
}


.accordionP span {
  color: #fff;
}

.accordion-itemP {
  background-color: #fff;
  border-radius: 20px !important;
  margin-bottom: 30px;
  border: none;
}

.accordion p {
  color: #fff;
}

.accordion h3 {
  color: #fff;
}

.accordion span {
  color: #fff;
}

.accordion-item {
  background-color: #fff;
  border-radius: 20px !important;
  margin-bottom: 30px;
  border: none;
}

.accordion-item .accordion-button {
  outline: none;
  box-shadow: none;
  border-radius: 40px !important;
}

.accordion-button:not(.collapsed) {
  color: #07458D;
  background-color: #fff;
}

h2.accordion-header button {
  padding: 15px 25px;
  font-family: 'Poppins';
  font-size: 15px;
  font-weight: 600;
}

.accordion-button::after {
  font-size: 18px;
  font-weight: 500;
  background-image: none;
  content: '+';
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #fff;
}

/* .accordion-button {
  font-size: 20px;
  font-weight: 200;
  background-image: none;
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background-color: #07458D;
  color: #fff;
} */

.accordion-button:not(.collapsed)::after {
  background-image: none;
  line-height: 32px;
  content: '-';
}

.accordion-body {
  padding: 0px 25px 30px 25px;
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
}

/* .about-us .section-heading {
  margin-left: 200px;
} */

.about-us .section-heading {
  margin-left: 60px;
  margin-bottom: 0px;
}

.about-us .section-heading .main-button {
  /* margin-top: 0px; */
  margin-top: 50px;

}


/*
---------------------------------------------
Courses Style
---------------------------------------------
*/

.courses {
  margin-top: 160px;
}

.event_filter {
  text-align: center;
}

.event_filter {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 50px;
  padding: 15px 40px;
  list-style: none;
  margin: 0 auto 70px;
  max-width: max-content;
}

.event_filter li {
  display: inline-block;
  margin: 0px 20px;
}

.event_filter li a {
  font-size: 14px;
  font-weight: 500;
  color: #1e1e1e;
  transition: all .3s;
}

.event_filter li .event_filter li a.is_active,
.event_filter li a:hover {
  color: #07458D;
}

.events_item .thumb {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
}

.events_item .thumb img {
  margin-bottom: -5px;
}

.events_item .thumb span.category {
  position: absolute;
  left: 30px;
  top: 30px;
  font-size: 14px;
  text-transform: uppercase;
  color: #07458D;
  background-color: rgba(250, 250, 250, 0.95);
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 500;
  display: inline-block;
}

.events_item .thumb span.price {
  position: absolute;
  right: -30px;
  top: -50px;
  background-color: rgb(240, 187, 14);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: inline-block;
  transition: all .3s;
}

.events_item .thumb span.price h6 {
  margin-top: 72px;
  margin-left: 22px;
  font-size: 28px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
}

.events_item .thumb span.price em {
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  vertical-align: top;
}

.events_item {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 25px;
  margin-bottom: 30px;
  position: relative;
  justify-content: center;
  align-items: center;
}

.events_item .down-content {
  padding: 20px 30px 25px 30px;
}

.events_item .down-content span.author {
  color: #07458D;
  font-size: 15px;
  display: inline-block;
  margin-bottom: 6px;
}

.events_item .down-content h4 {
  font-size: 22px;
  font-weight: 600;
  transition: all .3s;
}

.events_item:hover .down-content h4 {
  color: #07458D;
}

.events_item:hover .thumb span.price {
  transform: scale(1.2);
}


/*
---------------------------------------------
Facts Style
---------------------------------------------
*/

.fun-facts {
  position: relative;
  padding: 120px 0px 80px 0px;
  overflow: hidden;
}

.fun-facts:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 95%;
  height: 100%;
  background-color: #07458D;
  content: '';
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
}



.fun-facts .counter {
  text-align: center;
  margin-bottom: 40px;
}

.fun-facts h2 {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
}

.fun-facts h2::after {
  content: '+';
  margin-left: 5px;
}

.fun-facts p {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  margin-top: 15px;
}


/*
---------------------------------------------
Team Style
---------------------------------------------
*/

.team {
  margin-top: 100px;
  padding-top: 140px;
}

.team-member {
  position: relative;
}

.team-member:hover img {
  top: -120px;
}

.team-member img {
  max-width: 220px;
  border-radius: 50%;
  position: absolute;
  top: -110px;
  left: 50%;
  transform: translateX(-110px);
  transition: all .3s;
}

.team-member .main-content {
  border-radius: 25px;
  padding: 140px 30px 40px 30px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  text-align: center;
}

.team-member .main-content span.category {
  color: #07458D;
  font-size: 15px;
}

.team-member .main-content h4 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 15px;
}

.team-member .main-content ul li {
  display: inline-block;
  margin: 0px 2px;
}

.team-member .main-content ul li a {
  background-color: #fff;
  color: #07458D;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all .3s;
}

.team-member .main-content ul li a:hover {
  background-color: #07458D;
  color: #fff;
}


/*
---------------------------------------------
Testimonials Style
---------------------------------------------
*/

.testimonials {
  position: relative;
  padding: 80px 0px;
  margin-top: 150px;
}

.testimonials:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 65%;
  height: 100%;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  content: '';
  border-top-left-radius: 500px;
  border-bottom-left-radius: 500px;
}

.testimonials .section-heading {
  margin-bottom: 0px;
  margin-left: 200px;
  vertical-align: middle;
}

.testimonials .section-heading p {
  margin-top: 0px;
}

.testimonials .item {
  background-color: #07458D;
  border-radius: 25px;
  padding: 80px;
}

.testimonials .item p {
  font-size: 18px;
  line-height: 40px;
  color: #fff;
  font-style: italic;
  font-weight: 300;
  margin-bottom: 40px;
}

.testimonials .item img {
  border-radius: 50%;
  max-width: 100px;
  float: left;
  margin-right: 25px;
}

.testimonials .item span {
  display: inline-block;
  margin-top: 20px;
  font-size: 15px;
  color: #fff;
}

.testimonials .item h4 {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px;
}

.testimonials .owl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-5px);
  right: -25px;
  text-align: right;
}

.testimonials .owl-nav .owl-prev i,
.testimonials .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #07458D;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.10);
  opacity: 1;
  transition: all .3s;
}

.testimonials .owl-nav .owl-prev i {
  position: absolute;
  bottom: 65px;
}

.testimonials .owl-nav .owl-prev i:hover,
.testimonials .owl-nav .owl-next i:hover {
  opacity: 1;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}


/*
---------------------------------------------
Events Style
---------------------------------------------
*/



.events .item {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 25px;
  position: relative;
  padding: 40px;
  margin-bottom: 96px;
}

.events .item .image {
  position: relative;
}

.events .item .image img {
  position: absolute;
  border-radius: 25px;
  max-width: 260px;
  left: 0;
  top: -70px;
}

.events .item ul li {
  display: inline-block;
  width: 17.5%;
  vertical-align: middle;
}

.events .item ul li:first-child {
  width: 35%;
}

.events .item ul li:nth-of-type(2) {
  width: 28%;
}

.events .item ul li span.category {
  font-size: 14px;
  text-transform: uppercase;
  color: #07458D;
  background-color: #fff;
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 20px;
}

.events .item ul li h4 {
  font-size: 22px;
  font-weight: 600;
}

.events .item ul li span {
  display: inline-block;
  font-size: 14px;
  color: #4a4a4a;
  margin-bottom: 10px;
}

.events .item ul li h6 {
  font-size: 16px;
  color: #07458D;
  font-weight: 600;
}

.events .item a {
  position: absolute;
  right: 0;
  top: 22px;
  background-color: #07458D;
  width: 60px;
  height: 120px;
  display: inline-block;
  text-align: center;
  line-height: 120px;
  font-size: 18px;
  z-index: 1;
  color: #fff;
  border-radius: 60px 0px 0px 60px;
}


/*
---------------------------------------------
Contact Style
---------------------------------------------
*/

.contact-us {
  margin-top: 80px;
  position: relative;
  padding: 50px 0px;
}

.contact-us:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 65%;
  height: 100%;
  background-color: #ffffff;
  content: '';
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
}


.contact-us .section-heading {
  margin-right: 0px;
}

.contact-us .section-heading p {
  margin-top: 50px;
}

.contact-us .special-offer {
  margin-top: 50px;
  background-color: #fff;
  border-radius: 25px;
  padding: 30px 120px;
  display: inline-block;
  position: relative;
}

.contact-us .special-offer span.offer {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #07458D;
  width: 80px;
  padding: 30px 8px;
  line-height: 25px;
  height: 120px;
  border-radius: 15px 60px 60px 15px;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  text-align: left;
}

.contact-us .special-offer span.offer em {
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
}

.contact-us .special-offer h6 {
  font-size: 15px;
  color: #4a4a4a;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 15px;
}

.contact-us .special-offer h6 em {
  font-style: normal;
  color: #07458D;
  font-weight: 600;
}

.contact-us .special-offer h4 {
  font-size: 22px;
  font-weight: 600;
}

.contact-us .special-offer h4 em {
  font-style: normal;
  color: #07458D;
}

.contact-us .special-offer a {
  position: absolute;
  right: 30px;
  top: 35px;
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  background-color: #07458D;
  color: #fff;
  border-radius: 50%;
}

.contact-us .contact-us-content {
  border-radius: 25px;
  padding: 80px;
  background-color: #07458D;
  position: relative;
  z-index: 1;
}

.contact-us .contact-us-content::before {
  position: absolute;
  left: 50%;
  transform: translateX(-149px);
  opacity: 0.5;
  top: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

.contact-us .contact-us-content::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 183px;
  height: 149px;
  content: '';
  z-index: 2;
}

.contact-us .contact-us-content p a {
  line-height: 50px;
  color: #fff;
  font-weight: 300;
}

.contact-us .contact-us-content p a:hover {
  line-height: 50px;
  color: rgb(240, 187, 14);
  font-weight: 300;
}

.contact-form input {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: rgba(249, 235, 255, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  padding: 0px 20px;
  font-size: 14px;
  color: #fff;
  position: relative;
  z-index: 3;
}

.contact-form fieldset {
  margin-bottom: 30px;
}

.contact-form input::placeholder {
  color: #fff;
}

.contact-form select {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: rgba(249, 235, 255, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  padding: 0px 20px;
  font-size: 14px;
  color: #fff;
  position: relative;
  z-index: 3;

  option {
    display: inline;
    width: 100%;
    height: 50px;
    background: rgba(249, 235, 255, 0.15);
    font-weight: 300;
    padding: 0px 20px;
    font-size: 14px;
    color: #333333;
  }
}

.contact-form select::placeholder {
  color: #fff;
}

.contact-form textarea {
  width: 100%;
  height: 120px;
  border-radius: 25px;
  background-color: rgba(249, 235, 255, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  padding: 20px;
  font-size: 14px;
  color: #fff;
  position: relative;
  z-index: 3;
}

.contact-form textarea::placeholder {
  color: #fff;
}

.contact-form button {
  border: none;
  height: 50px;
  font-size: 14px;
  font-weight: 600;
  background-color: #fff;
  padding: 0px 25px;
  border-radius: 25px;
  color: #07458D;
  transition: all .4s;
  position: relative;
  z-index: 3;
}

.contact-form button:hover {
  opacity: 0.8;
}

.contact-us-content .more-info {
  text-align: center;
  background: rgb(85, 0, 227);
  background: linear-gradient(90deg, rgba(85, 0, 227, 1) 0%, rgba(198, 61, 255, 1) 100%);
  border-radius: 0px 0px 23px 23px;
  padding: 45px 30px 15px 30px;
}

.contact-us-content .more-info .info-item {
  text-align: center;
  margin-bottom: 30px;
}

.contact-us-content .more-info i {
  font-size: 32px;
  color: #fff;
  margin-bottom: 15px;
}

.contact-us-content .more-info h4 a {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

.text-muted {
  --bs-text-opacity: 1;
  color: #6c757d !important;
}

.text-yelow {
  color: rgb(240, 187, 14) !important;
}

.page-section {
  padding: 6rem 0;
}

.page-section h2.section-heading,
.page-section .section-heading.h2 {
  font-size: 2.5rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.page-section h3.section-subheading,
.page-section .section-subheading.h3 {
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin-bottom: 4rem;
}

.login-button {
  border: none;
  height: 50px;
  font-size: 14px;
  font-weight: 600;
  background-color: #fff;
  padding: 0px 25px;
  border-radius: 25px;
  color: #07458D;
  transition: all .4s;
  position: relative;
  z-index: 3;
  margin-right: 1rem;
}

.login-button:hover {
  background-color: #07458D;
  color: #fff;
  opacity: 0.8;
}


section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 0px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

.section-titleP {
  text-align: center;
  position: relative;
}

.section-titleP h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-titleP h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-titleP p {
  margin-bottom: 0;
  font-size: 20px;
}




/*--------------------------------------------------------------
# Features Details Section
--------------------------------------------------------------*/
.features-details .features-item+.features-item {
  margin-top: 60px;
}

.features-details .features-item .content {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 30px;
  border-radius: 10px;
}

.features-details .features-item h3 {
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 15px;
}

.features-details .features-item .more-btn {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 6px 30px;
  border-radius: 6px;
}

.features-details .features-item .more-btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.features-details .features-item ul {
  list-style: none;
  padding: 0;
}

.features-details .features-item ul li {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}

.features-details .features-item ul li:last-child {
  padding-bottom: 0;
}

.features-details .features-item ul i {
  font-size: 20px;
  margin-right: 10px;
  color: var(--accent-color);
}

.features-details .features-item img {
  border-radius: 15px;
}

/*
---------------------------------------------
Footer Style
---------------------------------------------
*/
/* 
footer {
  background-color: #07458D;
  color: white;
  padding: 30px 15px 15px;
  border-radius: 150px 150px 0px 0px;
  width: 100%;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 150px;

} */


footer {
  margin-top: 150px;
  position: relative;
  background-color: #07458D;
  vertical-align: middle;
  min-height: 150px;
  border-radius: 150px 150px 0px 0px;
}

footer p {
  text-align: center;
  line-height: 150px;
  color: #fff;
  font-weight: 400;
}

footer p a {
  color: #fff;
  transition: all .3s;
  position: relative;
  z-index: 3;
}

footer p a:hover {
  opacity: 0.75;
}

footer::before {
  position: absolute;
  left: 30px;
  transform: rotate(180deg);
  opacity: 1;
  bottom: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

.social {
  padding: 0;
  margin: 0;
  display: inline-block;
  position: relative;
  width: 100%;
}

.social li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.social li a {
  font-size: 16px;
  display: table;
  width: 40px;
  height: 40px;
  margin: 0 4px;
}

.social li a i {
  display: table-cell;
  vertical-align: middle;
}


.social li a.social-circle {
  background: #fff;
  color: #07458D;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

.social.social-circle a {
  background: #fff;
  color: #07458D;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

/*
---------------------------------------------
Responsive Style
---------------------------------------------
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area {
    top: 0px;
  }

  .header-area .main-nav .logo h1 {
    border-right: none;
  }

  .main-banner .item {
    padding: 80px 30px 120px 30px !important;
  }

  .main-banner .owl-nav {
    left: 30px !important;
  }

  .event_filter {
    padding: 15px 20px;
  }

  .event_filter li {
    display: inline-block;
    margin: 0px 10px;
  }
}

@media (max-width: 992px) {

  .header-area .main-nav #search input,
  .header-area .main-nav #search i {
    display: none;
  }

  .header-area .main-nav .logo h1 {
    font-size: 34px;
  }

  .header-area .main-nav .logo {
    border-right: none;
  }

  .main-banner {
    padding-top: 100px;
  }

  .main-banner .item {
    padding: 100px 60px 140px 60px;
    margin-left: 0px;
    text-align: center;
  }

  .main-banner .item h2,
  .main-banner .item p {
    width: 100%;
  }

  .main-banner .item h2 {
    font-size: 36px;
    line-height: 50px;
  }

  .main-banner .item .buttons {
    display: inline-block;
    text-align: center;
  }

  .main-banner .item .buttons .main-button {
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .main-banner .owl-nav {
    left: 50% !important;
    transform: translateX(-60px) !important;
    bottom: 60px;
  }

  .main-banner .owl-nav .owl-prev i {
    bottom: 0px;
  }

  .main-banner .owl-nav .owl-next i {
    bottom: 0px;
    position: absolute;
    left: 65px;
  }

  .services {
    margin-top: 80px;
  }

  .section-heading {
    margin-top: 80px;
  }

  .margin {
    margin-bottom: auto;

  }

  .accordion {
    padding: 40px 25px 10px 25px;
  }

  .services .service-item .icon {
    width: 170px;
    height: 170px;
    line-height: 170px;
  }

  .about-us .section-heading {
    margin-left: 0px;
  }

  .about-us::before,
  .testimonials::before,
  .contact-us::before {
    display: none;
  }

  .about-us .section-heading p,
  .testimonials .section-heading p,
  .contact-us .section-heading p {
    margin-top: 30px;
  }

  .about-us .section-heading .main-button {
    margin-top: 30px;
  }

  .about-us .main-button a {
    background-color: #07458D;
    color: #fff;
  }

  .courses {
    margin-top: 100px;
  }

  .event_filter ul li {
    display: block;
    margin: 12px 5px;
  }

  .fun-facts {
    margin-top: 70px;
  }

  .fun-facts::before {
    width: 95%;
  }

  .team {
    margin-top: 160px;
  }

  .team-member {
    margin-bottom: 140px;
  }

  .testimonials {
    margin-top: -50px;
    padding: 0px;
  }

  .testimonials .section-heading {
    margin-left: 0px;
    margin-top: 0px;
  }

  .testimonials .item {
    padding: 40px 40px 60px 40px;
  }

  .testimonials .item h4 {
    font-size: 17px;
  }

  .testimonials .item img {
    margin-right: 15px;
  }

  .testimonials .owl-nav {
    display: none;
  }

  .events {
    margin-top: 80px;
  }

  .events .item {
    margin-bottom: 66px;
  }

  .events .item .image img {
    position: relative;
    max-width: 100%;
  }

  .events .item ul {
    margin-top: -40px;
  }

  .events .item ul li:first-child {
    width: 100% !important;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #ddd;
  }

  .events .item ul li:nth-child(2) {
    width: 40% !important;
  }

  .events .item ul li {
    display: inline-block;
    width: 28% !important;
  }

  .events .item ul li:last-child {
    text-align: right;
  }

  .events .item a {
    bottom: 150px;
    top: auto;
  }

  .events .item ul li h6 {
    font-size: 15px;
  }

  .contact-us {
    padding-top: 20px;
  }

  .contact-us .section-heading {
    margin-right: 0px;
  }

  .contact-us .special-offer {
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    margin-bottom: 60px;
    padding: 34px 30px 34px 100px;
    width: 100%;
  }

  .contact-us .special-offer h4 {
    font-size: 17px;
  }

  .contact-us .special-offer a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 15px;
    right: 15px;
  }

  .contact-us .contact-us-content {
    padding: 30px;
  }



  footer {
    margin-top: 30px;
  }
}

@media (max-width: 1200px) {
  .header-area .main-nav #search input {
    width: 200px;
  }

  .header-area .main-nav .nav li.has-sub:after {
    right: 15px;
  }

  .fun-facts:before {
    width: 95%;
  }
}


app-register-device-user .mat-mdc-form-field-infix {
  height: 8px !important;
  min-height: 8px !important;
  display: flex;
  align-items: center;
}

app-register-device-user .mat-mdc-form-field-subscript-wrapper {
  display: none !important;
}

.lista-eventos {
  list-style: none;
  padding: 0;
}

.lista-eventos li {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.lista-eventos li:last-child {
  border-bottom: none;
}

/* Estilos para el contenedor Grid (El mismo principio, pero con la nueva clase) */
.options-grid-cards {
  display: grid;
  /* Define 2 columnas de igual tamaño */
  grid-template-columns: repeat(2, 1fr);
  /* Espacio entre las tarjetas */
  gap: 20px;
  padding: 20px 0;
}

/* Estilos para cada tarjeta de opción */
.option-card {
  /* Asegura que la tarjeta sea interactiva */
  cursor: pointer;
  /* Define una altura para que todas las cards sean uniformes */
  height: 150px;
  /* Efecto de sombra al pasar el mouse para indicar que es clicable */
  transition: transform 0.2s, box-shadow 0.2s;
  /* Estilo para alinear el contenido dentro de la mat-card-content */
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-card:hover {
  /* Un ligero efecto al pasar el mouse */
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.disabled-card {
  cursor: not-allowed;
  opacity: 0.6;
}

.disabled-card:hover {
  box-shadow: none;
}


.fixed-table-wrapper {
  height: 450px;
  overflow-y: auto;
  border: 1px solid #f0f0f0;
  margin-bottom: 0px;
}

.text-truncate-cell {
  max-width: 460px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
}

.btn-half {
  width: 48%;
}

.modal-main-container {
  min-width: 650px;
}

table {
  width: 100%;
}

.mat-mdc-paginator {
  background: transparent !important;
}

.services1 {
  margin-bottom: 100px;
  padding-bottom: 50px;
}

.main-buttonP {
  margin-top: auto;
  padding-bottom: 20px;
}

.services1 .row1 {
  display: flex;
  flex-wrap: wrap;
  padding-top: 50px;
}

.service-item1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #efefef;
  padding: 60px 30px 30px 30px;
  border-radius: 30px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  margin-top: 50px;
}

.service-item1 .icon {
  width: 120px;
  height: 120px;
  background-color: #004a99;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: 0 5px 15px rgba(0, 74, 153, 0.3);
}

.service-item1 .icon img {
  width: 60%;
  height: auto;
}

.service-item1 .main-content1 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
}

.service-item1 h4 {
  margin-top: 10px;
  text-align: left;
}

.service-item1 ul {
  flex-grow: 1;
  margin-bottom: 20px;
}

.card-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px;
}

.gallery-box {
  background: #EFEFEF;
  padding: 15px;
  border-radius: 12px;
}

.gallery-main {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 10px;
}

.gallery-thumbs {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.gallery-thumbs img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: 0.3s;
}

.gallery-thumbs img:hover {
  border-color: #0d6efd;
  transform: scale(1.05);
}

.service-item1 .icon i {
  color: white;
  font-size: 2.5rem;
}

.service-item2 .icon i {
  color: white;
  font-size: 2.5rem;
}

.services2 .row1 {
  display: flex;
  flex-wrap: wrap;
  padding-top: 50px;
}

.service-item2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #efefef;
  padding: 60px 30px 30px 30px;
  border-radius: 30px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  margin-top: 50px;
}

.service-item2 .icon {
  width: 120px;
  height: 120px;
  background-color: #004a99;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: 0 5px 15px rgba(0, 74, 153, 0.3);
}

.service-item2 .icon img {
  width: 60%;
  height: auto;
}

.service-item2 .main-content1 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
}

.service-item2 h4 {
  margin-top: 10px;
  text-align: left;
}

.service-item2 ul {
  flex-grow: 1;
  margin-bottom: 20px;
}

.service-item2 {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.service-item2:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  background: #91c1f4;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 60px 30px 30px 30px;
  border-radius: 30px;
  position: relative;
  margin-top: 50px;
}

.service-item2 .icon {
  width: 120px;
  height: 120px;
  background-color: #004a99;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: 0 5px 15px rgba(0, 74, 153, 0.3);
}

.why-us .main-content1 {
  text-align: center;
  padding-top: 20px;
}

.why-us h4 {
  text-align: center !important;
  font-weight: bold;
  color: #004a99;
}

@media (max-width: 768px) {
  footer {
    padding-top: 25px;
    border-radius: 20px 20px 0 0;
    text-align: center;


  }

  footer::before {
    position: absolute;
    transform: rotate(180deg);
    opacity: 1;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin: 0px 0px 0px !important;
  }

  .social ul {
    list-style: none;
    /* Quita los puntos de la lista */
    padding: 0;
    /* Elimina el espacio extra a la izquierda */
    margin: 0;
    /* Elimina márgenes por defecto */
    display: flex;
    /* Alinea los items en fila */
    justify-content: center;
    /* Los centra horizontalmente */
    gap: 10px;
    /* Espacio opcional entre iconos */
  }

  .social ul li {
    display: inline-block;
    /* Asegura que se mantengan en línea */
  }

  .copyright {
    font-size: 0.8rem;
    line-height: 1.3;
    margin-bottom: 15px;
    text-align: center;
    width: 100%;
  }
}