/* ------------------------------------------------------------------
[Style Layout Sheet For "Clay News App"]
*  Basic Common CSS for HTML Tags(like:- html, body, div, span, p, a, h1 and many others)
*  Fonts

1. Body
2. Preloader
2.  PreLoader CSS 
3.  Login Page CSS
4.  Forgot Password Page CSS
5   Walkthrough Pages Css 
6.  Select Intrest Page CSS
7.  Startpage Css
8.  Categories Pages Css
9.  Videos Pages Css
10. Categories Pages Css
11. Articles Details Css
12. Article List Page Css
13. Author Page Css
14. Author Profile Css
15. Settings Page Css
16. Language Page Css
17. Premiun Pass Page
18. Contact Page Css 
19. All Pages Css
20. Settings RTL Page Css
21. Customize Notifications Css
22. Search Page Css
23. Build My Feed 1 Pages
24. Story News Page Css
25. Build My Feed 2 Pages Css 
26. Weather Screen Page Css
27. Home Page Weather Page Css
28. Video Player Page Css
29. Live Reporting Page Css
30. Left Navigation Page Css
31. Dark Mode Css Start
32. Change Button, Text, Icon  Color Css
	32.1) Yellow Color css
	32.2) Orchid Color css
	32.3) Chino Color css 
	33.4) Mandy Color css
------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");

html,
body,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
}

html {
  width: 100%;
  height: 100%;
}

a,
a:hover {
  text-decoration: none;
  outline: 0;
}

img {
  max-width: 100%;
  -webkit-user-drag: none;
}

button:focus {
  outline: 0;
}
body {
  font-family: "Quicksand", sans-serif !important;
  background-color: #fff;
  width: 100%;
  color: #000;
  font-size: 14px;
  margin: 0;
  height: 100%;
}
::placeholder {
  color: #000 !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 18px;
}
@font-face {
  font-family: "icomoon";
  src: url("fonts/icomoon.eot?zduuag");
  src: url("fonts/icomoon.eot?zduuag#iefix") format("embedded-opentype"),
    url("fonts/icomoon.ttf?zduuag") format("truetype"),
    url("fonts/icomoon.woff?zduuag") format("woff"),
    url("fonts/icomoon.svg?zduuag#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  font-family: "icomoon" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-cloud_alone1:before {
  content: "\e9c3";
  color: #fff;
}
.icon-heart-2b1:before {
  content: "\e9c4";
  color: #949aa9;
}
.icon-heart-2b:before {
  content: "\e9c1";
  color: #949aa9;
}
.icon-arrow_up_down:before {
  content: "\e9b6";
  color: #949aa9;
}
.icon-cloud_alone:before {
  content: "\e9b7";
  color: #fff;
}
.icon-facebook .path1:before {
  content: "\e9bf";
  color: rgb(24, 119, 242);
}
.icon-facebook .path2:before {
  content: "\e9c0";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-facebook2 .path1:before {
  content: "\e9b8";
  color: rgb(24, 119, 242);
}
.icon-facebook2 .path2:before {
  content: "\e9b9";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-google .path1:before {
  content: "\e9ba";
  color: rgb(235, 65, 52);
}
.icon-google .path2:before {
  content: "\e9bb";
  margin-left: -1em;
  color: rgb(52, 170, 81);
}
.icon-google .path3:before {
  content: "\e9bc";
  margin-left: -1em;
  color: rgb(251, 190, 4);
}
.icon-google .path4:before {
  content: "\e9bd";
  margin-left: -1em;
  color: rgb(65, 134, 247);
}
.icon-all-news:before {
  content: "\e900";
  color: #949aa9;
}
.icon-all-news-white:before {
  content: "\e901";
  color: #fff;
}
.icon-arrow-big:before {
  content: "\e902";
  color: #007aff;
}
.icon-arrow-big2:before {
  content: "\e903";
  color: #949aa9;
}
.icon-arrow-dowm:before {
  content: "\e904";
  color: #949aa9;
}
.icon-arrow-down2:before {
  content: "\e905";
  color: #007aff;
}
.icon-arrow-left:before {
  content: "\e906";
  color: #949aa9;
}
.icon-arrow-right:before {
  content: "\e907";
  color: #949aa9;
}
.icon-authors:before {
  content: "\e908";
}
.icon-bell:before {
  content: "\e909";
  color: #5b5b5b;
}
.icon-bookmark:before {
  content: "\e90a";
  color: #949aa9;
}
.icon-categories:before {
  content: "\e90b";
}
.icon-categories-selected:before {
  content: "\e90c";
  color: #007aff;
}
.icon-categories-white:before {
  content: "\e90d";
  color: #fff;
}
.icon-chat:before {
  content: "\e90e";
  color: #949aa9;
}
.icon-checkmark:before {
  content: "\e90f";
}
.icon-chekmark-selected .path1:before {
  content: "\e910";
  color: rgb(150, 190, 79);
}
.icon-chekmark-selected .path2:before {
  content: "\e911";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-circle-control:before {
  content: "\e912";
  color: #007aff;
}
.icon-close-dark:before {
  content: "\e913";
}
.icon-close-dark-small:before {
  content: "\e914";
}
.icon-close-dark-white:before {
  content: "\e915";
  color: #fff;
}
.icon-close-white:before {
  content: "\e916";
  color: #fff;
}
.icon-cloud-rain:before {
  content: "\e917";
}
.icon-combo-small .path1:before {
  content: "\e918";
  color: rgb(0, 0, 0);
}
.icon-combo-small .path2:before {
  content: "\e919";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-combo-small .path3:before {
  content: "\e91a";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-combo-small .path4:before {
  content: "\e91b";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-combo-small .path5:before {
  content: "\e91c";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-combo-small .path6:before {
  content: "\e91d";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-combo-small .path7:before {
  content: "\e91e";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-combo-weather .path1:before {
  content: "\e91f";
  color: #f8b900;
}
.icon-combo-weather .path2:before {
  content: "\e920";
  margin-left: -1em;
  color: #f8b900;
}
.icon-combo-weather .path3:before {
  content: "\e921";
  margin-left: -1em;
  color: #f8b900;
}
.icon-combo-weather .path4:before {
  content: "\e922";
  margin-left: -1em;
  color: #f8b900;
}
.icon-combo-weather .path5:before {
  content: "\e923";
  margin-left: -1em;
  color: #f8b900;
}
.icon-combo-weather .path6:before {
  content: "\e924";
  margin-left: -1em;
  color: #f8b900;
}
.icon-combo-weather .path7:before {
  content: "\e925";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-components:before {
  content: "\e926";
  color: #949aa9;
}
.icon-components-selected:before {
  content: "\e927";
  color: #007aff;
}
.icon-contact:before {
  content: "\e928";
  color: #949aa9;
}
.icon-content-selected:before {
  content: "\e929";
  color: #007aff;
}
.icon-content-style:before {
  content: "\e92a";
  color: #949aa9;
}
.icon-content-style-selected:before {
  content: "\e92b";
  color: #007aff;
}
.icon-day-night-icon:before {
  content: "\e92c";
  color: #949aa9;
}
.icon-degree1:before {
  content: "\e92d";
}
.icon-degree2:before {
  content: "\e92e";
}
.icon-degree3:before {
  content: "\e92f";
}
.icon-dots:before {
  content: "\e930";
  color: #949aa9;
}
.icon-enlarge:before {
  content: "\e931";
  color: #fff;
}
.icon-heart:before {
  content: "\e932";
  color: #ed1d1d;
}
.icon-heart2:before {
  content: "\e933";
}
.icon-heart-big-3:before {
  content: "\e934";
  color: #949aa9;
}
.icon-home:before {
  content: "\e935";
}
.icon-home-selected:before {
  content: "\e936";
  color: #007aff;
}
.icon-home-white:before {
  content: "\e937";
  color: #fff;
}
.icon-icon-arrow-big2:before {
  content: "\e938";
  color: #949aa9;
}
.icon-icon-arrow-down2:before {
  content: "\e939";
  color: #007aff;
}
.icon-india .path1:before {
  content: "\e93a";
  color: rgb(26, 175, 93);
}
.icon-india .path2:before {
  content: "\e93b";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-india .path3:before {
  content: "\e93c";
  margin-left: -1em;
  color: rgb(232, 126, 4);
}
.icon-india .path4:before {
  content: "\e93d";
  margin-left: -1em;
  color: rgb(34, 127, 187);
}
.icon-language:before {
  content: "\e93e";
  color: #949aa9;
}
.icon-language-selected:before {
  content: "\e93f";
  color: #007aff;
}
.icon-latest:before {
  content: "\e940";
  color: #949aa9;
}
.icon-latest-white:before {
  content: "\e941";
  color: #fff;
}
.icon-lightning .path1:before {
  content: "\e942";
  color: rgb(255, 255, 255);
}
.icon-lightning .path2:before {
  content: "\e943";
  margin-left: -1em;
  color: #f8b900;
}
.icon-lightning-small .path1:before {
  content: "\e944";
  color: rgb(255, 255, 255);
}
.icon-lightning-small .path2:before {
  content: "\e945";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-linkedin .path1:before {
  content: "\e946";
  color: rgb(14, 118, 168);
}
.icon-linkedin .path2:before {
  content: "\e947";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-linkedin .path3:before {
  content: "\e948";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-linkedin .path4:before {
  content: "\e949";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-logo1 .path1:before {
  content: "\e94a";
  color: rgb(29, 44, 53);
}
.icon-logo1 .path2:before {
  content: "\e94b";
  margin-left: -1em;
  color: rgb(113, 122, 127);
}
.icon-logo2 .path1:before {
  content: "\e94c";
  color: rgb(148, 154, 169);
}
.icon-logo2 .path2:before {
  content: "\e94d";
  margin-left: -1em;
  color: rgb(216, 216, 216);
}
.icon-logo3 .path1:before {
  content: "\e94e";
  color: rgb(29, 44, 53);
}
.icon-logo3 .path2:before {
  content: "\e94f";
  margin-left: -1em;
  color: rgb(113, 122, 127);
}
.icon-logo4 .path1:before {
  content: "\e950";
  color: rgb(148, 154, 169);
}
.icon-logo4 .path2:before {
  content: "\e951";
  margin-left: -1em;
  color: rgb(216, 216, 216);
}
.icon-logout:before {
  content: "\e952";
  color: #949aa9;
}
.icon-mail .path1:before {
  content: "\e953";
  color: rgb(0, 0, 0);
}
.icon-mail .path2:before {
  content: "\e954";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-notifications:before {
  content: "\e955";
}
.icon-notifications-selected:before {
  content: "\e956";
  color: #007aff;
}
.icon-pages:before {
  content: "\e957";
  color: #949aa9;
}
.icon-pages-selected:before {
  content: "\e958";
  color: #007aff;
}
.icon-pause:before {
  content: "\e959";
  color: #fff;
}
.icon-play:before {
  content: "\e95a";
  color: #fff;
}
.icon-rain-small .path1:before {
  content: "\e95b";
  color: rgb(255, 255, 255);
}
.icon-rain-small .path2:before {
  content: "\e95c";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-rain-small .path3:before {
  content: "\e95d";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-rain-small .path4:before {
  content: "\e95e";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-rain-small .path5:before {
  content: "\e95f";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-refresh:before {
  content: "\e960";
  color: #fff;
}
.icon-refresh-1:before {
  content: "\e961";
  color: #949aa9;
}
.icon-refresh-selected:before {
  content: "\e962";
  color: #007aff;
}
.icon-scroll-circle-filled:before {
  content: "\e963";
  color: #007aff;
}
.icon-scroll-circle-normal:before {
  content: "\e964";
  color: #ececec;
}
.icon-scroll-circle-selected:before {
  content: "\e965";
  color: #007aff;
}
.icon-search:before {
  content: "\e966";
  color: #425060;
}
.icon-search-icon:before {
  content: "\e967";
  color: #425060;
}
.icon-seperator:before {
  content: "\e968";
  color: #8ab9a2;
}
.icon-settings:before {
  content: "\e969";
}
.icon-settings-selected:before {
  content: "\e96a";
  color: #007aff;
}
.icon-settings-white:before {
  content: "\e96b";
  color: #fff;
}
.icon-share:before {
  content: "\e96c";
  color: #949aa9;
}
.icon-share-selected:before {
  content: "\e96d";
  color: #007aff;
}
.icon-star-empty:before {
  content: "\e96e";
  color: #f55b02;
}
.icon-star-filled:before {
  content: "\e96f";
  color: #f55b02;
}
.icon-sun:before {
  content: "\e970";
}
.icon-sun-small:before {
  content: "\e971";
}
.icon-tick:before {
  content: "\e972";
  color: #fff;
}
.icon-tick-big:before {
  content: "\e973";
  color: #fff;
}
.icon-toggle-normal .path1:before {
  content: "\e974";
  color: rgb(0, 0, 0);
}
.icon-toggle-normal .path2:before {
  content: "\e975";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-toggle-normal .path3:before {
  content: "\e976";
  margin-left: -1em;
  color: rgb(0, 122, 255);
}
.icon-toggle-selected .path1:before {
  content: "\e977";
  color: rgb(0, 0, 0);
}
.icon-toggle-selected .path2:before {
  content: "\e978";
  margin-left: -1em;
  color: rgb(0, 122, 255);
}
.icon-toggle-selected .path3:before {
  content: "\e979";
  margin-left: -1em;
  color: rgb(228, 232, 238);
}
.icon-trending:before {
  content: "\e97a";
  color: #949aa9;
}
.icon-trending-white:before {
  content: "\e97b";
}
.icon-twitter .path1:before {
  content: "\e97c";
  color: rgb(29, 161, 242);
}
.icon-twitter .path2:before {
  content: "\e97d";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-twitter2 .path1:before {
  content: "\e97e";
  color: rgb(29, 161, 242);
}
.icon-twitter2 .path2:before {
  content: "\e97f";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path1:before {
  content: "\e980";
  color: rgb(255, 255, 255);
}
.icon-united_states .path2:before {
  content: "\e981";
  margin-left: -1em;
  color: rgb(233, 75, 53);
}
.icon-united_states .path3:before {
  content: "\e982";
  margin-left: -1em;
  color: rgb(34, 127, 187);
}
.icon-united_states .path4:before {
  content: "\e983";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path5:before {
  content: "\e984";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path6:before {
  content: "\e985";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path7:before {
  content: "\e986";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path8:before {
  content: "\e987";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path9:before {
  content: "\e988";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path10:before {
  content: "\e989";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path11:before {
  content: "\e98a";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path12:before {
  content: "\e98b";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path13:before {
  content: "\e98c";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path14:before {
  content: "\e98d";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path15:before {
  content: "\e98e";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path16:before {
  content: "\e98f";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path17:before {
  content: "\e990";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path18:before {
  content: "\e991";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path19:before {
  content: "\e992";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path20:before {
  content: "\e993";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path21:before {
  content: "\e994";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path22:before {
  content: "\e995";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path23:before {
  content: "\e996";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path24:before {
  content: "\e997";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path25:before {
  content: "\e998";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path26:before {
  content: "\e999";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path27:before {
  content: "\e99a";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path28:before {
  content: "\e99b";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path29:before {
  content: "\e99c";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-united_states .path30:before {
  content: "\e99d";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-unread:before {
  content: "\e99e";
  color: #949aa9;
}
.icon-unread-white:before {
  content: "\e99f";
  color: #fff;
}
.icon-video1 .path1:before {
  content: "\e9a0";
  color: rgb(255, 255, 255);
}
.icon-video1 .path2:before {
  content: "\e9a1";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-video2 .path1:before {
  content: "\e9a2";
  color: rgb(255, 255, 255);
}
.icon-video2 .path2:before {
  content: "\e9a3";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-video3 .path1:before {
  content: "\e9a4";
  color: rgb(255, 255, 255);
}
.icon-video3 .path2:before {
  content: "\e9a5";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}
.icon-videos:before {
  content: "\e9a6";
}
.icon-videos-selected:before {
  content: "\e9a7";
}
.icon-videos-white:before {
  content: "\e9a8";
}
.icon-weather-big-icon .path1:before {
  content: "\e9a9";
  color: rgb(249, 164, 27);
}
.icon-weather-big-icon .path2:before {
  content: "\e9aa";
  margin-left: -1em;
  color: rgb(249, 164, 27);
}
.icon-weather-big-icon .path3:before {
  content: "\e9ab";
  margin-left: -1em;
  color: rgb(249, 164, 27);
}
.icon-weather-big-icon .path4:before {
  content: "\e9ac";
  margin-left: -1em;
  color: rgb(249, 164, 27);
}
.icon-weather-big-icon .path5:before {
  content: "\e9ad";
  margin-left: -1em;
  color: rgb(249, 164, 27);
}
.icon-weather-big-icon .path6:before {
  content: "\e9ae";
  margin-left: -1em;
  color: rgb(249, 164, 27);
}
.icon-weather-big-icon .path7:before {
  content: "\e9af";
  margin-left: -1em;
  color: rgb(0, 122, 255);
}
.icon-weather-big-icon .path8:before {
  content: "\e9b0";
  margin-left: -1em;
  color: rgb(0, 122, 255);
}
.icon-whatsapp .path1:before {
  content: "\e9b1";
  color: rgb(39, 208, 69);
}
.icon-whatsapp .path2:before {
  content: "\e9b2";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-whatsapp .path3:before {
  content: "\e9b3";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-whatsapp .path4:before {
  content: "\e9b4";
  margin-left: -1em;
  color: rgb(39, 208, 69);
}
.icon-whatsapp .path5:before {
  content: "\e9b5";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

/*.main-home{display: none;}*/

