:root{
  --brand:#0b3c5d;
  --accent:#1f7abf;
  --light:#ffffff;
  --dark:hsl(49, 98%, 44%);
}


/* ================= HEADER ================= */
.gcs-nav{
  width: 100%;
  position:sticky;
  top:0;
  z-index:999;
  background:#000e21;
  /* background:#ffffff; */
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
}

/* ================= CONTAINER ================= */
.gcs-nav-container{
  max-width:100%;
  margin:auto;
  padding:19px 50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ================= LOGO ================= */
/* ================= LOGO IMAGE ================= */
.gcs-logo{
  display:flex;
  align-items:center;
}
.gcs-logo img{
  height:54px;
  width:auto;
  object-fit:contain;
}

/* XS Devices */


/* XL Devices */
@media (min-width:1200px){
  .gcs-logo img{
    height:52px;
  }
}


/* ================= MENU ================= */
.gcs-menu{
  display:flex;
  align-items:start;
  gap:30px;
}
.gcs-menu a{
  text-decoration:none;
  color:var(--dark);
  font-weight:500;
  position:relative;
  font-size:1.1rem;
}
.gcs-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:var(--accent);
  transition:0.3s;
}
.gcs-menu a:hover::after{
  width:100%;
}

/* ================= ICONS ================= */
.gcs-icons{
  display:flex;
  align-items:center;
  gap:22px;
}
.gcs-icons i{
  font-size:1.3rem;
  cursor:pointer;
  color:var(--dark);
}
.gcs-icons i:hover{
  color:var(--accent);
}

/* ================= HAMBURGER ================= */
.gcs-icons .gcs-toggle{
  display:none !important;
  font-size:26px;
  cursor:pointer;
}

/* ================= MOBILE MENU ================= */
@media (max-width: 991px){
  .gcs-menu{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#000e21;
    flex-direction:column;
    gap:28px;
    padding:20px;
    display:none;
    box-shadow:0 20px 40px rgba(0,0,0,0.1);
  }
  .gcs-menu.active{
    display:flex;
  }
  .gcs-icons .gcs-toggle{
    display:block !important;
  }
}

/* ================= XS DEVICES ================= */
@media (max-width:575px){
  .gcs-logo{font-size:22px;}
  .gcs-icons i{font-size:1.4rem;}
  .gcs-nav{
  width: 100%;
 
}

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

}

/* ================= SM DEVICES ================= */
@media (min-width:576px) and (max-width:767px){
  .gcs-logo{font-size:24px;}
  .gcs-nav-container{ 
  padding:19px 10px;
}
}

/* ================= MD DEVICES ================= */
@media (min-width:768px) and (max-width:991px){
  .gcs-logo{font-size:26px;}
}

/* ================= LG DEVICES ================= */
@media (min-width:992px) and (max-width:1199px){
  .gcs-menu{gap:24px;}
}

/* ================= XL DEVICES ================= */
@media (min-width:1200px){
  .gcs-menu{gap:34px;}
}

/* ================= PROFILE IMAGE ================= */
.gcs-profile{
  width:38px;
  height:38px;
  border-radius:50%;
  overflow:hidden;
  cursor:pointer;
  border:2px solid transparent;
  transition:0.3s ease;
}
.gcs-profile img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.gcs-profile:hover{
  border-color:var(--accent);
}

/* XS Devices */
@media (max-width:575px){
  .gcs-profile{
    width:34px;
    height:34px;
  }

  .gcs-icons{
 
  gap:14px;
}

.gcs-logo img{
            height: 39px;
  }

  .gcs-nav-container{ 
  padding:19px 10px;
}
}

/* XL Devices */
@media (min-width:1200px){
  .gcs-profile{
    width:42px;
    height:42px;
  }
}


@media (max-width:315px){
  .gcs-profile{
    width:34px;
    height:34px;
  }

  .gcs-icons{
 
  gap:14px;
}

.gcs-logo img{
            height: 26px;
  }

  .gcs-nav-container{ 
  padding:19px 10px;
}
}