:root {
  --black: #272d37;
  --gray: #7d7987;
  --white: #fff;
  --nav_bg_color: #e7e8ee5c;
  --blue: #3b82f6;
  --blue_hover:#2563eb;
  --newsletter_section_p:#b1ccfb;
  --blog_card_blue:#437ef7;
  --footer_bg_color:#151b28;
  --pargraf:#a5acba;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
}

nav {
  background-color: var(--nav_bg_color);
}
a {
  text-decoration: none;
}
.container {
  max-width: 80%;
  margin: auto;
}
/* nav */

.transition {
  transition: color 0.5s ease;
}

.nav__link:hover {
  color: var(--blue);
}
.nav__link__i:hover {
  color: var(--blue);
}


.signup__btn {
  color: var(--blue);
  transition: 0.8s;
}
.signup__btn:hover {
  background-color: var(--blue_hover);
  color: var(--white);
}
.login__btn,
.newsletter__section__top__right button,
.footer__bottom__left button {
  background-color: var(--blue);
  color: var(--white);
  border: none;
  padding: .75rem 1rem;
  font-size: .875rem;
  border-radius: .375rem;
  cursor: pointer;
  transition: background 0.8s ease;
}
.login__btn:hover {
  background-color: var(--blue_hover);
}

.custom__line {
  border: none;
  height: 1px;
  background-color: #eaebf0;
  filter: drop-shadow(0 4px 4px rgba(231, 230, 230, 0.167));
}

/* her-base */
.hero__base {
  background-color: var(--nav_bg_color);
}
.hero__base h4,
.footer__top h4 {
  color: var(--blue);;
}

.hero__base h1 {
  line-height: 3.75rem;
  letter-spacing: -0.0625rem;
  color:  var(--black);
}
.hero__base__header2 {
  display: none;
}

/* her-base */

 /* <!-- New Newsletter Section --> */

.newsletter__section__top {
  order: 1;
  background-color:  var(--blue_hover);
}

.newsletter__section__top__left h2 {
  color: var(--white);
  letter-spacing: -0.0625rem;
}
.newsletter__section__top__left br {
  display: none;
}
.newsletter__section__top__left p,
.newsletter__section__top__right p,
.newsletter__section__bottom__left p {
  color:  var(--newsletter_section_p);
  line-height: 1.5rem;
  letter-spacing: -0.0063rem;
}



.newsletter__section__top__right input {

  font-family: "Arial", sans-serif;
}

.newsletter__section__top__right button {
  border-radius: 0rem 0.5rem 0.5rem 0rem;
}
.newsletter__section__bottom {
  order: 2;
}





.newsletter__bigimg {
  height: 48%;
  border-radius: 0.625rem;
}

.newsletter__section__bottom__left h3,
.newsletter__section__bottom__right h3 {
  color: #272d37;
  font-size: 1.3125rem;
  line-height: 1.875rem;
  letter-spacing: -0.0625rem;
}
.newsletter__section__bottom__left p,
.newsletter__section__bottom__right p,
.footer__bottom__left p {
  color: #4f5b63;
  width: 99%;
}
.newsletter__section__bottom__left span,
.newsletter__section__bottom__right span {
  color: #5f6d7e;
  line-height: 1.25rem;
  letter-spacing: -0.0063rem;
}


.newsletter__smaleimg {
  width: 45%;
  height: 60%;
  margin-right: 1.25rem;
  border-radius: 0.625rem;
}


.newsletter__section__bottom__right .none {
  display: none;
}
 /* <!-- New Newsletter Section --> */


 /* <!-- latest blog --> */
.latest__blog__posts {
  margin-top: 6.25rem;
  margin-bottom: 3.125rem;
}

.blog__title {
  color: var(--black);
  letter-spacing: -0.0625rem;
}

.blog__title__line::before {
  content: "";
  display: block;
  margin: auto;
  width: 8.625rem;
  height: .3125rem;
  background-color: #d9d9d9;
}

.blog__card span {
  color: #5f6d7e;
}

.blog__card h3 {
  color: var(--black);
}

.blog__card a {
  color: var(--blog_card_blue);

}

 /* <!-- latest blog --> */

/* footer top */
.footer__top {
  background-color: var(--blue_hover) !important;
}
.login__btn {
  background-color: var(--blog_card_blue) !important;
}
/* footer top */

/* footer bottom */
.footer__bottom {
  background-color:  var( --footer_bg_color);
}
.footer__bottom_all {
  margin-bottom: 5rem;
}

.footer__bottom__left__logo {
  width: 9.375rem;
}
.footer__bottom__left img {
  width: 100%;
}
.footer__bottom__left p {
  color: var(--pargraf);
  width: 90%;
}

.footer__bottom__left input {
  background-color: #2c3444;
  font-family: "Arial", sans-serif;
}
.footer__bottom__left button {
  border-radius: 0rem .5rem .5rem 0rem;
}


.footer__bottom__h {
  color: var(--white);
  letter-spacing: -0.0063rem;
}
.footer__bottom__a {
  color:  var(--pargraf);
  transition: 0.8s;
}
.footer__bottom__a:hover {
  color:  var(--blog_card_blue);
}
.footer__bottom__made hr {
  height: .0625rem;
  background-color: #a5acba3e;
}
.footer__bottom__made p {
  color:  var(--pargraf);
}
/* footer bottom */