p {
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 21px;
}
h1 {
  color: #000000;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 32px;
  text-align: left;
  margin-bottom: 24px;
}
h6 {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 24px;
  color: #000;
  margin-bottom: 24px;
}

.no-js #loader {
  display: none;
}
.js #loader {
  display: block;
  position: absolute;
  left: 100px;
  top: 0;
}
.se-pre-con {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #000000bf;
}
.loader {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 25%;
  max-width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  perspective: 500px;
  background-color: #007aff1f;
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
.ball-clip-rotate-multiple {
  position: relative;
}
.ball-clip-rotate-multiple > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  left: -30px;
  top: -36px;
  border: 2px solid #007aff;
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  -webkit-animation: rotate 1s 0s ease-in-out infinite;
  animation: rotate 1s 0s ease-in-out infinite;
}
.ball-clip-rotate-multiple > div:last-child {
  display: inline-block;
  top: -18px;
  left: -12px;
  width: 26px;
  height: 26px;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  border-color: #e8f0fe transparent #e8f0fe transparent;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

/**--------------------------
Inner Pages Loader Css Start
-------------------------**/
.se-pre-con1 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #000000bf;
}
.load-area {
  display: flex;
  justify-content: center;
  height: 100vh;
}
.loading-bar {
  display: flex;
  height: 4px;
  width: 100%;
  overflow: hidden;
}
@keyframes progress-animation {
  0% {
    width: 0%;
  }
  20% {
    width: 10%;
  }
  40% {
    width: 30%;
  }
  50% {
    width: 60%;
  }
  100% {
    width: 100%;
  }
}

.progress-bar {
  display: flex;
  height: 100%;
  width: 100%;
  background: #007aff;
  animation: progress-animation 5s ease-in-out;
}
/**--------------------------
Inner Pages Loader Css Ends
-------------------------**/

/**-------------------------
PreLoader CSS Ends
-------------------------**/

/**-------------------------
3. Login Page CSS Starts
-------------------------**/
.login-screen .logo img {
  width: 52px;
}
.login-screen input {
  margin: 4px 0;
  padding: 3px 16px;
}
.login-screen .signup {
  margin: 16px 0 0;
}
.home-page,
.login-screen {
  background-color: #e8f0fe;
}
.login-page {
  background-color: #e8f0fe;
  height: 100%;
}
.main-area {
  background: #fff;
  border-radius: 24px;
  padding: 32px 34px;
}
.mobile-area {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  padding-bottom: 45px;
}
.logo {
  text-align: center;
  padding-bottom: 10px;
}
input {
  width: 100%;
  border-radius: 8px;
  padding: 3px 16px;
  box-sizing: border-box;
  line-height: 42px;
  background-color: #e7ebf6;
  outline: none;
  border: none;
  margin: 8px 0;
}
.wrap {
  padding: 50px 0;
}
.signup {
  margin: 16px 0;
}
.login-footer .log-title {
  margin-top: 8px;
}
.log-title,
.loginregister {
  color: #007aff !important;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 18px;
  display: block;
}
.loginregister {
  margin: 8px 0;
}
.list-button {
  position: relative;
  bottom: 80px;
  margin-top: 200px;
  border-radius: 8px;
  background-color: white;
  color: black;
  font-size: 14px;
  width: 228px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 22px;
  text-align: center;
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: center;

  border: black solid 1px;
  transition: 0.8s;
  padding: 11px 0;
}
.list-button:hover {
  background: #0c9350;
  color: white;
}
.signin-up {
  text-align: center;
  display: block;
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 32px;
  width: 100%;
  text-transform: capitalize;
  margin: 12px 0px 8px;
}
.or-text {
  opacity: 0.5;
}
.login-social-icon {
  text-align: center;
}
.login-social-icon img {
  width: 30px;
  height: 30px;
  margin: 0 6px;
}
.login-footer {
  text-align: center;
}
.login-social-icon a {
  font-size: 32px;
}
.login-screen .main-area {
  margin: 44px auto;
  width: 295px;
}
.login-screen .signin-up {
  margin: 12px 0 10px;
}
.login-screen .mobile-area {
  padding-bottom: 0px;
}
.login-screen .mobile-area.home-page,
.login-screen .mobile-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  height: auto;
}
.login-social-icon a {
  font-size: 32px;
  margin: 0 6px;
}

/** --------------------------------
Login Page CSS Ends
-------------------------------- **/

/** --------------------------------
4. Forgot Password Page CSS Start
------------------------------- **/

#forgot-password {
  padding: 0px !important;
  background: #e8f0fe;
}
#forgot-password .modal-header {
  border-bottom: none;
}
#forgot-password .modal-header .close {
  top: 30px;
}
#login-form .item-inner::before {
  content: "";
}
.forgot-password-page {
  display: block;
}
#forgot-password .modal-dialog {
  margin: 0 auto;
}
#forgot-password .modal-content {
  background-color: #eaefff;
  max-height: 90vh;
  height: auto;
  border: none;
  border-radius: 0;
  overflow-y: auto;
}
#forgot-password input {
  background-color: #fff;
  width: 100%;
}
#forgot-password .main-area {
  background: transparent;
}
#forgot-password p {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 18px;
  margin-bottom: 14px;
}
#forgot-password h1 {
  margin-bottom: 6px;
}
#login-form .item-inner::before {
  content: "";
}
.close {
  position: absolute;
  right: 25px;
  top: 0;
  z-index: 999;
  font-size: 2rem;
  font-weight: normal;
  color: #fff;
  opacity: 1;
  padding: 0 !important;
}
.close a {
  color: #3e3e3e;
  width: 36px;
  height: 36px;
}
.forget-cover {
  height: 250px;
  margin-top: 104px;
}
.close:focus,
.close:hover {
  opacity: 1;
}
#forgot-password .signup {
  margin: 0px 0;
}
#forgot-password .list-button {
  margin: 8px 0 8px;
}

/** --------------------------------
Forgot Password Page CSS Ends
------------------------------- **/

/** -------------------------------
5. Walkthrough Pages Css 
--------------------------------**/

.app-area {
  height: 100%;
  padding: 0px;
}
.slider-img img {
  width: 100%;
}
.mobile-area.app-page {
  display: flex;
  /*padding-bottom: 0px;*/
  align-items: baseline;
}
.app-area .slider-img {
  min-height: 260px;
}
.carousel-inner-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mini-title {
  width: 400px;
}
.Logo-main-slider {
  width: 100%;
  align-items: center;
  margin: 20px;
}
.head-main-slider {
  align-items: center;
  margin: 10px;
  font-family: Gabarito;
  font-size: 26px;
  font-weight: 500;
  line-height: 31px;
  letter-spacing: 0em;
  text-align: center;
}
.but-main-slider {
  margin: 20px;
  width: 100%;
}
.slider-content {
  width: 100%;
  max-width: 60%;
  text-align: center;
  margin: 0 auto;
}
.banner-carousel .flickity-page-dots {
  bottom: -130px !important;
}
.banner-carousel .flickity-page-dots .dot {
  background: transparent !important;
  opacity: 1 !important;
  margin: 0 4px;
}
.banner-carousel .flickity-page-dots .dot.is-selected {
  transform: scaleY(-1);
  background-color: transparent !important;
}
.slider-txt h1 {
  text-align: center;
  margin-bottom: 8px;
}
.walk-main .get-start-btn {
  padding: 0;
  height: 48px;
  width: 228px;
  margin: 0 auto;
}

.slider-txt {
  margin: 20px 0 0;
  text-align: center;
}
.slider-txt {
  width: 100%;
  max-width: 50%;
  margin: 0 auto;
  padding-top: 38px;
}
.banner-carousel .carousel-cell {
  width: auto;
  margin-right: 0px;
  border-radius: 0px;
  counter-increment: carousel-cell;
}
.get-start-btn {
  padding: 0 32px;
}
.banner-carousel .get-start-btn {
  text-align: center;
  display: flex;
  justify-content: center;
}
.banner-carousel .get-start-btn .list-button {
  height: 48px;
  width: 228px;
}

/** ------------------------------------
Walkthrough Pages Css Ends
------------------------------------ **/

/** --------------------------------
6. Select Intrest Page CSS Start
------------------------------- **/

