:root {
  --color-white: #fff;
  --color-gray-50: #ffffffcc;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
  --color-black: #141414;
  --color-black-two: black;
  --color-black-three: #161616;
  --color-black-four: #32373c;
  --color-lightGray-1: #e7e7e7;
  --color-lightGray-2: #e8e8e8;
  --color-lightGray-3: #f1f1f1;
  --color-lightGray-4: #777777;
  --color-lightGray-5: #eeeeee;
  --color-lightGray-6: #838383;
  --color-lightGray-7: #f7f7f7;
  --color-lightGray-8: #e9e9e9;
  --color-dark-blue: #334862;
  --color-dark-blue-two: #446084;
  --color-dark-blue-three: #0078d7;
  --color-dark-blue-four: #1c64f2;
  --color-yellow-one: #ffb606;
  --color-yellow-two: #cc9104;
  --color-yellow-three: #e6a303;
  --color-yellow-four: #faedcc;
  --color-yellow-five: #e9a501;
  --color-yellow-sex: #de982f;
  --color-yellow-seven: #f8ead5;
  --color-yellow-eight: #f7f7f7;
  --color-yellow-nine: #faca15;
  --color-red-one: #d26e4b;
  --color-red-two: #f1d3c8;
  --color-red-three: #dd3333;
  --color-green-one: #057a55;
  --transition-0-3: 0.3s;
  --transition-0-5: 0.5s;
}

/* Start Arabic For Beginners */
.arabic-for-beginners {
  font-family: "Roboto", sans-serif;
  padding: 50px 0;

}

.arabic-for-beginners .container {}

.arabic-for-beginners .container .title-quran-blog {
  position: relative;
  top: -15px;
  background-color: var(--color-lightGray-7);
  padding: 20px 30px 10px;
}

.arabic-for-beginners .container .title-quran-blog p {
  font-size: 17px;
  color: var(--color-lightGray-4);
}

.arabic-for-beginners .container .body-for-beginners {
  text-align: center;
  border-right: 1px solid var(--color-lightGray-5);
}

.arabic-for-beginners .container .body-for-beginners .links {}

.arabic-for-beginners .container .body-for-beginners .links a {
  font-size: 13px;
  color: var(--color-yellow-one);
  transition: var(--transition-0-3);
}

.arabic-for-beginners .container .body-for-beginners .links a:hover {
  color: var(--color-yellow-two);
}

.arabic-for-beginners .container .body-for-beginners .title-body-for-beginners {}

.arabic-for-beginners .container .body-for-beginners .title-body-for-beginners h3 {
  font-family: "Roboto Slab", serif;
  margin-top: 10px;
  margin-bottom: 30px;
  position: relative;
}

.arabic-for-beginners .container .body-for-beginners .title-body-for-beginners h3::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 3px;
  background-color: var(--color-yellow-one);
  top: 130%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.arabic-for-beginners .container .body-for-beginners .title-body-for-beginners h3 a {
  color: var(--color-black-three);
  transition: var(--transition-0-3);
}

.arabic-for-beginners .container .body-for-beginners .title-body-for-beginners h3:hover a {
  color: var(--color-yellow-two);
}

.arabic-for-beginners .container .body-for-beginners .title-body-for-beginners p {
  font-size: 13px;
  color: var(--color-lightGray-4);
}

.arabic-for-beginners .container .body-for-beginners .title-body-for-beginners p a {
  color: var(--color-yellow-one);
  transition: var(--transition-0-3);
}

.arabic-for-beginners .container .body-for-beginners .title-body-for-beginners p a:hover {
  color: var(--color-yellow-two);
}

.arabic-for-beginners .container .body-for-beginners .image {}

.arabic-for-beginners .container .body-for-beginners .image img {
  width: 100%;
  height: 700px;
  cursor: pointer;
}

@media screen and (max-width: 991px) {
  .arabic-for-beginners .container .body-for-beginners .image img {
    height: 400px;
  }
}

@media screen and (max-width: 768px) {
  .arabic-for-beginners .container .body-for-beginners .image img {
    height: 350px;
  }
}

.arabic-for-beginners .container .body-for-beginners .image img.img-2,
.arabic-for-beginners .container .body-for-beginners .image img.img-3,
.arabic-for-beginners .container .body-for-beginners .image img.img-4,
.arabic-for-beginners .container .body-for-beginners .image img.img-5,
.arabic-for-beginners .container .body-for-beginners .image img.img-6,
.arabic-for-beginners .container .body-for-beginners .image img.img-7,
.arabic-for-beginners .container .body-for-beginners .image img.img-8,
.arabic-for-beginners .container .body-for-beginners .image img.img-9,
.arabic-for-beginners .container .body-for-beginners .image img.img-10,
.arabic-for-beginners .container .body-for-beginners .image img.img-11,
.arabic-for-beginners .container .body-for-beginners .image img.img-12,
.arabic-for-beginners .container .body-for-beginners .image img.img-13,
.arabic-for-beginners .container .body-for-beginners .image img.img-14,
.arabic-for-beginners .container .body-for-beginners .image img.img-15,
.arabic-for-beginners .container .body-for-beginners .image img.img-16,
.arabic-for-beginners .container .body-for-beginners .image img.img-17,
.arabic-for-beginners .container .body-for-beginners .image img.img-18 {
  width: 95%;
}

.arabic-for-beginners .container .body-for-beginners .image img.img-9,
.arabic-for-beginners .container .body-for-beginners .image img.img-10,
.arabic-for-beginners .container .body-for-beginners .image img.img-11,
.arabic-for-beginners .container .body-for-beginners .image img.img-12,
.arabic-for-beginners .container .body-for-beginners .image img.img-13 {
  margin-bottom: 50px;

}