/* Responsive Styles */
@media (max-width: 48rem) {
  .container {
    max-width: 90%;
  }

  
  .mobile__menu__icon {
    color:  var(--black);
  }
    .hero__base h1 {
    font-size: 2.1875rem;
    line-height: 2.75rem;
    letter-spacing: -0.125rem;
    color:  var(--black);
  }

  .newsletter__section {
    display: flex;
  }
  .newsletter__section__top {
    order: 2;
  }
  .newsletter__section__bottom {
    order: 1;
  }
  .newsletter__section__top__right .search {
    width: 80%;
  }
  .newsletter__section__bottom__all {
    display: block;
    gap: 0rem;
    justify-content: center;
  }
  .newsletter__section__bottom__left {
    width: 100%;
    margin-bottom: 1.7rem;
  }
  .newsletter__section__bottom__left img {
    width: 100%;
    height: 100%;
  }
  .newsletter__bigimg .none {
    display: block;
  }
  .newsletter__bigimg .activ {
    display: none;
  }
  .newsletter__section__bottom__right .card {
    width: 100%;
  }
  .newsletter__section__bottom__right {
    width: 100%;
    margin-left: 0rem;
  }
  .newsletter__smaleimg {
    width: 100%;
    height: 10.375rem;
  }
  .newsletter__section__bottom__right p {
    width: 100%;
  }
  .newsletter__section__bottom__right p::before {
    content: " timely deliverables for real-time. Dramatically clicks-and-mortar solutions without functional solutions you need.";
  }
  .newsletter__section__bottom__right span {
    content: "Blog theme";
  }
  .newsletter__section__top__all {
    display: block;
  }
  .newsletter__section__top__left {
    width: 100%;
  }
  .newsletter__section__top__left h2 {
    letter-spacing: 0px;
    font-size: 2.3125rem;
    width: 100%;
  }
  .newsletter__section__top__left br {
    display: block;
  }
  .newsletter__section__top__left p {
    margin: 1.5rem 0px;
  }
  .newsletter__section__top__right {
    align-items: normal;
    margin-left: 0;
    width: 100%;
  }
  .latest__blog__posts {
    margin-top: 3.125rem;
  }
  .blog__title__line::before {
    display: none;
  }
  .blog__cards__all {
    grid-template-columns: repeat(2, 1fr); /* عمودين متساويين */
  }
  .blog__cards__all .none {
    display: none;
  }
  .footer__top {
    padding: 4rem 0rem 3.125rem;
  }
  .footer__top h2 {
    width: 80%;
  }


  .footer__bottom__right .one {
    order: 1;
  }
  .footer__bottom__right .tow {
    order: 2;
  }
  .footer__bottom__right .three {
    order: 3;
  }
}

/* Responsive Styles */
@media (max-width: 376px) {
  .hero__base__header2 {
    width: 82%;
  }
  .hero__base h1 {
    font-size: 2.1875rem;
    line-height: 2.75rem;
    letter-spacing: -0.125rem;
    color:  var(--black);
  }
  .hero__base {
    padding-top: 0.125rem;
    padding-bottom: 2.125rem;
  }
  .hero__base h4 {
    margin: 1.875rem 0rem 1.875rem;
  }
  .newsletter__section__bottom__right .card {
    width: 100%;
    display: block;
  }
  .newsletter__bigimg .none {
    display: block;
    height: 10.375rem;
    border-radius: .625rem;
  }
  .newsletter__section__top__left h2 {
    width: 100%;
    font-size: 1.75rem;
    line-height: 2.25rem;
  }
  .newsletter__section__top__left p {
    width: 100%;
  }
  .newsletter__section__top__right .search {
    width: 100%;
  }
  .newsletter__section__top__right .none {
    display: none;
  }
  .newsletter__section__top__right input,
  .newsletter__section__top__right button {
    width: 100%;
    display: block;
    border-radius: .3125rem;
    margin-bottom: .9375rem;
  }
  .newsletter__section__top__all {
    padding: 6.25rem 0rem 2.25rem;
  }
  .newsletter__section__bottom {
    margin-top: 2rem;
  }
  .newsletter__section__bottom__left h3 {
    visibility: hidden;
    margin-bottom: -6.25rem;
  }
  .newsletter__section__bottom__left h3::before {
    position: relative;
    visibility: visible;
    display: flex;
    content: "Reach your users with new tools";
  }
  .latest__blog__posts {
    margin-top: 2.1875rem;
  }
  .blog__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    letter-spacing: -0.0625rem;
  }
  .blog__cards__all {
    grid-template-columns: repeat(1, 1fr); /* عمودين متساويين */
  }


  .footer__top h2 {
    width: 84%;
  }
  .footer__top__btns {
    width: 90%;
  }


  .footer__bottom__right .one {
    order: 3;
  }
  .footer__bottom__right .tow {
    order: 1;
  }
  .footer__bottom__right .three {
    order: 2;
  }
}