@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

@font-face {
  font-family: "shurjo";
  src: url(../fonts/Shurjo\ ANSI\ Regular.ttf);
}

/* 
=== VARIABLES ===
 */

:root {
  --space0_2: 0.1111rem;
  --space0_3: 0.167rem;
  --space0_4: 0.222rem;
  --space0_5: 0.2777rem;
  --space0_6: 0.333rem;
  --space0_8: 0.4444rem;
  --space1_0: 0.55556rem;
  --space1_2: 0.667rem;
  --space1_4: 0.7778rem;
  --space1_6: 0.8889rem;
  --space1_8: 1rem;
  --space2_0: 1.11rem;
  --space2_2: 1.222rem;
  --space2_4: 1.333rem;
  --space2_6: 1.444rem;
  --space2_8: 1.556rem;
  --space3_0: 1.667rem;
  --space3_2: 1.777rem;
  --space3_4: 1.889rem;
  --space3_6: 2rem;
  --space3_8: 2.111rem;
  --space4_0: 2.222rem;
  --space4_2: 2.333rem;
  --space4_4: 2.444rem;
  --space4_8: 2.6667rem;
  --space5_0: 2.778rem;
  --space5_2: 2.888rem;
  --space5_6: 3.1111rem;
  --space6_0: 3.333rem;
  --space6_2: 3.444rem;
  --space6_4: 3.556rem;
  --space7_2: 4rem;
  --space8_0: 4.444rem;
  --space8_6: 4.778rem;
  --space8_8: 4.889rem;
  --space9_2: 5.111rem;
  --space9_4: 5.22rem;
  --space1_1_2: 6.222rem;
  --behind: -1;
  --default: 0;
  --image-overlay: 1;
  --z-index-3: 3;
  --header: 5;
  --header-menu-overlay: 6;
  --popup: 8;
  --edition: 10;
  --loader: 100;
  --search-filter-popup: 101;
  --header-overlay: 1000;
  --over-the-top: 9999;
  --top-overlay: 10000;
  --rgbBlack: 0, 0, 0;
  --rgbWhite: 255, 255, 255;
  --greyish-brown: #404040;
  --white: #fff;
  --black: #121212;
  --multisite-hover: #fff6;
  --orange: #ffb300;
  --very-light-pink: #e2e2e2;
  --gray: #929292;
  --wild-sand: #f4f4f4;
  --scorpion: #575757;
  --silver: #bebebe;
  --mercury: #e9e9e9;
  --alto: #e0e0e0;
  --stratos: #001246;
  --roseWhite: #fff7f7;
  --aqua-haze: #f2f5f8;
  --guardsman-red: #d60000;
  --semi-black: #323232;
  --lochmara-blue: #0573e6;
  --lochmara-blue-hover-bg: #f5fafe;
  --search-button-hover: #007bbdb3;
  --nagorik-navbar: #34b8b5;
  --azure-radiance: #0573e64c;
  --ship-cove: #7797b7;
  --boulder: #757575;
  --mine-shaft: #2b2b2b;
  --fallback-image-bg: #f1f1f1;
  --label-color: #8b8b8b;
  --gallery: #eee;
  --gallery-scrollbar: #86858575;
  --light-grey: #595959;
  --dark-grey: #ababab;
  --section-name: #9e9e9e;
  --background-grey: #f6f6f6;
  --dark-border-color: #ccc;
  --headline-number-gray: #949494;
  --card-background: #333;
  --hover-gray: #f7f7f7;
  --story-summary: #707070;
  --tag-color: #6f6f6f;
  --tag-bgColor: #e5e5e5;
  --dove-gray: #616161;
  --tundora: #424242;
  --olivedrab: #6b8e23;
  --key-highlight-time: #3c3c3c;
  --orange-peel: #ff9800;
  --navy-blue: #1a237e;
  --dark-cyan: #004a56;
  --kishoralo-section-yellow: #ffc107;
  --kishoralo-section-red: #c82641;
  --protichinta-section-cream: #fbf6de;
  --shadow-white: #edddcb;
  --dark-coral: #a74737;
  --ad-bg-color: #f3f3f3;
  --trust-red: #e50019;
  --pattens-blue: #c8dff3;
  --alabaster: #f9f9f9;
  --blurb-bg: #fff8e1;
  --black08: #00000014;
  --black12: #0000001f;
  --black15: #00000026;
  --black20: #00000033;
  --black24: #0000003d;
  --black25: #00000040;
  --black30: #0000004d;
  --black38: #00000061;
  --black42: #0000006b;
  --black56: #0000008f;
  --black47: #0000007a;
  --black60: #00000099;
  --black68: #000000ad;
  --black87: #000000de;
  --white87: #ffffffde;
  --white70: #ffffffb3;
  --white60: #ffffff99;
  --white25: #ffffff40;
  --white30: #ffffff4d;
  --white38: #ffffff61;
  --white50: #ffffff80;
  --flagshadow: #00000080;
  --light-red: #ffe8e7;
  --version-bg: #fbe9e7;
  --first-bigfact-color: #ee5630;
  --second-bigfact-color: #2295cc;
  --third-bigfact-color: #65af4c;
  --fourth-bigfact-color: #7b3b93;
  --datepicker-text-color: #49454f;
  --amber: #ffc107;
  --sazerac: #fff3e0;
  --sazerac-50: #fff3e080;
  --blaze-orange: #ff6f00;
  --hawkes-blue: #e3f2fd;
  --hawkes-blue-50: #e3f2fd80;
  --cerulean: #03a9f4;
  --tory-blue: #0d47a1;
  --porcelain: #eceff1;
  --porcelain-50: #eceff180;
  --lynch: #607d8b;
  --outer-space: #263238;
  --panache: #e8f5e9;
  --panache-50: #e8f5e980;
  --fruit-salad: #4caf50;
  --parsley: #1b5e20;
  --snuff: #f3e5f5;
  --snuff-50: #f3e5f580;
  --seance: #9c27b0;
  --persian-indigo: #9c27b0;
  --french-pass: #b9ddff;
  --linen: #fbe9e7;
  --linen-50: #fbe9e780;
  --red-orange: #ff5722;
  --tia-maria: #bf360c;
  --guardsman-light: #d600003d;
  --prayer-bg: #eefef4;
  --fun-green: #00722d;
  --emerald: #4ac97c;
  --aero-blue: #b9fcd3;
  --pastel-green: #70e9a0;
  --silver-sand: #c5c6c7;
  --romantic: #ffcabb;
  --fair-pink: #ffe8e7;
  --placeholder: #428bca;
  --facebook-btn-color: #2374f2;
  --google-btn-color: #4285f4;
  --title-color: var(--black87);
  --subtitle-after: var(--light-grey);
  --content-color: var(--greyish-brown);
  --excerpt-color: var(--black68);
  --background-color: var(--white);
  --meta-color: var(--gray);
  --border-color: var(--black12);
  --accent-color: var(--lochmara-blue);
  --divider-87: var(--black87);
  --divider-38: var(--black38);
  --border: var(--border1-0_12);
  --nav-login-border: var(--border1-0_38);
  --border1-0_12: 1px solid var(--black12);
  --border1-0_20: 1px solid var(--black20);
  --border1-0_38: 1px solid var(--black38);
  --border1-0_42: 1px solid var(--black42);
  --border1-blue: 1px solid var(--lochmara-blue);
  --border1-red: 1px solid var(--guardsman-red);
  --border1-light-pink: 1px solid var(--very-light-pink);
  --border1-white: 1px solid var(--white);
  --border1-alto: 1px solid var(--alto);
  --border2-1_00: 2px solid var(--black);
  --border2-0_12: 2px solid var(--black12);
  --border2-0_38: 2px solid var(--black38);
  --border2-blue: 2px solid var(--lochmara-blue);
  --border2-red: 2px solid var(--guardsman-red);
  --border2-orange: 2px solid var(--orange);
  --border1-0_70-white: 1px solid var(--white70);
  --smallest: calc(
    1rem / var(--ratio) / var(--ratio) / var(--ratio) / var(--ratio) /
      var(--ratio)
  );
  --fs-12: calc(
    1rem / var(--ratio) / var(--ratio) / var(--ratio) / var(--ratio)
  );
  --fs-13: calc(1rem / var(--ratio) / var(--ratio) / var(--ratio));
  --fs-14_5: calc(1rem / var(--ratio) / var(--ratio));
  --fs-16: calc(1rem / var(--ratio));
  --fs-18: 1rem;
  --fs-20: calc(1rem * var(--ratio));
  --fs-22: calc(1rem * var(--ratio) * var(--ratio));
  --fs-25: calc(1rem * var(--ratio) * var(--ratio) * var(--ratio));
  --fs-27_5: calc(
    1rem * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)
  );
  --fs-30_5: calc(
    1rem * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) *
      var(--ratio)
  );
  --fs-34: calc(
    1rem * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) *
      var(--ratio) * var(--ratio)
  );
  --fs-38: calc(
    1rem * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) *
      var(--ratio) * var(--ratio) * var(--ratio)
  );
  --fs-42: calc(
    1rem * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) *
      var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)
  );
  --fs-47: calc(
    1rem * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) *
      var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)
  );
  --fs-52: calc(
    1rem * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) *
      var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) *
      var(--ratio) * var(--ratio)
  );
  --fs-58: calc(
    1rem * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) *
      var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) *
      var(--ratio) * var(--ratio) * var(--ratio)
  );
  --regular: 400;
  --bold: 700;
  --static-font-1: "Shurjo", var(--fallback);
  --static-font-2: "Roboto", var(--fallback);
  --trans-duration: 0.15s;
  --trans-duration-300: 0.3s;
  --trans-duration-1s: 1s;
  --arial-font-family: Arial, Helvetica, Roboto, sans-serif;
  --opacity-100: 1;
  --opacity-94: 0.94;
  --opactity-80: 0.8;
  --opacity-70: 0.7;
  --opacity-60: 0.6;
  --opacity-50: 0.5;
  --opacity-40: 0.4;
  --opacity-38: 0.38;
}