.main-area.intrest-area {
  background: #007aff;
  border-radius: 0;
  margin: 0;
  padding-top: 40px;
}
.intrest-home,
.intrest-home-2 {
  align-items: center;
  height: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 0px;
}
.pill-container {
  box-sizing: border-box;
  height: 400px;
}
.pill-container input[type="checkbox"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.intrest-wrap:last-child .selector {
  margin-right: 0;
}
.selector {
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #fff;
  border-radius: 18px;
  white-space: nowrap;
  display: inline-flex;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
  width: 100%;
}
.pill-container input[type="checkbox"]:checked + label {
  background: #fff;
  color: #000;
}
.intrest-wrap {
  display: inline-grid;
  margin: 16px 0 0 8px;
}
.main-area.intrest-area h1 {
  color: #fff;
}
.save-intrest {
  color: #000;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 21px;
  text-align: center;
  border: #ffffff solid 1px;
  border-radius: 8px;
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  margin: 18px 0 8px;
  transition: 0.8s;
}
.save-intrest:hover {
  background: transparent;
  color: #fff;
}
.intrest-page {
  background: #007aff;
}

/** --------------------------------
Select Intrest Page CSS Ends
------------------------------- **/

/** ------------------------------
7. Startpage Pages Css Start
------------------------------- **/

.page-header {
  padding: 10px 10px 10px;
}
#button-add {
  padding: 7px 7px;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-inner {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px 0 10px 0;
}
.page-header input {
  margin: 0px !important;
  border-radius: 20px !important;
  background-color: #e7ebf6;
  padding: 0.486rem 0;
}
.like-icon-active .icon-heart-big-3:before {
  color: #007aff;
}
.like-icon-active span.like-txt {
  color: #007aff;
}
.share-like .navbar-inner a {
  display: flex;
  align-items: center;
  color: #949aa9;
}

input:focus {
  outline: none;
  box-shadow: none !important;
}
.form-control:focus {
  background-color: #e7ebf6 !important;
}

.page-header .input-group {
  border-radius: 20px;
  width: 230px;
  background-color: #e7ebf6;
}
#button-add .icon-search {
  font-size: 22px;
  letter-spacing: 0;
  line-height: 18px;
  color: #425060;
}
.page-header .input-group-prepend {
  margin-right: -6px;
}
.block-leftspace {
  padding-right: 0px !important;
}
.news-tab ul {
  display: flex;
  flex-direction: row;
}
.news-tab li {
  display: flex;
  flex-grow: 1;
  margin-right: 19px;
}
.news-tab {
  overflow: auto;
}
.news-tab a {
  text-align: center;
  color: #949aa9 !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 26px;
}
.news-tab::-webkit-scrollbar {
  display: none;
}
.tech-link {
  text-align: right;
  margin-right: 0px !important;
}
.news-area {
  padding-left: 10px;
}
.news-tab .owl-item:first-child {
  margin-right: 0 !important;
}
.news-tab .owl-item:last-child {
  margin-right: 0;
}
.news-tab .active,
.news-tab a:hover {
  color: #000;
}
.nav-link {
  color: #000 !important;
  padding: 0 !important;
  transition: 0.48s;
  font-size: 20px;
  position: relative;
  line-height: 12px;
}
.nav-link:before {
  content: "";
  position: absolute;
  left: 4px;
  right: 2px;
  margin: 0 auto;
  bottom: 0px;
  background: transparent;
  width: 0;
  height: 4px;
  -webkit-transition: all 0.4s cubic-bezier(0.35, 1, 0.33, 1);
  transition: all 0.4s cubic-bezier(0.35, 1, 0.33, 1);
}
.nav-item {
  text-wrap: nowrap;
}
li.nav-item.active .nav-link:before {
  border-radius: 50px;
  height: 4px;
  width: 4px;
  background-color: #007aff;
}
.nav-link:before {
  background: #007aff;
}
.nav-item:hover .nav-link,
.nav-item.active .nav-link {
  color: #000 !important;
}
.tab-link-active .tabbar-label,
.tab-link-active p,
.tab-link:hover .tabbar-label,
.tab-link:hover p {
  color: #007aff !important;
}
.banner {
  padding: 24px 10px 32px;
}
.icon-heart {
  font-size: 20px;
}
.banner .carousel-cell img {
  width: 100%;
  border-radius: 16px;
}
.banner .carousel-cell {
  width: 100%;
}
.banner-content {
  position: absolute;
  z-index: 9999;
  bottom: 0;
  width: 100%;
  padding: 20px 20px;
}
.heading h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 27px;
  color: #ffff;
}
.banner-content .author-area,
.trending-new-bg .author-area {
  height: 100%;
  width: 40px;
}
.heart-block {
  position: absolute;
  z-index: 999;
  top: 30px;
  right: 30px;
  opacity: 0.9;
  border-radius: 16.5px;
  background-color: #ffffff;
  vertical-align: middle;
  display: flex;
  align-items: center;
  border: #ffffff solid 1px;
  justify-content: center;
  padding: 4px 8px;
  line-height: 23px;
}

.text-3571 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 20px;
  color: #000;
}
.banner .flickity-page-dots {
  bottom: -28px !important;
}
.banner .flickity-page-dots .dot {
  background-color: #ececec !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 4px !important;
}
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 16px;
  background: linear-gradient(
    181deg,
    #000000 0%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.63) 100%,
    rgba(0, 0, 0, 0.52) 100%
  );
}
.overlay-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  z-index: -1;
  transform: rotate(355deg);
  background-color: #d9dff7;
  border-radius: 14px;
  border-top-right-radius: 360px;
  border-bottom-left-radius: 360px;
}
.button-add {
  padding: 0 8px 0 15px;
}
.cat-block-1 {
  margin-top: 42px;
}
.home-cat-slider h6 {
  display: flex;
  align-items: center;
}
.author-area img,
.author-icon img {
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.author-area {
  display: inline-flex;
  border-radius: 50%;
  background: #fed255;
}
.author-icon {
  display: inline-block;
}
.author-icon p {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 21px;
}
.min-read {
  font-size: 12px;
  font-weight: 500 !important;
  line-height: 18px !important;
}
.all-box-area {
  padding: 0 10px;
}
.categories-block {
  margin: 25px 0;
}
.startpage-content {
  padding: 0 15px;
}
.startpage-area {
  height: 100vh;
}
.post-area-main .author-area {
  width: auto;
  height: auto;
}
.toolbar-inner {
  display: flex;
  flex-direction: row;
}

.tab-link-active.nav-link::before,
a.nav-link.tab-link.categorylist.tab-link-active:hover:before {
  border-radius: 50px;
  height: 4px;
  width: 4px;
  background-color: #1e78f0;
  top: 30px;
}
.categorylist.nav-link:hover::before {
  background: transparent;
  width: 0;
  height: 0;
}
.moon-icon span {
  font-size: 34px;
}
.moon-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-txt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
  margin-top: 0px;
}
.tabbar-label {
  color: #000000;
  font-size: 32px;
}
.toolbar.app-customtoolbar {
  padding: 16px 0;
  border-top: 1px solid #f3f3f3;
}
span.see-all {
  height: 26px;
  opacity: 0.9;
  border-radius: 13px;
  background-color: black;
  padding: 5px 12px;
  display: inline-flex;
  margin: 0 12px;
  border: black solid 1px;
  align-items: center;
}
span.see-all a {
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
}
.lifestyle {
  display: flex;
  margin: 24px 0;
  flex-direction: row;
}
.life-txt h2 {
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 21px;
}
.life-txt,
.auth-life-txt {
  border-bottom: 1px solid #f3f3f3;
  width: 100%;
}
.life-icon {
  margin: 10px 0 20px;
}
.life-txt h3 {
  color: #949aa9;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
  margin-bottom: 4px;
}
.icon-img img {
  width: 100%;
  max-width: 42px;
}
.lifetime {
  margin: 0 0 0 16px;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.trend-border {
  border-top: 1px solid #f3f3f3;
}
.story h3 {
  color: #949aa9;
  font-family: "Quicksand", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 18px;
}
.story {
  padding: 30px 0;
}
.story h2 {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 28px;
  color: #000;
}
.trending-story {
  color: #949aa9;
  font-family: "Quicksand", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 18px;
}
.super-learner img {
  border-radius: 12px;
  background-color: #ded6f6;
  height: 104px;
  width: 120px;
}
.super-learner {
  display: flex;
  margin-top: 24px;
  justify-content: space-between;
}
.learner {
  display: inline-flex;
}
.super-learner h3 {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 28px;
  margin-top: 4px;
}
.get-up h3 {
  font-weight: 600;
  margin: 30px 0px 6px;
}
.super-get-bar {
  font-size: 30px;
}
.learner-txt {
  padding: 0 16px 0 16px;
}
p.learner-txt-p {
  margin-top: 6px;
}
.super-learner p .icon-dots {
  font-size: 22px;
}
.get-up {
  display: block;
}
.get-up p {
  color: #949aa9;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 21px;
  margin-top: 8px;
  width: 98%;
}
span.like-txt {
  margin-left: 5px;
}
.share-like .navbar-inner .left,
.share-like .center,
.share-like .right {
  display: inline-flex;
  align-items: center;
}
.share-like {
  color: #949aa9;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 18px;
  margin: 20px 0;
}
.share-like .icon {
  font-size: 32px;
}
.seperator-line {
  box-sizing: border-box;
  border: 1px solid #f3f3f3;
}
.articles-btn {
  margin-bottom: 35px;
}
.cat-block-2 {
  padding-top: 35px;
}
.cat-block-2.all-box-area h4 {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 24px;
  color: #000;
}
.trending-new-bg {
  background-image: linear-gradient(
      180deg,
      #000000 0%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.93) 100%,
      rgba(0, 0, 0, 0.52) 100%
    ),
    url(../images/image7.jpg);
  background-size: cover;
  background-position: 0px 0px;
  border-radius: 16px;
  width: 100%;
  background-repeat: no-repeat;
  padding: 112px 12px 20px;
}
.heading h2 {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 28px;
}
.img-content {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  width: 100%;
}
.img-content .author-area img {
  height: auto;
}
.list-area img {
  width: 100%;
}
.post-area.post-area-main .post-text-outer {
  margin: 0 16px;
}
.post-text-outer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-left: 8px;
}
.post-text-outer p {
  color: #fff;
  font-weight: 600;
}
.post-user-info {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
}
.post-time {
  margin-left: auto;
  font-size: 12px;
}
.post-thumb img {
  object-fit: cover;
  width: 100%;
  border-radius: 12px;
  background-color: #ded6f6;
}
.follow-area .post-wraper.all-post {
  margin: 0px 0 0px;
}
.post-area.post-area-main .post-wraper {
  margin: 10px 0 30px;
}
.post-area.post-area-main .post-wraper .art-content .author-area {
  width: 28px;
}
.post-wraper {
  display: flex;
  margin: 30px 0 60px;
}
.post-area {
  padding: 30px 0 0;
}
.post-wraper:last-child {
  margin-bottom: 0px;
}
.post-thumb {
  width: 220px;
}
.startpage-content .post-area.post-area-main {
  padding: 40px 0 0;
}
.article-page-list .post-text-outer {
  margin-left: 16px;
}
.article-page-list .post-wraper {
  margin: 30px 0 36px;
}
.post-wraper:last-child .life-txt {
  border-bottom: none;
}
.startpage h6 {
  display: flex;
  align-items: center;
}

/** ------------------------------
Startpage Pages Css Ends
------------------------------- **/

/** ------------------------------
Startpage-3 Pages Css Start
------------------------------- **/

