a { color: #000;}
ul { list-style: none;}

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Oswald:wght@200..700&family=Quicksand:wght@300..700&display=swap');

.title-font {
  font-family: "Archivo Black", sans-serif;
  font-optical-sizing: auto;
  
  font-style: normal;
}
h1,h2,h3,h4,h5 {  font-family: "Archivo Black", sans-serif; font-weight: bold; letter-spacing: -1px;}
.nav-link { font-weight: 500;}
p { font-size: 20px;}
/* header-*/
.main-div { padding: 0px 50px; display: flex; justify-content: space-between;}
.main-header { border-bottom: 5px solid #000; font-size: 1rem; margin-bottom: 16px; line-height: 1.4;}
.top-header-right ul { display: flex; list-style: none; justify-content: space-between; margin-bottom: 0;}
.top-header-right ul li { border-right: 1px solid rgb(238, 238, 238); padding: 0 15px; margin: -10px 0;}
.top-header-right ul li:last-child { border: none;} 
.top-header-right ul li a { line-height: 53px;}
.main-container { max-width: 100%; margin: auto; width: 100%; }
.top-header { padding: 7px 50px; border-bottom: 1px solid rgb(238, 238, 238); display: flex; justify-content: space-between;}
.top-header img { width: 165px;  } .M-logo img { width: 195px;  }
.navbar-toggler, .search-box { display: none;}
.navbar-toggler:focus, .navbar-toggler { box-shadow: none; border: none; }


/*--nav--*/
nav{
  left: 0;
  width: 100%;
  height: 100%;
  height: 70px;
  z-index: 99;
}
nav .navbar{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  padding: 0 50px;
}
.navbar .logo a{
  font-size: 30px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
nav .navbar .nav-links{
  line-height: 70px;
  height: 100%;
}
nav .navbar .links{
  display: flex;
}
nav .navbar .links li{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px;
}
nav .navbar .links li a{
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
}
.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow{
  transform: rotate(180deg);
  }

nav .navbar .links li .arrow{
  height: 100%;
  width: 22px;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  color: #000;
  transition: all 0.3s ease;
}
nav .navbar .links li .sub-menu{
  position: absolute;
  top: 70px; padding-left: 0    ;
  left: 0;
  line-height: 40px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
}
nav .navbar .links li:hover .htmlCss-sub-menu,
nav .navbar .links li:hover .js-sub-menu{
  display: block;
}
.navbar .links li .sub-menu li{
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.navbar .links li .sub-menu a{
  color: #000;
  font-size: 15px;
  font-weight: 500;
}
.navbar .links li .sub-menu .more-arrow{
  line-height: 40px;
}
.navbar .links li .htmlCss-more-sub-menu{
  /* line-height: 40px; */
}
.navbar .links li .sub-menu .more-sub-menu{
  position: absolute;
  top: 0;
  left: 100%;
  border-radius: 0 4px 4px 4px;
  z-index: 1;
  display: none;
}
.links li .sub-menu .more:hover .more-sub-menu{
  display: block;
}
.navbar .search-box{
  position: relative;
   height: 40px;
  width: 100%;
}
.navbar .search-box .form-control { height: 35px; margin-top: 10px; }
.navbar .search-box i{
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.navbar .search-box .input-box{
  position: absolute;
  right: calc(100% - 40px);
  top: 80px;
  height: 60px;
  width: 300px;
  background: #3E8DA8;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}
.navbar.showInput .search-box .input-box{
  top: 65px;
  opacity: 1;
  pointer-events: auto;
  background: #3E8DA8;
}
.search-box .input-box::before{
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  background: #3E8DA8;
  right: 10px;
  top: -6px;
  transform: rotate(45deg);
}
.search-box .input-box input{
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  height: 35px;
  width: 280px;
  outline: none;
  padding: 0 15px;
  font-size: 16px;
  border: none;
}
.navbar .nav-links .sidebar-logo{
  display: none;
}
.navbar .bx-menu{
  display: none;
}

/*--mobile-menu--*/

.menu{
    width:300px; display: none;
    margin:15px auto;
    list-style:none; padding-left: 0;
}

.dropdown{
    margin-bottom:10px;
}

.dropdown-btn{
    width:100%;
    padding:0px;
    border:none;
    background:#fff;
    color:#000;
    cursor:pointer;
    font-size:18px;
    font-weight: 500;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.arrow{
    transition:0.3s ease; transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/* Rotate Arrow */
.arrow.rotate{
    transform:rotate(225deg);
}

.submenu{
    display:none;
    list-style:none;
    background:#fff; padding: 12px;
}

.submenu.show{
    display:block;
}

.submenu li a{
    display:block;
    padding:0px;
    text-decoration:none;
    color:#333;
}

.submenu li a:hover{
    background:#ddd;
}

@media (max-width:920px) {
  nav .navbar{
    max-width: 100%;
    padding: 0;
  }

  nav .navbar .links li{
    padding: 0;
    white-space: nowrap;
  }
  nav .navbar .links li a{
    font-size: 15px;
  }
  .logo img { margin-left: 10px;}
}
@media (max-width:800px){
    .close { color: #000; font-size: 30px; font-weight: bold; margin-top: -10px;}
 
  .navbar .bx-menu{
    display: block;
  }
  nav .navbar .nav-links{
    position: fixed;
    top: 0;
    left: -100%;
    display: block;
    /* max-width: 270px; */
    width: 100%;
    background:  #fff;
    line-height: 40px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    z-index: 1000;
  }
  .navbar .nav-links .sidebar-logo{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-logo .logo-name{
    font-size: 25px;
    color: #fff;
  }
    .sidebar-logo  i,
    .navbar .bx-menu{
      font-size: 25px;
      color: #000;
    }
  nav .navbar .links{
    display: none; padding-left: 5px;
    margin-top: 20px;
  }
  nav .navbar .links li .arrow{
    line-height: 40px; float: right;
  }
nav .navbar .links li{
    display: block;
  }
nav .navbar .links li .sub-menu{
  position: relative;
  top: 0;
  box-shadow: none;
  display: none;
}
nav .navbar .links li .sub-menu li{
  border-bottom: none;

}
.navbar .links li .sub-menu .more-sub-menu{
  display: none;
  position: relative;
  left: 0;
}
.navbar .links li .sub-menu .more-sub-menu li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow{
  transform: rotate(0deg);
  }
  .navbar .links li .sub-menu .more-sub-menu{
    display: none;
  }
  .navbar .links li .sub-menu .more span{
    /* background: red; */
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  }

  .links li .sub-menu .more:hover .more-sub-menu{
    display: none;
  }
  nav .navbar .links li:hover .htmlCss-sub-menu,
  nav .navbar .links li:hover .js-sub-menu{
    display: none;
  }
.navbar .nav-links.show1 .links .htmlCss-sub-menu,
  .navbar .nav-links.show3 .links .js-sub-menu,
  .navbar .nav-links.show2 .links .more .more-sub-menu{
      display: block;
    }
    .navbar .nav-links.show1 .links .htmlcss-arrow,
    .navbar .nav-links.show3 .links .js-arrow{
        transform: rotate(180deg);
}
    .navbar .nav-links.show2 .links .more-arrow{
      transform: rotate(90deg);
    }
}
@media (max-width:370px){
  nav .navbar .nav-links{
  max-width: 100%;
} 
}
/*--hearo-section--*/
.row-reverse { flex-direction: row-reverse; overflow: hidden;}
.hero-section { display:flex; flex-direction:row-reverse; }
.hero-image { flex: 1 1 50%; max-height: 360px; }
.hero-image img { object-fit: cover;}
.hero-text { max-width: calc(40% + 8px); background-color: #29303c; padding: 25px; color:#fff; }

.hero-text h1 { line-height: 32px; }
.hero-text h1 a { color:#fff; font-size: 2rem;  }

.d-MD-block { display: none;}
.navbar-toggler { padding-left: 0;}

.social-share ul { display: flex; gap: 15px;}
.social-share ul li { border-radius: 50%; height: 44px; width: 44px; border-radius: 50px; border: 1px solid #000;
 }
/* feature-row */

.new-items { border-bottom: 1px solid #d5d5d5; padding-bottom:16px; margin-bottom:0px; }
.u-full-height { height: 100%;} .card__title { margin: 10px 0; font-weight: 700; font-size: 20px; line-height: 25px;}
.c-card__image {aspect-ratio:auto; margin-top: 20px;}
.c-card__image img { max-width: 100%;}

.btn-gap { display: flex; gap: 5px;}
a.light-btn {
     border: 1px solid #069; color: #069; padding: 7px 10px; width: 100%; text-align: center; text-decoration: none;
}
a.light-btn:hover { background-color: #069; color: #fff; }
a.dark-btn { background-color: #069; color: #fff; padding: 7px 10px; width: 100%; text-align: center; text-decoration: none; border: 1px solid #069;}
a.dark-btn:hover { background-color: transparent; color: #069;}

.c-section-heading { border-top: 5px solid #000;  border-bottom: 1px solid #000;
        padding-top: 8px;
        padding-bottom: 8px;
        margin-bottom: 24px;
        line-height: 1.4;}
.c-section-heading h2 { font-size: min(max(1.5rem,3vw),1.7rem);}
.c-section-heading__icon { fill: #000}

.major-new { grid-column: 1/3; grid-row: 1/ -1; padding-bottom: 0; display: flex;}
.major-new a { color: #fff;}
.major-new .c-card__image { margin-top: 0px;}
.dark-card { background-color: #29303c; color: #e3e4e5; border-width: 0;}
.dark-card .card__body { padding: 20px; }

.light-card { background-color: #fff; border-width: 0;}
.light-card .card__body { padding: 20px 0; }
.major-new .light-card  a { color: #29303c; }
/*--footer--*/
footer { background-color: #01324b; padding: 20px 50px;}
footer .footer-title { color: #fff; font-weight: 600; font-size: 21px; margin-bottom: 10px;}
footer ul { padding: 0px;}
footer ul li a { color: #fff; line-height: 30px; }
footer hr { border: 1px solid #fff; opacity: 1;}
.policy-tab ul li { display: inline-block; padding-right: 20px;}
.policy-tab ul li a:hover { color: #e9e9e9;}
.footer-icon img { width: 180px; margin-bottom: 10px;}
@media (min-width:768px) { 
    .feature-row { display: grid; grid-column-gap: 16px; grid-template-columns: repeat(5, 1fr);}
}
    
@media (max-width:1098px) {
    .top-header, .main-div { padding:10px 15px; }
    .hero-text h1 { line-height: 24px; }
    .hero-text h1 a { font-size: min(max(1.5rem,3vw),2rem);  line-height: min(max(1.6rem, 3vw), 2.25rem);}
}
@media (max-width:768px) {
    .row-reverse { display: block;} .hero-text { max-width: 100%;}
    .feature-row { grid-template-columns:repeat(3, 1fr); } .c-card__image { margin-top: 0px;}
    nav .navbar .links li a { font-size: 18px; }
    .menu, .search-box { display: block;}
}

@media (max-width:680px) {
    .new-items article { display: flex; margin-top: 10px;}
    .hero-section .main-div { padding: 10px 0px 0px;} 
    .card__body { width: 100%; margin-left: 15px;}
    .card__title { margin-top: 0px; font-size: 18px;}
    .c-card__image { max-width: calc(31% + 2px); margin-top: 8px;}
    .card__body { max-width: calc(69% + 8px);} 
    .add-items article { display: block; background-color: #eee;}
    .article-description > span { font-weight: 600; font-size: 16px; display: none;}
    .article-description p { display: none; }
    .c-meta__type { font-size: 16px; } .light-card .card__body { margin-left:0; }
    .main-div h2 { font-size: 22px; } .light-card h1 { font-size: 23px;}
    .dark-card, .light-card { display: block; } .light-card p { font-weight: 500; letter-spacing: 0.5px;
        font-size: 20px; font-family: Harding,Palatino,serif;}
    .dark-card { margin-bottom: 20px;}
    .dark-card article, .light-card article { display: block; flex-direction: row-reverse;}
    .dark-card .card__body .light-card .card__body { padding: 20px;}
    .c-section-heading { margin-bottom: 0px;}
    .dark-card .card__body, .light-card .card__body { max-width: 100%;}
    .d-None { display: none;} .navbar-toggler { border: none;}
    .d-MD-block, .navbar-toggler { display: block;}
    /* .mob-nav ul, .mob-nav ul li  { display: inline-block;} */
    .nav-link { padding-right: 10px; } .navbar  { padding: 0;} footer { padding: 20px 20px;}
    .major-new .card__body { margin-left: 0px; }
    .add-items article  .c-card__image, .add-items article .card__body, .dark-card .c-card__image, .light-card .c-card__image { max-width: 100%;} .M-logo img { margin-left: 40px; }
    .main-header { position: sticky; top: 0; background-color: #fff;} .main-header .main-div { background-color: #fff; }
    /* nav{ position: fixed; top: 0; } */
    .search-box { margin-top: 20px; }
    .search-box input { font-weight: 500; } 
    .search-box .form-inline { position: relative;}
    .search-box .search { position: absolute; right: 0px; top: 6px;}
    .tranding-artical { padding-bottom: 5px;}
    .tranding-artical article { margin-top: 0; }
 }