.arabic-for-beginners .container .body-for-beginners .image img.img-3 {
  width: 95%;
}

.arabic-for-beginners .container .body-for-beginners .text {
  margin-top: 30px;
  color: var(--color-lightGray-4);
}

.arabic-for-beginners .container .body-for-beginners .links.posted-in {
  border-top: 1px solid var(--color-lightGray-5);
  border-bottom: 2px solid var(--color-lightGray-5);
  width: 95%;
  margin-bottom: 30px;
}

.arabic-for-beginners .container .body-for-beginners .links p {
  color: var(--color-lightGray-4);
  font-size: 13px;
  margin-top: 5px;
}

.arabic-for-beginners .container .body-for-beginners .links p a {}

.arabic-for-beginners .container .body-for-beginners .btns-tutorial .btn-primary-3.continue-reading {
  width: fit-content;
  border: 2px solid var(--color-yellow-one);
  color: var(--color-yellow-one);
  font-size: 13px;
}

.arabic-for-beginners .container .body-for-beginners .btns-tutorial .btn-primary-3.continue-reading:hover {
  color: var(--color-white);
  background-color: var(--color-yellow-one);
}

.arabic-for-beginners .container .body-latest {}

.arabic-for-beginners .container .body-latest .search {}

.arabic-for-beginners .container .body-latest .search input {
  border: 1px solid #ddd;
  box-shadow: 0 0 5px #ccc;
  height: 40px;
  padding-left: 10px;
  margin-right: 7px;
  position: relative;
}

.arabic-for-beginners .container .body-latest .search input:focus {
  outline: none;
}

.arabic-for-beginners .container .body-latest .search:hover input {
  box-shadow: inset 0 -1.8em 1em 0 transparent;
}

.arabic-for-beginners .container .body-latest .search svg {
  position: absolute;
  color: var(--color-black);
  width: 20px;
  height: 40px;
  cursor: pointer;
}

.arabic-for-beginners .container .body-latest .latest .title-latest {
  margin-top: 20px;

}

.arabic-for-beginners .container .body-latest .latest .title-latest h3 {
  font-size: 20px;
  color: var(--color-lightGray-4);
  text-transform: uppercase;
  position: relative;
}

.arabic-for-beginners .container .body-latest .latest .title-latest h3::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 3px;
  background-color: var(--color-yellow-two);
  top: 130%;
}

.arabic-for-beginners .container .body-latest .latest .title-latest.title-first h3 {
  margin-bottom: 30px;
}

.arabic-for-beginners .container .body-latest .latest.one .text {
  display: inline-flex;
  margin-top: 30px;
  border-bottom: 1px solid var(--color-lightGray-5);
}

.arabic-for-beginners .container .body-latest .latest .text .image {
  margin-right: 15px;
}

.arabic-for-beginners .container .body-latest .latest.one .text .image img {
  width: 45px;
  height: 45px;
}

.arabic-for-beginners .container .body-latest .latest .text p {}

.arabic-for-beginners .container .body-latest .latest .text p.bor-button {
  margin-bottom: 13px;
}

.arabic-for-beginners .container .body-latest .latest .text p a {
  color: var(--color-black-three);
  transition: var(--transition-0-3);
}

.arabic-for-beginners .container .body-latest .latest .text p:hover a {
  color: var(--color-yellow-two);
}

.arabic-for-beginners .container .body-latest .latest .text p:not(:last-child) a.border-button {
  border-bottom: 1px solid var(--color-lightGray-5);
  display: block;
  width: 85%;
}

.arabic-for-beginners .container .body-latest .latest.five .text.tagcloud {}

.arabic-for-beginners .container .body-latest .latest.five .text.tagcloud div {
  width: 90%;
}

.arabic-for-beginners .container .body-latest .latest.five .text.tagcloud div a {
  color: var(--color-black);
}

.arabic-for-beginners .container .body-latest .latest.five .text.tagcloud div a:hover {
  background-color: var(--color-yellow-one);
  color: var(--color-white);
}

.arabic-for-beginners .container .body-latest .latest.five .text.tagcloud a.button {
  display: block;
  color: var(--color-white);
  text-align: center;
  font-size: 20px;
  margin-top: 50px;
}

.arabic-for-beginners .container .body-latest .latest.five .text.tagcloud a.button .dmca {
  background-color: var(--color-yellow-one);
  border-right: 2px solid #fff;
  border: 2px solid #fff;
  font-size: 12px;
  padding: 5px;
}

.arabic-for-beginners .container .body-latest .latest.five .text.tagcloud a.button .protected {
  background-color: var(--color-black-three);
  border-left: none;
  font-size: 12px;
  padding: 5px;
}

.arabic-for-beginners .container .body-latest .latest.two .text {
  display: inline-flex;
  margin-top: 30px;
}

.arabic-for-beginners .container .body-latest .latest.two .text.text-last {
  margin-bottom: 30px;
}

.arabic-for-beginners .container .body-latest .latest.two .text .image img {
  width: 80px;
  height: 57px;
}

.arabic-for-beginners .container .body-latest .latest.four .text .image.latest-4 img {
  width: 217px;
  height: 217px;
}

@media screen and (max-width: 991px) {
  .arabic-for-beginners .container .title-quran-blog {
    top: 0;
  }

}

@media screen and (max-width: 767px) {
  .arabic-for-beginners .container .title-quran-blog {
    top: -25px;
  }

  .arabic-for-beginners .container .col-xl-3.col-md-4.colum-right {
    display: none;
  }

}

/* End Arabic For Beginners */