.startpage-3 .main-page {
  height: 100%;
  background-color: rgba(36, 37, 38, 0.8);
}
.startpage-3 .travel-area {
  width: 100%;
  height: 100%;
}
.startpage-3 {
  background: linear-gradient(180deg, rgba(36, 37, 38, 0.7) 100%, #303031 100%),
    url(../images/image9.jpg);
  background-size: cover !important;
  object-fit: cover;
  padding-bottom: 0;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
.home-slider-content .short-story-is p {
  font-weight: 600;
}

section.home.start-3 {
  height: 100%;
  background: #232425;
}
.start-3 .toolbar.app-customtoolbar {
  background: linear-gradient(180deg, rgb(35 36 37) 0%, #242526 100%);
  border: 1px solid #303031;
}
.start-3 .tabbar-label,
.start-3 .tb-txt {
  color: #fff;
}
.dis-today {
  padding: 30px 10px;
}
.dis-today h1 {
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 41px;
  color: #fff;
}
.dis-today p {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 24px;
}
.startpage-3 .home-blog {
  padding: 0px 0 84px;
  height: 55vh;
}
.startpage-3 .flickity-page-dots {
  text-align: left;
}
.startpage-3 .flickity-prev-next-button.previous,
.startpage-3 .flickity-prev-next-button.next {
  display: none;
}
.startpage-3 .home-slider .home-slider-content {
  background-color: #323b54;
}
.startpage-3 .home-slider .home-slider-content p {
  color: #fff;
}
.home-blog .flickity-page-dots .dot {
  background: #ececec;
}

/** ------------------------------
Startpage-3 Pages Css Ends
------------------------------- **/

/** ---------------------------
9. Videos Pages Css Start
--------------------------- **/
.modal-body {
  height: 100%;
  display: flex;
  width: 100%;
}
.modal-content {
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  background: #000;
}
.modal-dialog {
  margin: 0px;
  max-width: 100% !important;
}
button .icon-close-dark-white {
  font-size: 34px;
}
.videos-info a {
  color: #fff;
}
.videos-info a span {
  width: 100%;
  height: 100%;
  display: block;
}
.play-pop-icon {
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16%;
  top: 38%;
  text-align: center;
  margin: 0 auto;
}
#glassAnimals {
  padding: 0rem 0rem;
}
.videos-wrapper .swiper-container {
  width: 100%;
}
.videos-wrapper .swiper-slide {
  display: flex;
  cursor: pointer;
}
.videos-wrapper .swiper-slide:first-child {
  margin-right: 0 !important;
}
.videos-wrapper .carousel-cell {
  height: 180px;
  width: 114px;
}
.videos-wrapper .flickity-viewport {
  overflow: visible;
}
.swiper-slide img {
  border-radius: 12px;
}
.swiper-wrapper img {
  border-radius: 16px;
  border-radius: 16px;
  width: 100%;
  object-fit: cover;
}
.videos-content {
  position: absolute;
  z-index: 999;
  padding: 14px 12px;
}
.v-img {
  border-radius: 50%;
  border: 2px solid #007aff;
  background-color: #fed255;
}
.videos-info {
  position: absolute;
  z-index: 999;
  bottom: 4px;
  padding: 14px 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 18px;
  width: 100%;
}
.videos-bg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.videos-bg .vdo-body-img {
  border-radius: 16.5px;
}
.videos-bg .heart-block {
  top: 14px;
  right: 14px;
}
.video-txt p {
  color: #000;
}
.author-icon {
  display: inline-flex;
  border-radius: 50px;
  background: #fed255;
}
.v-story-block .author-icon {
  width: 40px;
}
.min-read-vedo {
  color: #949aa9;
}
.story-content h3 {
  color: #000000;
  font-family: "Quicksand", sans-serif;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 27px;
}
.story-block {
  padding: 26px 0 0;
}
.v-story-block {
  padding: 16px 0 54px;
}
.carousel {
  padding-top: 8px;
}
.modal-header .close {
  right: 14px;
}
.wrap-vdo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrap-vdo {
  position: relative;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.wrap-vdo img {
  border-radius: 16px;
}
#VidModal .close {
  right: 10px;
  top: 10px;
}
#VidModal .close:hover {
  color: #fff;
}
.videos-bg .play-vd {
  width: 60px;
}
.play-vd {
  position: absolute;
  z-index: 999;
  cursor: pointer;
  width: 39px;
  background: transparent;
  border: none;
}
.full-size {
  width: 100%;
}
.time-content {
  color: #949aa9;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
  display: flex;
  align-items: center;
}
.time-content span.author-area {
  margin-right: 12px;
}
.carousel-cell {
  width: 67%;
  margin-right: 10px;
  border-radius: 5px;
  counter-increment: carousel-cell;
}
.carousel .flickity-viewport {
  width: 100%;
}
.carousel-cell:before {
  display: block;
  text-align: center;
  line-height: 60%;
  font-size: 80px;
  color: white;
}
.videos-wrapper .flickity-viewport .flickity-slider:first-child .carousel-cell,
.trending-carousel
  .flickity-viewport
  .flickity-slider:first-child
  .carousel-cell {
  transform: translateX(25px) !important;
}
.trending-carousel-vd {
  height: 200px !important;
}
.trending-carousel-vd .flickity-viewport {
  height: 218px !important;
}
#video-id-img {
  min-height: 402px;
  background: url(../images/image5.jpg);
  background-size: cover;
  object-fit: cover;
  position: relative;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 24px;
  border-radius: 0px;
}

/**-----------------------------
10. Categories Pages Css Start
--------------------------------- **/

.categories {
  padding-bottom: 30px;
  /*margin-bottom: 30px;*/
}
.categories.cat-video-block {
  padding-top: 0px;
}
.list-area {
  border-radius: 12px;
  padding: 25px 16px 10px;
  margin: 0px 8px 22px 14px;
}
.list-area p {
  text-transform: capitalize;
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 24px;
}
.all-box-area .categories .categories-list {
  padding: 0 8px;
}
.home-cat-slider .list-area {
  width: 132px;
  margin-left: 0;
  padding: 10px 16px 8px;
}

.travel-article {
  background-color: #d9f5d2;
}
.lifestyle-art {
  background-color: #faf1ed;
}
p.articles-count {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 15px;
}
.fitness-art {
  background-color: #fff8c6;
}
.education-art {
  background-color: #ddf3ff;
}
.sports-art {
  background-color: #ffdcdb;
}
.techology-art {
  background-color: #cff7fd;
}
.page-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  max-width: 768px;
  margin: 0 auto;
  background: #fff;
}
.categories-list img {
  width: 64%;
}
.startpage .categories-list .list-area a {
  display: inline-block;
  text-align: center;
  margin-bottom: 12px;
  padding: 25px 16px 10px;
}
.startpage .categories-list .list-area a > p {
  text-align: left;
}

.startpage .categories-list .list-area {
  padding: 0px;
  cursor: pointer;
}
/**-------------------------------
Categories Pages Css Ends
-------------------------------- **/

/*--------------------------------
11. Articles Details Css Start
--------------------------------*/
.details-head {
  min-height: 402px;
  background: url(../images/image12.jpg);
  background-size: cover;
  object-fit: cover;
  position: relative;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 24px;
}
.close-bar {
  width: 100%;
  text-align: right;
  font-size: 36px;
}
.head-content {
  margin-bottom: 24px;
}
.follow-area .author-area {
  width: 40px;
}
.article-follow-inner a.follow-btn,
.article-follow-inner .life-icon,
.article-follow-inner .auth-name {
  margin: 0;
}
.article-follow-inner .auth-art {
  color: #949aa9;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
}
.article-follow-inner h3.auth-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 21px;
}
.article-follow-inner {
  margin-top: 14px;
}

.follow-us {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
.news-date {
  color: #949aa9;
  font-family: "Quicksand", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
  text-align: right;
}
.follow-bookmark span {
  font-size: 33px;
  margin: 0 0px 0 16px;
}
.follow-bookmark span.icon-heart-big-3 {
  font-weight: 600;
}

.follow-bookmark .icon-bookmark {
  font-size: 30px;
}
span.nws a {
  color: #000;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border: 1px solid #d9f5d2;
  border-radius: 8px;
  background-color: #d9f5d2;
}
.short-story h3 {
  color: #000000;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 28px;
}
.short-story {
  width: 70%;
  margin-top: 15px;
}
.travel-story .auth-details {
  margin-left: 0;
}
.follow-area {
  padding: 15px 15px;
  border-bottom: #f3f3f3 solid 1px;
}
.story-social-icon li {
  display: inline-block;
  font-size: 30px;
  margin-left: 8px;
}
.story-social-icon,
.description-cont {
  padding: 24px 24px 0;
}
.travel-story p {
  color: #949aa9;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 21px;
  margin-bottom: 20px;
}
.dummy-content {
  padding: 0 18px;
  border-left: #8ab9a2 solid 7px;
  margin: 0 26px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.dummy-content h4 {
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 27px;
}
.review-story {
  background-position: 0px 20px;
  background-image: url(../images/quote.png);
  background-repeat: no-repeat;
  background-size: 22%;
  object-fit: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 16px;
}
.review-text h1 {
  margin-bottom: 0;
}
.review-text h5 {
  color: #949aa9;
  font-family: "Quicksand", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 18px;
}
.description-cont.story-con .follow-btn {
  height: 48px;
  margin-bottom: 27px;
}
.review-text {
  width: 100%;
  padding: 20px 28px;
}
.story-con {
  border-bottom: #f3f3f3 solid 1px;
}
.modal-dialog {
  max-width: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.modal-body {
  position: relative;
  padding: 0px;
}

.play-music p {
  color: #000000;
}
.comments .auhtor-content h3,
.comments .post-wraper.all-post .life-icon {
  margin: 0;
}
.comments {
  padding: 30px 0 10px;
}
.comments .auhtor-content p {
  margin: 20px 0;
}
.comments .post-wraper.all-post {
  margin: 20px 0;
  align-items: flex-start;
}
.comments .post-wraper.all-post .author-area {
  width: 48px;
  margin-right: 10px;
}
.sub-headings {
  font-size: 16px;
}
.bookmark-block {
  padding: 14px 0;
}
.post-comments textarea {
  width: 100%;
  border-radius: 8px;
  padding: 6px 16px;
  box-sizing: border-box;
  line-height: 42px;
  background-color: #e7ebf6;
  outline: none;
  border: none;
  margin: 8px 0;
}

/**-----------------------------
Articles Details Css Ends
-----------------------------  **/

/**-----------------------------
12. Article List Page Css Start
-----------------------------  **/

.article-head h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 27px;
  text-align: center;
  margin-bottom: 0;
}
.loadMore {
  display: block;
  padding: 10px;
  transition: 0.3s;
  border: 2px solid #007aff;
  border-radius: 8px;
  color: #007aff;
  font-family: "Quicksand", sans-serif;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 21px;
  text-align: center;
}
.loadMore:hover {
  color: #fff;
  background-color: #007aff;
  border: 2px solid #007aff;
  text-decoration: none;
}
.travel-area {
  padding-bottom: 60px;
}
.back-page .icon-arrow-big2 {
  font-size: 32px;
}
.art-content {
  display: flex;
  align-items: center;
}
.art-content .author-area {
  margin-right: 20px;
  width: 40px;
  height: 100%;
}
.article-page-list .author-area {
  width: 40px;
  height: 100%;
}
.article-page-list .travel-area {
  padding-bottom: 0;
}
.article-page-list .load-more-btn {
  margin: 0;
}
.video-articles-list-page .author-area {
  width: 26px;
}
.video-articles-list-page .life-icon {
  margin: 8px 0 12px;
}
.video-articles-list-page .post-text-outer {
  margin-left: 16px;
}
.video-articles-list-page .post-wraper {
  margin: 30px 0 30px;
}
.video-articles-list-page .load-more-btn {
  margin: 0px 0 30px;
}

#glassAnimals iframe {
  width: 100%;
}
#glassAnimals button.close {
  color: #000;
  margin: 8px auto 0px;
  font-size: 20px;
}
#glassAnimals .modal-header {
  padding: 4px;
}

/**-----------------------------------
12. Article List Page Css Ends
----------------------------------  **/

/**-----------------------------------
13. Author Page Css Start
---------------------------------- **/

