/* ==========================================================
   TRINITY ECUADOR
   NAVBAR.CSS
==========================================================*/

/*==========================================================
  HEADER
==========================================================*/

.header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

}

/*==========================================================
  TOPBAR
==========================================================*/

.topbar{

    height:42px;

    background:rgba(15,76,129,.92);

    backdrop-filter:blur(12px);

    color:#ffffff;

    font-size:13px;

}

.topbar-container{

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.topbar-left,
.topbar-right{

    display:flex;

    align-items:center;

    gap:30px;

}

.topbar-left span,
.topbar-right a{

    display:flex;

    align-items:center;

    gap:8px;

}

.topbar-right a{

    transition:.30s;

}

.topbar-right a:hover{

    color:#8fd3ff;

}

/*==========================================================
  NAVBAR
==========================================================*/

.navbar{

    position:fixed;

    top:42px;

    left:0;

    width:100%;

    transition:.35s ease;

    z-index:999;

    background:transparent;

}

.navbar.scrolled{

    top:0;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    box-shadow:0 12px 40px rgba(0,0,0,.08);

}

/*==========================================================
  CONTAINER
==========================================================*/

.navbar-container{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/*==========================================================
  LOGO
==========================================================*/

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:65px;

    width:auto;

    transition:all .35s ease;

}

.navbar.scrolled .logo img{

    height:50px;

}

/*==========================================================
  MENU
==========================================================*/

.menu{

    display:flex;

    align-items:center;

    gap:45px;

}

.menu li{

    position:relative;

}

.menu a{

    font-size:15px;

    font-weight:600;

    color:var(--gray-800);

    transition:.30s;

}

.menu a:hover{

    color:var(--color-primary);

}

/*==========================================================
  LINIA HOVER
==========================================================*/

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:3px;

    border-radius:10px;

    background:var(--gradient-primary);

    transition:.35s;

}

.menu a:hover::after{

    width:100%;

}

/*==========================================================
  BOTONES
==========================================================*/

.navbar-buttons{

    display:flex;

    align-items:center;

    gap:18px;

}

/*==========================================================
  HAMBURGER
==========================================================*/

.hamburger{

    width:48px;

    height:48px;

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

}

.hamburger span{

    width:28px;

    height:3px;

    border-radius:10px;

    background:var(--color-primary);

    transition:.35s;

}

/*==========================================================
  HOVER
==========================================================*/

.hamburger:hover span:nth-child(1){

    width:20px;

}

.hamburger:hover span:nth-child(3){

    width:20px;

}

/*==========================================================
  MOBILE MENU
==========================================================*/

@media(max-width:1024px){

.menu{

    position:fixed;

    top:90px;

    right:-100%;

    width:340px;

    height:calc(100vh - 90px);

    background:#ffffff;

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    padding:50px 35px;

    gap:30px;

    box-shadow:-10px 0 30px rgba(0,0,0,.08);

    transition:.40s;

}

.menu.active{

    right:0;

}

.menu li{

    width:100%;

}

.menu a{

    display:block;

    width:100%;

    font-size:18px;

}

.navbar-buttons{

    display:none;

}

.hamburger{

    display:flex;

}

}

/*==========================================================
  TABLET
==========================================================*/

@media(max-width:768px){

.topbar{

    display:none;

}

.navbar{

    top:0;

}

.logo img{

    width:180px;

}

.menu{

    width:100%;

}

}

/*==========================================================
  MÓVIL
==========================================================*/

@media(max-width:480px){

.navbar-container{

    height:80px;

}

.logo img{

    width:160px;

}

.hamburger{

    width:42px;

    height:42px;

}

}

/*==========================================================
  EFECTO GLASS
==========================================================*/

.navbar::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to bottom,

        rgba(255,255,255,.15),

        rgba(255,255,255,.05)

    );

    opacity:0;

    transition:.35s;

}

.navbar.scrolled::before{

    opacity:1;

}

/*==========================================================
  TRANSICIÓN GENERAL
==========================================================*/

.menu a,
.logo img,
.navbar,
.topbar{

    transition:all .35s ease;

}