/* 
=== RESET PROPORTY ===
 */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

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

body {
  font-family: "shurjo";
}

/* 
=== REUSABLE CODE ===
 */

/* header section */

/* top header */
.topHeader {
  padding: 1rem 0;
  border-bottom: 1px solid #dadada;
}
a {
  display: inline-block;
  text-decoration: none;
}
.topHeader .toggleBtn {
  display: none;
  background-color: transparent;
  border: 0;
  color: #000;
  font-size: 1.2rem;
}

.topHeader .navContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topHeader .headerBlog {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.topHeader .headerBlog .blog {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.topHeader .headerBlog .blog .blogContent .text {
  margin-bottom: 0;
  display: inline-block;
  color: #000;
  text-decoration: none;
  font-size: 0.85rem;
}

.topHeader .headerBlog .blog .blogContent .text:hover {
  color: #0059ff;
}

.topHeader .headerBlog .blog .blogContent .text i {
  color: orangered;
}

.topHeader .headerBlog .blog .blogImage img {
  height: 60px;
  width: 60px;
  object-fit: cover;
}

/* main navbar */

.mainNavbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 3rem;
  border-bottom: 2px solid #dadada;
}

.mainToggle {
  display: block !important;
}

.mainNavbar .nav .nav-link {
  color: #000;
}

.mainNavbar .nav .nav-link:hover {
  color: blue;
}

.mainNavbar .navAction {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.mainNavbar .navAction .navLink {
  display: inline-block;
  gap: 1rem;
  text-decoration: none;
  color: #000;
  border-right: 1px solid #dadada;
  padding-right: 0.5rem;
}

.mainNavbar .navAction .navLink.engLink {
  font-family: "Roboto", sans-serif;
}

.mainNavbar .navAction .navLink i {
  margin-right: 0.5rem;
}

/* main post */

.postSection {
  margin-block: 3rem;
  border-bottom: 1px solid #dadada;
  padding-bottom: 1rem;
}

.postSection .post {
  padding: 1.5rem;
}

.postSection .post .postHeading .subtitle {
  display: inline-block;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.postSection .post .postHeading .title {
  font-size: 2rem;
  font-weight: 700;
}

.postSection .post .postHeading .writer {
  font-size: 1.1rem;
}

.postSection .post .postHeading .postAction {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block: 1.5rem;
  border-bottom: 1px solid #dadada;
}

.postSection .post .postHeading .postAction .social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.postSection .post .postHeading .postAction .social .socialIcon i {
  font-size: 1.4rem;
  color: #000;
}

.postSection .post .postHeading .postAction .social .socialIcon.fb i {
  color: rgb(0, 110, 255);
}

.postSection .post .postHeading .postAction .social .socialIcon.share i {
  color: crimson;
}

.postSection .post .postHeading .postAction .date {
  font-size: 0.85rem;
  color: #686868;
}

.postSection .post .postImage img {
  width: 100%;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.postSection .post .postImage {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #dadada;
}

.postSection .post .postImage .text {
  font-size: 0.85rem;
  color: #5e5e5e;
}

.postSection .post .postImage .text.webText {
  font-family: "Roboto", sans-serif;
}

.postSection .post .postContent {
  padding-bottom: 1rem;
  /* border-bottom: 1px solid #dadada; */
}

.postSection .post .postTabs {
  margin-top: 2rem;
}

.postSection .post .postContent .ads {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block: 2rem;
  flex-direction: column;
}

.postSection .post .postContent .textTitle {
  font-weight: 700;
  font-size: 1.2rem;
}

.postSection .post .postContent .ads .text {
  font-size: 0.85rem;
  margin-bottom: 0;
  color: #5e5e5e;
}

.postSection .post .postContent .ads img {
  display: block;
}

.postSection .post .postTabs .title {
  font-size: 1.2rem;
}

.postSection .post .postTabs .tabButtons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.postSection .post .postTabs .tabButtons .tabBtn {
  display: inline-block;
  padding: 1rem 1.85rem;
  background-color: #f3f3f3;
  text-decoration: none;
  color: #0066ff;
  border-radius: 0.5rem;
}

.postSection .post .postContent .text {
  font-size: 1rem;
  line-height: 2;
}

.postSection .postSide .mainTitle {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  border-bottom: 2px solid #000;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
}

.postSection .postSide {
  padding: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dadada;
  margin-bottom: 1.5rem;
}

.postSection .postSide .item .title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: inline-block;
  text-decoration: none;
  color: #000;
}

.postSection .postSide .item .title:hover {
  color: blue;
}

.postSection .postSide .item {
  display: flex;
  gap: 1rem;
  align-items: center;
  border-bottom: 1px solid #dadada;
  margin-bottom: 1rem;
}

.postSection .postSide .item .text {
  font-size: 0.85rem;
  color: #5e5e5e;
  display: block;
  text-decoration: none;
}

/* Suggest Post Section */

.suggestPost {
  padding-block: 2rem;
  border-block: 1px solid #dadada;
}

.suggestPost .item .itemImage img {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  transition: all 0.4s ease-in-out;
}

.suggestPost .item .itemImage img:hover {
  transform: scale(1.1);
}

.suggestPost .item .itemContent .title {
  font-size: 1.2rem;
  display: inline-block;
  text-decoration: none;
  color: #000;
  font-weight: 700;
}

/* footer section */

.footerSection {
  margin-top: 50px;
}

.footerSection .footerBrand img {
  max-width: 160px;
  margin-bottom: 1rem;
}

.footerSection .footerNav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #dadada;
  padding-bottom: 1rem;
}

.footerSection .footerNav .footerLink {
  display: inline-block;
  text-decoration: none;
  color: #000;
}

.footerSection .footerNav .footerLink:hover {
  color: #0066ff;
}

.footerSection .footerSocial .socailMedia .title {
  margin-bottom: 0;
  font-size: 1rem;
  color: #5e5e5e;
}

.footerSection .footerSocial .socailMedia {
  padding-bottom: 1rem;
  border-bottom: 1px solid #dadada;
  margin-bottom: 1rem;
}

.footerSection .footerSocial .socailMedia .icons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.footerSection .footerSocial .socailMedia .icons .icon {
  display: inline-block;
  font-size: 1.3rem;
  color: #000;
}

.footerSection .footerSocial .socailMedia .icons .icon:hover {
  color: #0066ff;
}

.footerSection .copy {
  text-align: center;
}

.footerSection .copy .text {
  font-size: 0.85rem;
  color: #5e5e5e;
}

/* POST REVIEW SECTION */

.postReview {
  background-color: #dc143c10;
  padding: 2rem;
  border-top: 4px solid crimson;
  margin-top: 3rem;
}

.postReview .reaction {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

.postReview .reaction .react {
  text-align: center;
}

.postReview .reaction .react .icon img {
  max-width: 60px;
  height: 60px;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease-in-out;
}

.postReview .reaction .react .icon img:hover {
  transform: scale(1.1);
}

.postReview .reaction .react .value {
  color: #5e5e5e;
  font-family: "Roboto", sans-serif;
}

.postReview .reaction .react .value i {
  margin-right: 0.3rem;
  color: #ffbb00;
  font-size: 0.75rem;
}

.postReview .review .heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid crimson;
}

.postReview .review .heading .title {
  font-size: 1.1rem;
}

.postReview .review .heading .headingLink {
  display: inline-block;
  text-decoration: none;
  color: crimson;
}

.postReview .review .reviewAction {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.postReview .review .reviewAction .dropdown .dropdown-toggle {
  background-color: transparent;
  color: #5e5e5e;
  border-color: crimson;
  padding: 0.55rem 1.65rem;
}

.postReview .review .reviewAction .shareIcon {
  display: inline-block;
  color: #000;
  text-decoration: none;
}

.postReview .review .reviewAction .shareIcon i {
  color: crimson;
  margin-right: 0.3rem;
}

.postReview .reviewForm {
  margin-block: 2rem;
}

.postReview .reviewForm .control {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.postReview .reviewForm .control .userImage img {
  max-width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}

.postReview .reviewForm .control .form-control {
  background-color: transparent;
  padding: 0.7rem 1.85rem;
  border: 2px solid #bbbbbb;
}

.postReview .reviewForm .sendBtn {
  display: inline-block;
  padding: 0.65rem 1.55rem;
  background-color: #1975ff40;
  border: 0;
  color: #fff;
  border-radius: 0.5rem;
  float: right;
  margin-bottom: 2rem;
  text-decoration: none;
}

.postReview .reviewComment {
  margin-top: 3rem;
}

.postReview .comment {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.postReview .comment .commentImage img {
  max-width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}

.postReview .comment .commentContent .title {
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.postReview .comment .commentContent .action {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.postReview .comment .commentContent .action .shareIcon {
  display: inline-block;
  text-decoration: none;
  color: #000;
  font-size: 0.85rem;
}

.postReview .comment .commentContent .action .shareIcon i {
  color: crimson;
  margin-right: 0.3rem;
}

.bigAds {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-block: 3rem;
}

.bigAds .text {
  font-size: 0.85rem;
  color: #5e5e5e;
}