div#more-listing {
  padding-top: 0;
}
.author-block {
  box-sizing: border-box;
  border: 0.7px solid #dde0e7;
  border-radius: 8px;
  text-align: center;
  padding: 16px;
  margin-bottom: 30px;
}
.auth-page {
  padding: 0 6px;
}
.auth-page .author-block {
  margin: 0 8px 24px;
}
.auth-page .author-area {
  width: 60px;
  height: 60px;
  object-fit: cover;
}
.auth-page .auth-name {
  margin: 4px 0 4px;
}
.auth-page .signup {
  margin: 18px 0 0px;
}
#get-start-space {
  height: 100px;
}
.startpage .auth-wraper.auth-page .signup,
.startpage .auth-wraper.auth-page .list-button {
  margin: 5px 0 0px;
}
.auth-page .follow-btn {
  height: 33px;
  margin-bottom: 0;
  border: #007aff solid 1px;
}
#mainpagegsbtn {
  padding-bottom: 50px;
}
.auth-page .list-button {
  height: 33px;
  margin-bottom: 0;
  border: #007aff solid 1px;
}
.auth-name {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  color: #000;
  margin: 20px 0 4px;
}
.auth-art {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 15px;
  text-align: center;
  color: #000;
}
.auth-travel .post-wraper.all-post {
  margin: 14px 0 14px;
}
.auth-travel .follow-btn,
.auth-travel .post-text-outer .auth-name {
  margin: 0px;
}
.review-area {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
span.rating {
  color: #949aa9;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 15px;
  text-align: center;
  margin-left: 12px;
}
a.list-button.get-pre-setting {
  margin-bottom: 0;
}
.author-area {
  width: 60px;
}
.all-auth-wraper .author-area {
  height: unset;
}
.clark {
  background-color: #d9dff7;
}
.isabella {
  background-color: #e4eeeb;
}
.johana {
  background-color: #f7d6dc;
}
.follow-btn {
  border-radius: 8px;
  color: #007aff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 21px;
  text-align: center;
  display: flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
  border: #007aff solid 1px;
  transition: 0.8s;
}
.follow-btn:hover {
  color: #fff;
  background: #007aff;
}
.follow-btn-auth {
  border-radius: 8px;
  color: #007aff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 21px;
  text-align: center;
  display: flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  margin: 18px 0 0;
  border: #007aff solid 1px;
  transition: 0.8s;
}
/* Basic Button Style */
.button {
  border-radius: 8px;
  background-color: white;
  color: black;
  font-size: 14px;
  width: 228px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 22px;
  text-align: center;
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  transition: 0.8s;
  padding: 11px 0;
}

/* Button Hover Effect */
.button:hover {
  background-color: #109a56;
  color: white;
}

.author-block .list-button {
  font-size: 12px;
}
.auth-details {
  text-align: left;
  margin-left: 14px;
}
.auth-details .auth-name,
.auth-details .auth-art {
  text-align: left;
}
.button-btn.auth-btn,
.all-post .button-btn.auth-btn-1 {
  margin-left: auto;
}
.all-post .button-btn.auth-btn-1 {
  max-width: 100px;
  width: 100%;
}

.all-post {
  align-items: center;
}
.all-post .button-btn.auth-btn {
  max-width: 100px;
  width: 100%;
}
.load-more-btn {
  margin: 0px 0 76px;
}
.bookmark-block .all-auth-wraper {
  padding: 0 0;
}
.all-auth-wraper {
  padding-bottom: 24px;
  padding-top: 24px;
}
.comments .sub-headings {
  margin: 0;
}
.auth-travel {
  padding-bottom: 12px !important;
}
.all-auth-wraper .post-wraper.all-post:last-child .auth-life-txt {
  border-bottom: none;
}
.travel-area.auth-travel .lifestyle-wrap.categories-block {
  margin: 25px 0 0;
}
.auth-review {
  font-size: 9px;
}
.followed-active {
  border-color: #007aff;
  color: #fff !important;
  background-color: #007aff;
}

/**--------------------------------
Author Page Css Ends
-------------------------------- **/

/** -------------------------------
14. Author Profile Page Css Start
-------------------------------- **/

.channel-head {
  background-size: cover;
  object-fit: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  padding-bottom: 0;
}
.title-box .author-area {
  width: 120px;
}
.title-box {
  margin: 0 auto;
  position: relative;
  top: 30px;
  z-index: 999;
  text-align: center;
}
.profile-block {
  text-align: center;
  background-color: rgb(231, 235, 246, 0.3);
  padding: 78px 0 40px;
  margin-top: -28px;
}
.title-box p {
  color: #000000;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 32px;
  text-align: center;
  margin-bottom: 22px;
}
.profile-flow {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
  padding-bottom: 22px;
  margin-top: 14px;
  border-bottom: 1px solid #e2e2e2;
}
button.author-btn {
  border-radius: 8px;
  color: #007aff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 21px;
  text-align: center;
  transition: 0.8s;
  border: 1px solid #007aff;
  opacity: 0.9;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
  height: 33px;
  width: 121px;
}
.chan-flow-count {
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
}
.item-count {
  color: #000000;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 41px;
  text-align: center;
  display: block;
}
.recent-article .carousel-cell {
  background-color: #ffffff;
}

.recent-article .carousel-cell:before {
  display: block;
  text-align: center;
  font-size: 80px;
  color: white;
}
.recent-article .flickity-viewport {
  height: 230px !important;
}
.recent-article {
  padding-top: 14px;
}
.recent-article-txt img {
  border-radius: 12px;
}
.recent-article-txt .learner2 {
  padding: 16px 16px;
}

.recent-article-txt {
  text-align: left;
}
.recent-article-txt h3 {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 21px;
  color: #000;
}
.recent-article-txt .learner-txt h4 {
  color: #949aa9;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
}
.recent-article-txt img {
  width: 81px;
  height: 65px;
}
.recent-article-txt .learner-txt {
  padding: 0 0 0 10px;
}
.img-area {
  display: inline-flex;
}
.recent-article-txt .carousel .flickity-viewport {
  width: 100%;
  height: 100% !important;
}
.learner2 p {
  color: #949aa9;
  font-family: "Quicksand", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 21px;
  margin-top: 14px;
}
.authorprofile-page {
  padding-bottom: 0px;
}
.next-page {
  text-align: right;
  display: block;
}
.learner-txt span {
  color: #949aa9;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 15px;
}
.skip-page {
  text-align: right;
  color: #007aff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 18px;
}
.walkthrough-area h1 {
  color: #000000;
  text-align: center;
}
.walkthrough-area p {
  color: #949aa9;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 21px;
  text-align: center;
}
.walk-page .walkthrough-area .content h1 {
  margin-bottom: 20px;
}
.walk-page-2 .walkthrough-area .content h1 {
  margin-bottom: 29px;
}
.walkthrough-area .content {
  margin-bottom: 30px;
}
#offline-video .carousel-indicators > li {
  background-color: #ececec;
  border-radius: 50px !important;
  width: 10px;
  height: 10px;
  cursor: pointer;
}
#offline-video .carousel-indicators {
  bottom: -80px !important;
}
#offline-video .carousel-indicators li.active {
  background-color: #007aff;
  height: 7px;
  border-radius: 12px;
  width: 30px !important;
}
#offline-video .carousel-inner {
  text-align: center;
}
.startpage-3 .flickity-page-dots .dot.is-selected {
  background-color: #007aff;
  height: 7px;
  border-radius: 12px;
  width: 30px !important;
}
.recent-article a.next-page {
  color: #007aff;
  font-size: 24px;
}
.full-walk {
  height: 100%;
}
.recent-article h1 {
  display: flex;
  align-items: center;
}
.recent-article .flickity-slider {
  width: 102%;
}
.recent-article .carousel-cell {
  width: 80%;
}
/** ----------------------------
Author Profile Page Css Ends
---------------------------- **/

/** -----------------------------
15. Settings Page Css Start
-----------------------------**/
.custom-radios div {
  display: inline-block;
}
.custom-radios input[type="radio"] {
  display: none;
}
.color-bar img {
  width: 60%;
  vertical-align: middle;
  height: 100%;
}
.color-bar .custom-radios input[type="radio"] + label span {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin: 0px 10px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  line-height: 44px;
}
.color-bar .custom-radios input[type="radio"] + label span img {
  opacity: 0;
  transition: all 0.3s ease;
}

.color-bar .custom-radios input[type="radio"]#color-1 + label span {
  background-color: #1987ff;
}
.color-bar .custom-radios input[type="radio"]#color-2 + label span {
  background-color: #ecbd34;
}
.color-bar .custom-radios input[type="radio"]:checked + label span img {
  opacity: 1;
}
.color-bar .custom-radios input[type="radio"]#color-3 + label span {
  background-color: #c281d1;
}
.color-bar .custom-radios input[type="radio"]#color-4 + label span {
  background-color: #8bb0ba;
}
.color-bar .custom-radios input[type="radio"]#color-5 + label span {
  background-color: #ec5e78;
}
.slect-language {
  margin-left: auto;
  font-size: 12px;
  color: #949aa9;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.select-language-block .item-inner,
.content-style,
.user-profile {
  display: flex;
  align-items: center;
}
.select-language-block .btn-toggle {
  padding: 0;
  position: relative;
  border: none;
  height: 19px;
  width: 38px;
  color: #6b7381;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 0 1px 0 rgba(40, 41, 61, 0.08),
    0 0 2px 0 rgba(96, 97, 112, 0.16);
}
.select-language-block .btn-toggle:focus,
.select-language-block .btn-toggle:focus.active,
.select-language-block .btn-toggle.focus,
.select-language-block .btn-toggle.focus.active {
  outline: none;
}
.select-language-block .btn-toggle:before,
.select-language-block .btn-toggle:after {
  line-height: 21px;
  text-transform: uppercase;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
  color: #949aa9;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: right;
}
.select-language-block .btn-toggle:before {
  content: "RTL";
  left: -2rem;
}
.select-language-block .btn-toggle:after {
  content: "";
  right: -4rem;
  opacity: 0.5;
}
.select-language-block .btn-toggle > .handle {
  position: absolute;
  top: 1.5px;
  left: 0.1875rem;
  width: 16px;
  height: 15px;
  border-radius: 12px;
  background: #007aff;
  transition: left 0.25s;
}
.select-language-block .btn-toggle.active {
  transition: background-color 0.25s;
}
.select-language-block .btn-toggle.active > .handle {
  left: 1.2rem;
  transition: left 0.25s;
}
.select-language-block .btn-toggle.active:before {
  opacity: 0.5;
}
.select-language-block .btn-toggle.active:after {
  opacity: 1;
}
.try-btn {
  border-radius: 13px;
  background-color: #007aff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  height: 26px;
  border: none;
  width: 69px;
  cursor: pointer;
}
.user-profile .author-area {
  height: 100%;
}
.user-profile h1 {
  font-size: 20px;
  margin-bottom: 0px;
}
.user-profile {
  padding: 0px 0 18px;
}
.user-name {
  color: #000000 !important;
  font-size: 16px;
  font-weight: 500;
}
.get-pre-setting {
  height: 40px;
  width: 174px;
  margin-top: 8px;
}
.setting-profile {
  height: 100%;
  width: 155px;
}
.setting-potfolio .post-text-outer {
  margin: 0 16px;
}
.setting-potfolio h1 {
  font-size: 20px;
}

/** -----------------------------
Settings Page Css Ends 
-----------------------------**/

/** ------------------------------
16.Language Page Css
--------------------------------**/

.language-wrapper {
  display: flex;
  align-items: center;
}
.language-block .custom-radios {
  margin-left: auto;
}
.language-area h1 {
  font-size: 20px;
  letter-spacing: 0;
  line-height: 28px;
}
.language-wrapper .custom-radios input[type="radio"] {
  display: none;
}
.language-area .language-block {
  padding: 0 10px;
}
.language-block .life-icon {
  margin: 12px 0 12px;
}
.language-img {
  height: 38px;
  width: 38px;
}
.language-block .language-wrapper h3 {
  margin: 0px;
}
.language-wrapper .custom-radios input[type="radio"] + label span {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 18px;
  box-sizing: border-box;
  height: 33px;
  width: 33px;
}
.language-wrapper .custom-radios input[type="radio"] + label span img {
  opacity: 0;
  transition: all 0.3s ease;
}
.language-wrapper .custom-radios input[type="radio"]:checked + label span {
  border: #96be4f solid 0px;
}

.language-wrapper .custom-radios input[type="radio"] + label span {
  border: 2px solid #1d2c35;
}
.language-wrapper .custom-radios input[type="radio"]:checked + label span img {
  opacity: 1;
}
.post-text-outer .art-content .auhtor-content {
  margin: 0 6px;
}

/** ------------------------------
Language Page Css
--------------------------------**/

/** ------------------------------
17. Premiun Pass Page Css Start
------------------------------ **/

.premium-page {
  background: #1987ff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0px;
}
.premium-pass {
  height: 100%;
}
.premium-pass-area h1,
.premium-pass-area p {
  color: #fff;
  text-align: center;
}
.graphic-img {
  padding-bottom: 80px;
}
.premium-pass-area {
  padding: 48px 0 48px;
}
.upgrade-saving,
.upgrade-btn {
  height: 48px;
}
.upgrade-btn {
  background: #fff;
  border: #fff solid 2px;
  color: #000000;
  font-size: 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 21px;
  text-align: center;
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
  transition: 0.8s;
}
.upgrade-btn:hover {
  background: transparent;
  color: #fff;
}
.upgrade-saving {
  background: transparent;
  border: #fff solid 2px;
  color: #fff;
  font-size: 14px;
}
.skip-page .close-icon {
  font-size: 30px;
}
.upgrade-saving:hover {
  background: #fff;
  border: #007aff solid 2px;
  color: #000000;
}

/** ----------------------------
Premiun Pass Page Css Start
---------------------------- **/

/**---------------------------
18. Contact Page Css Start
--------------------------**/

.contact-form h1 {
  color: #000000;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 28px;
  margin-bottom: 0px;
}
#form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-form .form-group .form-control {
  border: 0;
  box-shadow: none;
  border-radius: 0;
  border-bottom: #ddd solid 1px;
}
.contact-form .form-control::-moz-placeholder,
.contact-form .form-group .form-control::-moz-placeholder {
  color: #000;
  font-weight: 500;
  font-size: 14px;
}
.contact-form .form-control:-ms-input-placeholder,
.contact-form .form-group .form-control:-ms-input-placeholder {
  color: #000;
  font-weight: 500;
  font-size: 14px;
}
.contact-form .form-control::-webkit-input-placeholder,
.contact-form .form-group .form-control::-webkit-input-placeholder {
  color: #000;
  font-weight: 500;
  font-size: 14px;
}
.contact-form .form-group {
  position: relative;
}
.contact-form .form-group textarea {
  resize: none;
  min-height: 210px;
  padding-top: 12px !important;
}
.contact-form .form-group select {
  appearance: none;
}
.contact-form .form-control {
  margin-bottom: 7px;
}
.contact-form label.control-label {
  font-size: 12px;
  line-height: 1.07142857;
  font-weight: 400;
  margin: 16px 0 0 0;
}

.contact-area #email {
  color: #007aff;
}
.contact-form .form-group .form-control {
  padding: 0px;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 21px;
  background: transparent;
  padding: 6px 24px 6px 24px;
}
.contact-area .form-control:focus {
  background-color: transparent !important;
}
#contactForm textarea {
  padding: 6px 24px 6px 24px;
}
.contact-area {
  padding: 20px 0px;
}
.selectdiv .form-control:focus {
  color: #949aa9;
}
.selectdiv:after {
  content: "\e904";
  color: #949aa9;
  right: 24px;
  top: 18px;
  padding: 0 0 2px;
  position: absolute;
  pointer-events: none;
  font-family: "icomoon";
}
.selectdiv select:focus-visible {
  border: none;
  outline: none;
}
.selectdiv select {
  width: 100%;
  border: none;
  font-size: 14px;
  padding-left: 0px;
  font-weight: bold;
  color: #949aa9;
}
.selectdiv select.form-control:not([size]):not([multiple]) {
  height: calc(4.25rem + 2px);
}
.select-int {
  margin-top: 0px !important;
}
.message-area {
  font-size: 14px !important;
  font-weight: bold !important;
}
.message-area {
  padding-top: 0 !important;
}
.message-area select.form-control {
  height: 62px !important;
}
.selectdiv {
  margin-top: -20px;
}
.btn-common {
  border: 2px solid #007aff;
  border-radius: 8px;
  width: 100%;
  background: #fff;
  height: 50px;
  color: #007aff;
  transition: 0.8s;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 21px;
  text-align: center;
}
.btn-common:hover {
  background: #007aff;
  color: #ffff;
}
.form-control-txt {
  border-bottom: none;
  width: 100%;
  border: none;
}
.form-control-txt:focus-visible {
  outline: none;
}
.contact-page-inner .main-page {
  width: 100%;
}
.contact-box-area {
  padding: 0px 6px 20px;
}
.contact-page-inner .form-submit {
  width: 90%;
  display: block;
  margin: 0 auto;
  bottom: 24px;
}

.contact-us-form .form-group {
  position: relative;
  padding-top: 20px;
  margin-bottom: 0;
}
.contact-us-form .form-group:first-child:last-child {
  height: 100%;
}
.contact-us-form .form-group:first-child:last-child .form-control {
  height: 100%;
}
.contact-us-form .form-group textarea {
  resize: none;
}
.contact-us-form .form-group .input-highlight {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  display: block;
  bottom: 0;
  transition: width 0.4s ease;
}
.contact-us-form .form-group label {
  position: absolute;
  color: #949aa9;
  top: 15px;
  transition: all 0.4s ease;
  padding: 0px 22px 0px 22px;
}
.contact-us-form .form-group .form-control:focus,
.contact-us-form .form-group .form-control.hasValue {
  box-shadow: none;
  border-color: #ced4da;
}
.contact-us-form .form-group .form-control:focus ~ .input-highlight,
.contact-us-form .form-group .form-control.hasValue ~ .input-highlight {
  width: 100%;
}
.contact-us-form .form-group .form-control:focus ~ label,
.contact-us-form .form-group .form-control.hasValue ~ label {
  transform: scale(0.7);
  top: 0;
  left: 0;
}
.contact-page-inner textarea:focus {
  background: #fff !important;
}
.contact-page-inner .form-group.message-area:before {
  content: "\e904";
  font-family: "icomoon";
  right: 22px;
  color: #949aa9;
  position: absolute;
  top: 40%;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.contact-form .form-group:last-child .form-control {
  border-bottom: none;
}
.success-message p {
  text-align: center;
  color: #1c5a1c;
}
.success-message {
  display: none;
}
.signup.form-submit button#form-submit {
  width: 100%;
}
/**---------------------------
Contact Page Css Ends
-------------------------- **/

/**--------------------------
19. All Pages Css Start
------------------------- **/

.Pages-block.categories-block .item-inner,
.Pages-block.categories-block .content-style .item-title {
  padding: 12px 0;
  display: flex;
  line-height: 32px;
  align-items: center;
}
.item-inner:before {
  content: "\e907";
  font-family: "icomoon";
  right: 22px;
  color: #949aa9;
  position: absolute;
}
.Pages-block ul li a .item-title,
.content-style .item-title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  color: #000;
}
.Pages-block ul li a:hover,
.content-style:hover {
  color: #007aff;
}
.all-pages-inner .travel-area,
.all-pages-inner {
  padding-bottom: 0px;
}
.all-page-name .item-inner {
  line-height: 32px;
  display: flex;
  align-items: center;
}

/**-------------------------------
All Pages Css Ends
------------------------------ **/

/** -----------------------------
20. Settings RTL Page Css Start
-----------------------------**/

.profile-preview .post-text-outer {
  margin-left: 0;
  text-align: right;
  margin-right: 20px;
}
.profile-preview .post-text-outer h1,
.color-preview,
.color-preview h1 {
  text-align: right;
}
.color-preview .item-title {
  text-align: right;
  width: 100%;
}
.color-preview .slect-language {
  margin: 0 12px;
}
.color-preview .item-inner:before {
  left: 24px !important;
  content: "\e906";
  right: auto;
}
.color-preview .btn-toggle:after {
  right: -2rem;
  opacity: 0.5;
  content: "RTL";
}
.color-preview .btn-toggle:before {
  content: "";
}
.color-preview .content-style .slect-language {
  margin-left: 0px;
}
.select-language-block h1 {
  margin-bottom: 0px;
  padding: 15px 0px;
}
.setting-potfolio p.slect-language {
  font-size: 14px;
  line-height: 21px;
}
.profile-preview .list-button {
  height: 40px;
  width: 174px;
  margin: 8px 0 0 auto;
}
.list.pages-list.color-preview.color-bar,
.setting-potfolio .list.pages-list.color-bar {
  margin-top: 20px;
}
.set-language {
  margin-right: 12px;
}
/** ---------------------------------
Settings RTL Page Css Ends
--------------------------------- **/

/*------------------------------------
21. Customize Notifications Css Start
----------------------------------- */

.customize-notifications {
  background: #fff;
  border-radius: 24px 24px 0 0;
  position: fixed;
  z-index: 999;
  padding: 30px;
  bottom: 0%;
}
.notification-page {
  background-color: rgba(0, 0, 0, 0.64);
  padding-bottom: 0;
}
.custom-notification-app {
  position: fixed;
  width: 100%;
  overflow: hidden;
  z-index: -99;
}
.ui-bell {
  text-align: center;
  font-size: 58px;
  margin: 0px 0 14px;
}
.ui-bell .icon-notifications {
  color: #5b5b5b;
}
.ui-notfi {
  text-align: center;
}
.ui-notfi h3 {
  color: #000000;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 28px;
  text-align: center;
}
.choose-the-below-cat {
  color: #949aa9;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 21px;
  text-align: center;
  margin: 20px 0;
}
.customize {
  width: 96%;
  margin: 0 auto;
}
.hashtag-area.pill-container {
  height: auto;
}

/*--------------------------------
Customize Notifications Css  Ends
--------------------------------*/

/*------------------------------
22. Search Page Css Start
-----------------------------*/
.search-page-content .home-cat-slider .carousel .flickity-viewport {
  width: 100%;
  margin: 0 auto;
  margin-right: 0;
  margin-left: 0px;
}
.search-page-content .home-cat-slider .carousel-cell:first-child {
  margin-left: 0px !important;
}
.cat-content .icon-trending-white:before {
  color: #949aa9;
}
.search-page-content
  .trending-carousel
  .flickity-viewport
  .flickity-slider:first-child
  .carousel-cell {
  transform: translateX(12px) !important;
}
/*.intrest-wrap:nth-child(1), .intrest-wrap:nth-child(4)  {
    margin-left: 0;
}*/
span.cat-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto;
  font-weight: bold;
  font-size: 36px;
  color: #000;
  border: 1px solid;
  border-color: rgba(148, 154, 169, 0.3);
  padding: 15px;
}
.cat-content .active .cat-icon {
  border: 1px solid #007aff;
  background-color: #007aff;
}
.cat-content .active {
  color: #007aff;
}
.cat-content {
  text-align: center;
  width: 100%;
}
.cat-content a {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0;
  line-height: 18px;
  color: #949aa9;
}
.cat-content .active span.allnews {
  color: #007aff;
}

span.allnews {
  margin-top: 6px;
  display: block;
  margin-bottom: 36px;
}
.cat-content .active .cat-icon .icon:before {
  color: #fff;
}
.hashtag h1 {
  font-size: 16px;
  margin-bottom: 18px;
}
.hashtag-area input[type="checkbox"]:checked + label {
  background-color: #007aff;
  color: #fff;
}
.hashtag-area .selector {
  color: #949aa9;
  border: 1px solid #d8d8d8;
}
.all-kind-cat {
  padding: 0px 10px;
}
.categories.hashtag {
  padding: 0 10px;
}
.all-kind-cat .cat-content .icon {
  color: #949aa9;
}

/*-----------------------------------
Search Page Css Ends
----------------------------------- */

/**---------------------------------
23. Build My Feed 1 Pages Css Start
-------------------------------- **/
.add-following {
  background: #007aff !important;
  color: #fff !important;
  border: #007aff solid 1px !important;
}
.follow-btn-story {
  border-radius: 8px;
  color: #007aff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 21px;
  text-align: center;
  display: flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
  border: #ffffff solid 1px;
  transition: 0.8s;
  background: #fff;
}

.build-feed .build-content {
  position: absolute;
  z-index: 999;
  bottom: 0px;
  width: 100%;
  text-align: center;
  padding: 8px 17px;
}
.build-feed .build-content h3 {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
.walk-page .walkthrough-area .list-button,
.walk-page .walkthrough-area .follow-btn {
  height: 33px;
  margin: 0px;
}
.build-feed .build-content .list-button {
  font-size: 12px;
  transition: 0.8s;
}
.build-content .follow-btn {
  background: #fff;
  border-color: #fff;
}
.build-content .follow-btn:hover {
  background-color: #007aff;
  color: #fff !important;
  border-color: #007aff;
}
.bottom-fixed {
  position: fixed;
  z-index: 999;
  bottom: 20px;
  display: block;
  text-align: center;
  width: 100%;
  margin: 0px;
}
.build-feed-1 .page-header {
  padding: 24px 10px 12px;
}
.bottom-fixed .list-button:hover {
  background: white;
  color: #007aff;
  border-color: #fff;
}
.bottom-fixed .list-button {
  font-size: 14px;
  height: 48px;
  width: 228px;
  margin: 0 auto;
}
.build-feed-1.mobile-area.walk-page {
  padding-bottom: 0px;
}
.build-feed-1 .walkthrough-area {
  display: flex;
  align-items: start;
  justify-content: center;
  height: 100%;
}
.build-feed-1.signup {
  margin: 8px 0;
}
.build-feed-1 .walkthrough-area .content {
  margin-bottom: 24px;
}
.build-feed-1 .walkthrough-area .build-feed.wrap-vdo {
  margin: 0;
}
.build-feed-1 a.list-button:hover {
  background: #fff;
  border: transparent;
}

/**-----------------------------
Build My Feed 1 Pages Css Start
---------------------------- **/

/**----------------------------
24. Story News Page Css Start
--------------------------- **/

.story-head {
  background-size: cover !important;
  object-fit: cover;
  position: relative;
  background-position: center center !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 24px;
}
.view-more {
  padding: 0px 0;
}
.news-test .head-content {
  text-align: center;
  position: absolute;
  top: 80%;
  left: 0;
  transform: translate(0%, 0);
  color: white;
  width: 100%;
}
span.nws {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 20 20px 0;
}
.story-header {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #202223 5%);
}
.story-head {
  background: url(../images/image9.jpg);
  min-height: 563px;
}
.story-header .post-wraper.all-post {
  margin-bottom: 0px;
}
.story-header h1 {
  margin: 20px 0 0;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 41px;
  width: 76%;
}
.author-area1 {
  display: inline-flex;
  border-radius: 50px;
  background: #fed255;
  width: 90px;
  height: 66px;
}
.author-area1 img {
  width: 88%;
  object-fit: cover;
  border-radius: 50px;
  margin: 0 auto;
}
.story-header h3.auth-name,
.story-header .auth-art {
  color: #fff;
}
.view-more p {
  color: #949aa9;
}
.home-w-page {
  padding-bottom: 0;
}
.read-icon a span {
  font-size: 70px;
  border-radius: 50px;
  border: 1px solid #949aa9;
}
.read-icon.bottom-fixed a {
  position: sticky;
  z-index: 999;
  bottom: 60px;
  display: block;
  width: 100%;
  left: 0;
  right: 0;
  text-align: center;
}
.read-icon.signup.bottom-fixed {
  width: 100%;
  text-align: center;
  right: 0;
  margin: 0;
  left: 0;
}
.read-icon .load-more-btn {
  margin: 0px;
}
.view-more {
  padding: 20px 0;
}
.mobile-area.walk-page.build-feed-1 .bottom-fixed {
  bottom: 30px;
}
.news-test .articles-details-page {
  padding-bottom: 0;
}
.short-story-friction h1 {
  color: #ffffff;
  font-family: "Quicksand", sans-serif;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 41px;
  margin-bottom: 0;
  padding: 22px 0 10px;
}
.short-story-friction {
  position: absolute;
  bottom: 0px;
  width: 100%;
  left: 0px;
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(36, 37, 38, 0) 0%, #242526 100%);
  border-bottom: 1px solid #313131;
}
.story-area-content {
  padding: 20px 0 0;
}
section.home.news-test {
  height: 100%;
  background: linear-gradient(360deg, rgb(33 34 35) 0, #242525 0);
}
.readmore {
  position: relative;
  max-height: 100px;
  overflow: hidden;
  transition: max-height 0.15s ease-out;
}
.news-test .viewMore {
  width: 100%;
  display: block;
  text-align: center;
  padding-top: 12px;
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
}
.news-test .icon-arrow-down2 {
  font-size: 60px;
  border-radius: 50%;
  border: 0.7px solid #4b4b4b;
}
.news-test .close-bar {
  padding-right: 24px;
}
.readmore p,
.readmore-list p {
  color: #949aa9;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 21px;
}
.readmore-link {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 100%;
  background-image: linear-gradient(
    180deg,
    rgba(36, 37, 38, 0) 0%,
    #242526 100%
  );
}
.news-test .section {
  padding: 24px 24px;
}
.readmore-link .viewMore {
  width: 100%;
  display: block;
  text-align: center;
  position: absolute;
  bottom: 0;
}
.readmore.expand {
  max-height: 5000px !important;
  transition: max-height 0.35s ease-in-out;
}
.readmore-link.expand {
  position: relative;
  background-image: none;
  padding-top: 10px;
  height: 20px;
}
.story-user {
  display: inline-flex;
  border-radius: 50%;
  background: #fed255;
  width: 48px;
  height: 48px;
}
.read-icon.signup.bottom-fixed {
  bottom: 54px !important;
}
.story-post-wraper {
  display: flex;
}
.story-user img {
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto;
  height: 40px;
}
.story-text p {
  color: #949aa9;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 21px;
}
.story-icon h3 {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 21px;
}
.story-icon h5 {
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
}
.story-icon {
  margin-left: 12px;
}
.story-text {
  padding: 24px 24px;
}

/*------------------------------------
Story News Page Css
---------------------------------- */

/**---------------------------------
25. Build My Feed 2 Pages Css Start
-------------------------------- **/

.mobile-area.build-my-feed {
  padding-bottom: 0;
}
.feed-box {
  width: 100%;
}
.feed-box h3 {
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 24px;
  text-align: left;
}
.feed-box h4 {
  color: #949aa9;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 18px;
  text-align: left;
}
.dark-skip a {
  color: #3e3e3e !important;
}
.custom-check .form-group label {
  position: relative;
  cursor: pointer;
}
.custom-check label:before {
  content: "";
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  border: 2px solid #1d2c35;
  background: transparent;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 18px;
  box-sizing: border-box;
  height: 36px;
  width: 36px;
}

.custom-check input:checked + label:after {
  content: "\e973";
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: "icomoon";
  color: #fff;
}
.custom-check.custom-radios {
  font-size: 18px;
}
.custom-check.custom-radios .form-group {
  margin-bottom: 0;
}
.build-my-feed-2 {
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #96be4f;
  background-color: #96be4f;
}
.skip-base {
  color: #007aff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
  display: block;
  margin: 20px 0;
}
.load-more-btn.follow-author {
  margin: 46px 0 0;
}
.build-my-feed-2 .main-page {
  width: 100%;
}
.build-my-feed-2 .language-area .language-block {
  padding: 0;
}
/**---------------------------------
Build My Feed 2 Pages Css Ends
------------------------------- **/

/** ------------------------------
26. Weather Screen Page Css Start
------------------------------ **/
.weather-page {
  background-image: linear-gradient(
    0deg,
    rgba(95, 111, 130, 1) 0%,
    rgba(83, 91, 114, 1) 70%
  );
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.weather-page1 {
  padding-bottom: 0;
}
.weather-page .premium-pass-area {
  padding: 0px 0 0px;
}
.weather h1 {
  margin-bottom: 0px;
}
.weather p {
  font-size: 12px !important;
  font-weight: bold !important;
  letter-spacing: 0 !important;
  line-height: 18px !important;
  text-align: center !important;
}
.temp p {
  font-size: 120px;
  letter-spacing: 0;
  line-height: 126px;
  text-align: center;
  color: #fff;
  font-weight: normal;
}
.degree-icon {
  font-size: 24px;
  line-height: 76px;
  margin: 0 6px;
  color: #fff;
}
.weather-wrap h5 {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
  color: #fff;
}
.weather-wrap h5 .hrs-sec {
  margin: 0 10px 0 0px;
}
.weather-bar table th {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 44px;
  color: #fff;
}
.weather-bar table {
  position: relative;
  top: 10px;
  width: 100%;
  text-align: left;
}

.rain-deg {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 18px;
  color: #fff;
}
.weather-bar {
  padding: 14px 15px 0;
}
.weather-bar table td {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 24px;
  color: #fff;
}
.stretch-card > .card {
  width: 100%;
  min-width: 100%;
}

.weakly-weather-item h3 {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
}
.card-weather .weakly-weather .weakly-weather-item {
  flex: 0 0 12%;
  padding: 8px 3px;
  text-align: center;
}
.weakly-weather-item .sunny-img.sunrise-icon {
  margin: 6px 3px;
}
.weakly-weather-item.all-day-env p {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 24px;
}
.all-day-p {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 24px;
}
.weakly-weather-item p {
  color: #fff;
}
.sunny-img img {
  width: 80px;
  margin: 20px 0;
}
.am {
  font-size: 12px;
  line-height: 18px;
}
.all-day-env .sunny-img img {
  margin: 12px 0 20px;
}
.all-day-env .sunny-img {
  width: 46px;
  margin: 8 auto;
}
.today-block {
  border-bottom: 1px solid #5f6f82;
  border-top: 1px solid #5f6f82;
  width: 100%;
}
.wheather-area {
  padding-bottom: 38px;
}
.weakly-weather-item span.icon-sun {
  font-size: 30px;
}
.weakly-weather-item .sunny-img span {
  font-size: 22px;
}
.today.text-center.cloud-text .icon-combo-weather {
  font-size: 46px;
}
.weather-page .icon-sun {
  color: #f8b900;
}
.weather-page .icon-cloud-rain {
  color: #fff;
  font-size: 22px;
}
p.all-day-p {
  font-size: 12px !important;
  font-weight: bold !important;
  letter-spacing: 0;
  line-height: 24px;
}
.sunny-img.sunrise-icon span {
  font-size: 32px;
}
.comman-ico {
  font-size: 24px;
  top: 6px;
  position: relative;
}
.weather-wrap {
  width: 82%;
}
.today.cloud-text {
  display: inline-flex;
  align-items: center;
}
span.icon-degree1.degree-icon:before {
  position: absolute;
}
.weather-tem {
  display: flex;
}
.premium-pass-area.weather .content {
  padding-bottom: 16px;
}
.card-weather .weakly-weather {
  display: flex;
  flex-grow: 1;
}
.card-weather .weakly-weather .weakly-weather-item {
  flex-grow: 1;
}
.shadow-scroll-x {
  overflow-x: auto;
}
.shadow-scroll-x::-webkit-scrollbar {
  height: 1px;
  background-color: white;
}
.shadow-scroll-x::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 3px;
}
.shadow-scroll-x::-webkit-scrollbar-button {
  display: none;
}
/** ----------------------------
Weather Screen Page Css Ends
---------------------------- **/

/**----------------------------------
27. Home Page Weather Page Css Start
--------------------------------- **/
.walk-page-2 {
  height: 100%;
  display: flex;
  justify-content: center;
  width: 100%;
}
.walk-page-2 .walkthrough-area {
  margin-top: 22px;
}
.walk-page-2 #offline-video {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 44px;
}
.banner-carousel .flickity-viewport {
  overflow: visible;
}
.rainy-area {
  background-image: url(../images/bg-thumb1.png) !important;
  padding: 30px 20px 30px 30px;
  height: auto;
  background-repeat: no-repeat !important;
  background-size: cover;
  margin: 24px 0px;
}
.main-area.rainy-area.app-area .banner-carousel .flickity-viewport {
  height: auto !important;
  position: initial;
}
.rainy-area .slider-content {
  max-width: 100%;
}
.weather-content {
  display: flex;
  max-width: 100%;
  width: 100%;
}
.rainy-area .carousel-cell {
  width: 100%;
  margin-right: 0px;
}
.detail-report {
  width: 100%;
  text-align: left;
  padding-left: 24px;
}
.today-report {
  width: 24%;
  text-align: left;
}
.today-report h1 {
  margin-bottom: 0px;
}
.today-report .big-weather {
  font-size: 86px;
}
.date-time {
  font-size: 16px;
  margin-bottom: 20px;
}
.rainy-area .banner-carousel .flickity-page-dots {
  bottom: -64px !important;
}
.rainy-area .banner-carousel .flickity-page-dots .dot {
  background: #ececec !important;
  margin: 0 4px;
}
.rainy-area .banner-carousel .flickity-page-dots .dot.is-selected {
  background-color: transparent !important;
}
.daily-temp p {
  color: #000000;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 41px;
}
.daily-temp {
  display: flex;
  align-items: center;
}
.degre-cel sup {
  font-size: 24px;
  font-weight: bold;
  color: #000000;
}
.super-deg {
  margin-top: -4px;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 32px;
  color: #000;
}
.degre-cel {
  display: inline-flex;
}
.degre-cel .degree-icon {
  margin: 0px;
}
.cooler {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
  align-items: center;
  display: inline-flex;
  margin-left: 12px;
  color: #000000;
}
.home-blog .carousel-cell {
  width: 60%;
}
.home-blog {
  padding: 50px 0;
}
.home-slider-content {
  left: 0px;
  right: 0px;
  background-color: #ffffff;
  position: absolute;
  bottom: 4px;
  margin: 10px;
  border-radius: 8px;
  padding: 12px;
}
.home-slider-img img {
  border-radius: 12px;
  width: 100%;
}
.short-story-is-a-pie {
  display: flex;
}
.short-story-is-a-pie .auth-art {
  margin-left: auto;
}
.short-story-is {
  padding: 4px 0;
}
.short-story-is-a-pie p {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
}
.short-story-is-a-pie span.nws a {
  padding-top: 6px;
  padding-bottom: 6px;
}
.startpage-2 .home-slider-content {
  bottom: 0px;
  padding: 8px 16px;
}
.all-search .search-img.active {
  border: #007aff solid 1px;
}
.search-img {
  height: 70px;
  width: 70px;
  border: #949aa9 solid 1px;
  border-radius: 50px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
}
.all-search .carousel-cell img {
  border-radius: 50px;
  object-fit: cover;
  width: 100%;
  border-radius: 50px;
  padding: 2px;
}
.all-search .owl-carousel .owl-item img {
  display: block;
  width: 100%;
  border-radius: 50px;
  object-fit: cover;
  width: 100%;
  border-radius: 50px;
  padding: 2px;
}
.all-search .item {
  text-align: center;
}
.all-search .item p {
  color: #141414;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
  margin: 8px 0px;
}
.weather-slider-wrap {
  padding: 30px 0px 30px 15px;
}
.home-cat-slider .carousel-cell {
  width: 31%;
  margin-right: 0 !important;
  margin-left: 35px;
}
.home-cat-slider .carousel-cell:first-child {
  margin-left: 62px !important;
}
.home-cat-slider .carousel .flickity-viewport {
  width: 100%;
  margin: 0 auto;
}

.home-cat-slider.slider-cat {
  padding-left: 0;
}
.home-cat-content {
  padding: 0 12px;
}
.home-cat-content h6 {
  margin-bottom: 20px;
}
.home-cat-slider {
  padding: 0px 0px 30px 0px;
}
.slider-head {
  padding: 0px 0px 30px 10px;
}
.home-c-content {
  margin-top: 14px;
  text-align: left;
}
.all-search-slider {
  padding-left: 24px;
}
.startpage-2 .weather-slider-wrap {
  padding: 0px 0px 14px 15px;
}
.startpage-2 .home-page-weather {
  padding: 0 10px;
}
.startpage-2 .weather-slider-wrap .item a p {
  font-family: "Roboto", sans-serif;
  font-weight: normal;
}
.startpage-2 .home-blog .carousel {
  padding: 0 0px 0 10px;
}
.startpage-2 .home-treanding .carousel-cell {
  width: 61%;
}
.startpage-2 .sub-headings {
  line-height: 24px;
}
.startpage-2 .post-wraper {
  margin: 20px 0 20px;
}
.startpage-2 .follow-btn,
.startpage-2 .auth-name {
  margin: 0px 0;
}
.startpage-2 .post-wraper:last-child {
  margin-bottom: 00;
}
.startpage-2 .home-treanding {
  padding-bottom: 30px;
}
.walk-page-2 {
  padding-bottom: 0px;
}

/**----------------------------------
Home Page Weather Page Css Ends
--------------------------------- **/

/** ------------------------------
28. Video Player Page Css Start
------------------------------ **/

.video-container {
  display: flex;
  height: 100%;
  width: 100%;
}
.video-container .video-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-container video {
  width: 518px;
  height: 290px;
  border-radius: 4px;
}
.play-button-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.play-button-wrapper #circle-play-b {
  cursor: pointer;
  pointer-events: auto;
}
.play-button-wrapper #circle-play-b svg {
  width: 100px;
  height: 100px;
  fill: #fff;
  stroke: #fff;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  opacity: 0.9;
}
.close-vdo {
  position: absolute;
  z-index: 999;
  right: 0;
  padding: 24px;
}
.close-vdo .close-icon {
  font-size: 40px;
  color: #ffff;
}
.vdo-palyer .story-news-area.all-auth-wraper {
  padding: 0 !important;
}
.video-container iframe {
  border: none;
  width: 100%;
  height: 100%;
}
video {
  margin: 0px !important;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
body {
  margin: 0px !important;
}
.play-pause {
  top: 50%;
}
.video-section {
  background: #000;
}
/** ------------------------------
Video Player Page Css Ends
------------------------------ **/

/*--------------------------------
29. Live Reporting Page Css Start
--------------------------------*/

.live-tag {
  border-radius: 8px;
  background-color: #ed1d1d;
  height: 21px;
  width: 30px;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 21px;
  text-align: center;
  padding: 10px 20px;
  text-transform: uppercase;
}
.usa-china-plicy-sh {
  padding: 20px 0 30px;
  border-bottom: 1px solid #e2e2e2;
}
.usa-china-plicy-sh p {
  color: #949aa9;
  font-weight: 600;
}
.usa-china-plicy-sh h1 {
  margin-bottom: 12px;
}
.usa-china-img {
  margin: 20px 0px 0;
}
.usa-china-img img {
  border-radius: 16px;
}
.live-event {
  display: flex;
  padding: 20px 0;
}
.event-date {
  width: 25%;
}
.event-content {
  width: 74%;
  margin-left: auto;
}
.event-date h5 {
  color: #949aa9;
  font-size: 12px;
  margin: 8px 0;
}
.social-icon {
  margin: 20px 0px 0;
}
.social-icon li {
  display: inline-block;
  font-size: 30px;
}
.live-event-area .usa-china-img {
  margin-top: 0;
}
.live-event h4 {
  color: #949aa9;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 21px;
}
.live-event-area {
  border-bottom: 1px solid #e2e2e2;
}
.live-event-area:last-child {
  border-bottom: none;
}

/*----------------------------------
Live Reporting Page Css Ends
-------------------------------- */

/*-----------------------------------
30. Left Navigation Page Css Start
--------------------------------- */

.panel-default > .panel-heading a[aria-expanded="true"]:after {
  content: "\2212";
}
.panel-default > .panel-heading a[aria-expanded="false"]:after {
  content: "\e904";
  right: 6px;
}
.panel-default > .panel-heading a[aria-expanded="true"]:after {
  content: "\e904";
  color: #949aa9;
  font-size: 16px;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  right: 6px;
}
.panel-default > .panel-heading a:after {
  content: "";
  position: relative;
  top: 1px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  font-family: icomoon;

  transition: transform 0.25s linear;
  -webkit-transition: -webkit-transform 0.25s linear;
}
.select-language-block.left-nav ul li .item-title {
  display: flex;
  align-items: center;
}
.nav-icon {
  font-size: 24px;
  margin: 0 8px;
}

.left-nav .panel-group ul li {
  border-bottom: none;
}
.left-nav .panel-group {
  padding: 15px 0;
}
.left-nav ul li {
  padding: 0 15px;
  border-bottom: 1px solid #f3f3f3;
}
.left-nav ul li:last-child {
  border-bottom: none;
}
.left-nav .panel-group ul li span {
  color: #949aa9;
  font-size: 14px;
  font-weight: bold;
  line-height: 28px;
}
.left-nav .panel-group .panel-body {
  padding: 15px 30px 0px 30px;
}
.left-nav .panel-group .panel-title a {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 24px;
  color: #000;
}
.left-nav .panel-group .panel-title a.active,
.left-nav .panel-group .panel-title a.active .nav-icon:before {
  color: #949aa9;
}
.left-nav .icon-notifications:before {
  color: #949aa9;
}
.left-navigation .categories {
  margin-bottom: 0px;
}
.left-navigation .categories-block {
  margin: 0px;
  padding-bottom: 0px;
}
.left-navigation #headingOne a {
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left-navigation #headingOne a p {
  display: flex;
}

/*-----------------------------------
Left Navigation Page Css Ends
--------------------------------- */

/** ---------------------------------
31. Dark Mode Css Start
----------------------------------- **/

.night-mode-on,
.night-mode-on .page-footer,
.night-mode-on .contact-form .form-group textarea,
.night-mode-on .btn-common {
  background: #242526;
}
.night-mode-on h1,
.night-mode-on p,
.night-mode-on h2,
.night-mode-on .tabbar-label,
.night-mode-on .all-kind-cat .cat-content .icon,
.night-mode-on .auth-name,
.night-mode-on .auth-art,
.night-mode-on .user-name,
.night-mode-on .signup .log-title,
.night-mode-on .Pages-block ul li a .item-title,
.night-mode-on .content-style .item-title,
.night-mode-on .item-count,
.night-mode-on .chan-flow-count,
.night-mode-on .recent-article-txt h3,
.night-mode-on .news-tab .active,
.night-mode-on .news-tab a:hover,
.night-mode-on h6,
.night-mode-on .news-tab li a,
.night-mode-on h4,
.night-mode-on .super-learner h3,
.night-mode-on .icon-dots:before {
  color: #ffffff !important;
}
.night-mode-on .detail-report p,
.night-mode-on .today-report h1 {
  color: #000 !important;
}
.night-mode-on .learner2 p {
  color: #949aa9 !important;
}
.night-mode-on .story-text p {
  color: #949aa9 !important;
}

.night-mode-on .recent-article-txt .learner-txt h4 {
  color: #949aa9 !important;
}
.night-mode-on .short-story h3 {
  color: #fff !important;
}
.night-mode-on p.slect-language {
  color: #949aa9 !important;
}
.night-mode-on .list-area p {
  color: #000 !important;
}
.night-mode-on .icon-mail .path1:before {
  color: #323b54;
}
.night-mode-on .signin-up {
  color: #fff;
  opacity: 1;
}
.night-mode-on .profile-block {
  background: rgb(83, 91, 114, 0.3);
}
.night-mode-on .recent-article .carousel-cell {
  background-color: #323b54;
}
.night-mode-on .nav-item.active .nav-link {
  color: #007aff !important;
}
.night-mode-on .trending-story,
.night-mode-on .get-up p {
  color: #949aa9 !important;
}
.night-mode-on .life-txt,
.night-mode-on .auth-life-txt {
  border-bottom: 1px solid rgba(75, 75, 75, 0.3);
}
.night-mode-on .toolbar.app-customtoolbar {
  border-top: 1px solid rgba(75, 75, 75, 0.3);
}
.night-mode-on .seperator-line {
  border: 1px solid rgba(75, 75, 75, 0.3);
}
.night-mode-on .tab-link-active .tabbar-label,
.night-mode-on .tab-link-active p,
.night-mode-on .tab-link:hover .tabbar-label,
.night-mode-on .tab-link:hover p {
  color: #007aff !important;
}
.night-mode-on .author-block {
  border: 0.7px solid #4b4b4b;
}
.night-mode-on .profile-flow,
.night-mode-on .follow-area,
.night-mode-on .story-con {
  border-bottom: 0.3px solid #4b4b4b;
}
.night-mode-on
  .language-wrapper
  .custom-radios
  input[type="radio"]
  + label
  span {
  border: 2px solid #949aa9;
}

.night-mode-on
  .language-wrapper
  .custom-radios
  input[type="radio"]:checked
  + label
  span {
  border: #96be4f solid 0px;
}

.login-screen.night-mode-on,
.night-mode-on .home-page,
.night-mode-on #forgot-password,
.night-mode-on #forgot-password .modal-content {
  background: #323b54;
}
.night-mode-on .main-area {
  background: #242526;
}
.night-mode-on .form-control-txt,
.night-mode-on #name,
.night-mode-on .story-content h3 {
  color: #fff;
}
.night-mode-on .btn-common:hover {
  background: #007aff;
}

.night-mode-on .live-event-area,
.night-mode-on .usa-china-plicy-sh {
  border-bottom: 1px solid #4b4b4b;
}
.night-mode-on .live-event-area:last-child,
.night-mode-on .usa-china-plicy-sh:last-child {
  border-bottom: none;
}
.night-mode-on .startpage-2 .home-slider-content p {
  color: #000000 !important;
}
.night-mode-on .app-area {
  background-image: url(../images/bg-thumb2-dark.png);
  background-repeat: no-repeat;
  background-position: center center;
}
.night-mode-on .forget-colse {
  color: #fff;
}
.night-mode-on .customize-notifications {
  background-color: #1987ff;
}
.night-mode-on .ui-notfi h3,
.night-mode-on .ui-notfi p,
.night-mode-on .ui-bell .icon-notifications,
.night-mode-on .hashtag-area .customize-notification .selector {
  color: #fff;
}
.night-mode-on
  .hashtag-area
  .customize-notifications
  input[type="checkbox"]:checked
  + label {
  background-color: #fff;
  color: #040404;
}
.night-mode-on .customize-notifications .loadMore {
  border: 1px solid #ffffff;
  color: #fff;
}
.night-mode-on .build-feed-1 .content p {
  color: #949aa9 !important;
}

.night-mode-on .custom-check label:before {
  border: 2px solid #949aa9;
}
.night-mode-on .build-my-feed-2 .feed-box h4 {
  color: #949aa9 !important;
}
.night-mode-on .notification-page .hashtag-area .selector {
  color: #fff;
}
body.night-mode-on .custom-notification .hashtag-area .selector {
  color: #fff;
  border: 1px solid #fff;
}
body.night-mode-on .hashtag-area input[type="checkbox"]:checked + label {
  color: #000000;
  background: #fff;
}
.night-mode-on .dark-skip a {
  color: #fff !important;
}
body.night-mode-on .event-content h4 {
  color: #949aa9 !important;
}
/** -------------------------------------------------
Dark Mode Css
---------------------------------------------------- **/

/** ------------------------- 
RTL Preview Css Start Here
--------------------------**/
body.rtl-on {
  direction: rtl;
  text-align: right;
}
body.rtl-on h1 {
  text-align: right;
  direction: ltr;
}
body.rtl-on .item-inner:before {
  content: "\e906";
  font-family: "icomoon";
  right: auto;
  color: #949aa9;
  position: absolute;
  left: 25px;
}
body.rtl-on .post-text-outer {
  margin: 0 16px;
}
body.rtl-on .time-content span.author-area {
  margin-right: 0px;
  margin-left: 12px;
}
body.rtl-on .post-area.post-area-main .post-wraper .art-content .author-area,
body.rtl-on .video-articles-list-page .author-area {
  margin-right: 0;
  margin-left: 20px;
}
body.rtl-on .slect-language {
  margin-left: inherit;
  margin-right: auto;
}
body.rtl-on .select-language-block .btn-toggle:before {
  left: 3rem;
}
body.rtl-on .set-language {
  margin-left: 12px;
}
body.rtl-on .home-page a.log-title,
body.rtl-on .login-footer p,
body.rtl-on .forget-cover h1,
body.rtl-on .forget-cover p {
  direction: ltr;
}
body.rtl-on .language-area .post-text-outer {
  flex-direction: row;
  justify-content: flex-end;
}
body.rtl-on .walkthrough-area p {
  text-align: right;
}
body.rtl-on .weather-slider-wrap {
  direction: ltr;
}
body.rtl-on
  .videos-wrapper
  .flickity-viewport
  .flickity-slider:last-child
  .carousel-cell,
body.rtl-on
  .trending-carousel
  .flickity-viewport
  .flickity-slider:last-child
  .carousel-cell {
  transform: translateX(-60px) !important;
}
body.rtl-on .app-area .slider-txt h1 {
  text-align: center;
}
.rtl-on .news-area {
  padding: 0 25px;
}
.rtl-on .all-post .button-btn.auth-btn {
  margin: 0 auto 0 0;
}
.rtl-on .recent-article h1 {
  text-align: right;
  direction: rtl;
  padding: 0 25px;
}
.rtl-on .recent-article-txt .learner-txt {
  padding: 0 0 0 0px;
}
.rtl-on .contact-page-inner .form-group.message-area:before {
  left: 22px;
  right: auto;
}

body.rtl-on .form-wrap {
  left: 0;
  text-align: left;
  direction: ltr;
}
body.rtl-on .build-my-feed-2 .language-block .language-wrapper h3 {
  text-align: right;
}
body.rtl-on .build-my-feed-2 .language-block .custom-radios {
  margin-left: 0;
  margin-right: auto;
}
body.rtl-on .news-test .story-icon {
  margin-right: 12px;
}
body.rtl-on .weather-bar table td,
body.rtl-on .weather-bar table th {
  text-align: right;
}
body.rtl-on .lifetime.button-btn.auth-btn-1 {
  margin: 0 auto 0 0;
}
.rtl-on .left-navigation .skip-page.dark-skip {
  text-align: left;
}

/**=====================
Components Slider
====================== **/
.components-slider .walkthrough-area {
  margin-bottom: 44px;
}

.components-slider .weather-slider-wrap {
  padding: 20px 0px 60px 15px;
}
.all-components #offline-video .carousel-inner {
  margin-bottom: 158px;
}
.carousel-inner {
  border-end-end-radius: 10px;
  border-end-start-radius: 10px;
}
.components-slider .banner {
  padding: 0px 10px 32px;
}
.components-slider .app-area {
  padding: 32px 34px;
}
.card-style {
  margin-bottom: 80px;
}
.card-components .follow-btn {
  margin: 0px 0;
}
.card-components .list-button {
  height: 33px;
}

.card-components .post-wraper.all-post {
  margin: 0;
}
.media-page .post-wraper {
  margin: 20px 0 20px;
}
.rtl-on .panel-default > .panel-heading a[aria-expanded="true"]:after {
  right: -8px;
}

.home {
  height: 100%;
}
.modal.forgot-password-page .modal-body {
  display: block;
}

/* --- Remade Menu Tabs (Modern) --- */
#menu-tabs {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; /* smooth scrolling iOS */
  border-bottom: 1px solid #e5e7eb;
  gap: 10px;
}

/* Hide scrollbar for Chrome/Safari/Opera */
#menu-tabs::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#menu-tabs {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Back Button Item */
#menu-tabs li:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  padding-left: 10px;
  cursor: pointer;
}

#menu-tabs li:first-child svg {
  transition: transform 0.2s;
}

#menu-tabs li:first-child:hover svg {
  transform: translateX(-3px);
}

/* Tab Items */
.nav-item {
  display: inline-block;
}

.nav-link {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 50px; /* Pill shape */
  text-decoration: none;
  color: #64748b;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  background-color: transparent;
  border: 1px solid transparent;
}

.nav-link:hover {
  background-color: #f1f5f9;
  color: #334155;
  text-decoration: none;
}

/* Active State */
.nav-item.active .nav-link {
  color: #ffffff;
}

/* Mobile specific spacing */
@media (max-width: 480px) {
  #menu-tabs {
    padding: 10px 15px;
  }

  .nav-link {
    padding: 8px 16px;
    font-size: 13px;
  }
}