/* Table of Contents
/* ------------------------------------------------------------

This is a development CSS file which is built to a minified
production stylesheet in assets/built/screen.css

1.  Global Styles
2.  Layout
3.  Site Header
4.  Site Navigation
5.  Post Feed
6.  Single Post
  6.1. Post Byline
  6.2. Subscribe
  6.3. Read More
  6.4. Comments
7.  Author Template
8.  Tag Template
9.  Error Template
10.  Site Footer
11. Dark Mode
12. Lightbox

*/

/* 1. Global - Set up the things
/* ---------------------------------------------------------- */

/* Import CSS reset and base styles */
@import "global.css";

:root {

    /* Colours */
    --color-green: #a4d037;
    --color-yellow: #fecd35;
    --color-red: #f05230;
    --color-darkgrey: #15171A;
    --color-midgrey: #738a94;
    --color-lightgrey: #f1f1f1;
    --color-secondary-text: #979797;
    --color-border: #e1e1e1;
    --color-wash: #e5eff5;
    --color-darkmode: #151719;

    /*
    An accent color is also set by Ghost itself in
    Ghost Admin > Settings > Brand

    --ghost-accent-color: {value};

    You can use this variable throughout your styles
     */

    /* Fonts */
    --font-sans: -apple-system, BlinkMacSystemFont, "DM Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --font-serif: Georgia, Times, serif;
    --font-mono: Menlo, Courier, monospace;

}

a{
    text-decoration: none !important;
}

body{
    background: var(--Background, #FFF);
}
.cs-viewport{
    display: flex;
    padding: 23px 32px;
    flex-direction: column;
}
/* .header{

} */


/* ----------------- header style --------------- */
#dheader{
    z-index: 9;
}
.nav-bar{
    display: flex;
    width: 100%;
    padding: 0px;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
}
.nav-bar-mobile{
  display: none;
}
.cs-menu{
    display: flex;
    align-items: center;
    gap: 48px;
}
.cs-dlogo{
    display: flex;
    /* width: 95px; */
    width: auto;
    /* height: 24.099px; */
    height: auto;
    padding-bottom: 0.099px;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
}
.cs-logo{
    color: var(--Secondary-500, #212121);
    font-family: "DM Sans";
    font-size: 18.477px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.p-logo{
    color: var(--Primary-500, #8A6CC8);
    font-family: "DM Sans";
    font-size: 18.477px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.img-logo{
    display: inline-flex;
    width: 12.429px;
    height: 12.722px;
    flex-shrink: 0;
}
.cs-main-menu{
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.cs-main-menu>a{
    text-decoration: none;
}
.menu-link{
    display: flex;
    width: auto;
    height: auto;
    justify-content: center;
    align-items: center;
    color: var(--Secondary-300, #666);
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    cursor: pointer;
}
.ml-active{
  color: #8A6CC8;
}
.menu-link:hover{
    color: #8A6CC8;
}

.interact{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.interact>a{
    text-decoration: none;
}

.cs-sigin-btn{
    display: flex;
    padding: 12px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 7px;
    border: 1px solid #E5E5E5;
    background: #FFF;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03);
    color: var(--Secondary-300, #666);
    /* Base Text (Medium) */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.cs-sigin-btn:hover{
    color: var(--Secondary-400, #333);
    border-radius: 7px;
    border: 0.7px solid #E5E5E5;
    
    background: #FCFCFC;
    
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03);
}
.cs-sigin-btn:active{
    color: var(--Secondary-400, #333);
    border-radius: 7px;
    border: 0.7px solid #D9D9D9;
    
    background: #F5F5F5;
}

.cs-trial-btn{
    display: flex;
    width: auto;
    padding: 12px 24.025px;
    justify-content: center;
    align-items: center;
    gap: 10.678px;
    border-radius: 7px;
    border-bottom: 1.335px solid #7D5CC2;
    background: #8A6CC8;
    box-shadow: 0px 1.335px 1.335px 0px rgba(0, 0, 0, 0.10);
    color: var(--Background, #FFF);
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.cs-trial-btn:hover{
    border-radius: 7px;
    border-bottom: 1px solid #6B45BA;
    
    background: #7A58C1;
    
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.10);
}
.cs-trial-btn:active{
    border-radius: 7px;
    border: 1.5px solid #563894;
    
    background: #7A58C1;
}

/* ----------------- end header style --------------- */








/* ----------------- body style --------------- */
.index-header{
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  width: 100%;
}

.tag-category{
  display: flex;
  width: 100%;
  padding: 12px 0px;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  
  border-top: 0.5px solid #E5E5E5;

  border-bottom: 1px solid #E5E5E5;
  
  background: var(--Background, #FFF);
  
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03);
}
.tag-category>a{
  text-decoration: none;
}
.mid-category{
  display: flex;
  flex-wrap: nowrap;
  overflow-y: auto;
  gap: 8px;
}
.mid-category::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.mid-category::-webkit-scrollbar-track {
  width: 5px;
  height: 5px;
  background-color: #fff;
}
.mid-category::-webkit-scrollbar-thumb {
  background-color: #8a6cc8;
  width: 6px;
  height: 6px;
  border-radius: 15px;
  border: 0.3px solid #fff;
}
.tag-name{
  display: flex;
  padding: 12px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  
  border-radius: 7px;
  background: var(--Background, #FFF);

  color: var(--Secondary-300, #666);
  text-align: center;
  /* leading-trim: both; */

  /* text-edge: cap; */
  /* font-feature-settings: 'clig' off, 'liga' off; */
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px; /* 137.5% */
  white-space: nowrap;
}
.tag-name:hover{
  color: var(--Secondary-300, #666);
  background-color: #e5e5e5;
}
.active-tag{
  display: flex;
  padding: 12px;
  align-items: flex-start;
  gap: 10px;

  border-radius: 7px;
  background: var(--Primary-500, #8A6CC8);
  color: var(--Neutral-colors-100, var(--Background, #FFF));

}
.navbar-nav{
  text-decoration: none;
}
.navbar-nav:active{
  background-color: #fff !important;
}
.nav-item > .tag-links:active{
  background-color: #fff !important;
}
.nav-item > .tag-links > .tag-name:active{
  background-color: #fff !important;
}
.dropdown-tag{
  padding: 8px !important;
  width: 205px !important;
  max-height: 500px !important;
  min-width: max-content !important;
  overflow-y: auto !important;
}
.head-title{
  margin: 33px 0px;
  color: var(--Secondary-400, #333);
  /* leading-trim: both; */
  
  /* text-edge: cap;
  font-feature-settings: 'clig' off, 'liga' off; */
  font-family: "DM Sans";
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px; /* 111.111% */
}

.head-slider{
  display: flex;
  width: 100%;
  height: max-content;
  max-height: 428px;
  margin-bottom: 49px;
  /* padding-top: 130px; */
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 15px;
  /* background: url(<path-to-image>), lightgray 0px -2.383px / 100% 180.974% no-repeat; */
  background: lightgray 0px -2.383px / 100% 180.974% ;
  
  
  /* Blog Card */
  /* Image · 4,096 x 2,731 */
  
}

.inner-slider{
  display: flex;
  width: 100%;
  height: fit-content !important;
  max-height: 428px;
  /* margin-bottom: 49px; */

  /* margin-bottom: ; */
  /* padding-top: 130px; */
  /* flex-direction: column; */
  justify-content: flex;
  align-items: center;
  /* gap: 10px; */
  /* flex-shrink: 0; */
  border-radius: 15px;
  /* background: url(<path-to-image>), lightgray 0px -2.383px / 100% 180.974% no-repeat; */
  background: lightgray 0px -2.383px / 100% 180.974% ;
  
  
  /* Blog Card */
  /* Image · 4,096 x 2,731 */
  
}
.carousel-control-prev-icon{
  display: none !important;
}
.prev-elipse{
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
.next-elipse{
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
.slide-overlay{
  display: flex;
  position: absolute;
  min-height: 100%;
  width: 100%;
  bottom: 0px;
  left: 0px;
  background-color: #000;
  z-index: 3;
  opacity: 60%;
  /* cursor: pointer; */
}


.slide-details{
  display: flex;
  height: 50%;
  padding: 94px 40px 48px 40px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start !important;
  text-align: left !important;
  flex-shrink: 0;
  align-self: stretch;
  background: linear-gradient(180deg, rgba(7, 11, 27, 0.00) 3%, rgba(7, 11, 27, 0.46) 30.4%, #000 95%);
  width: 100%;
  position: absolute;
  top: 214px; 
  right: 0px;
  z-index: 4;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 1.25rem;
  left: 4% !important;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: left !important;
}
.slide-cs{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
}
.slide-ind{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5 !important;
  display: flex;
  justify-content: flex-end !important;
  padding: 0;
  /* margin-right: 40px !important; */
  margin-right: 4% !important;
  margin-bottom: 1rem;
  margin-left: 15%;
}
.slide-post-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  width: 50%;
  cursor: pointer;
}
.slide-post-title:hover{
  text-decoration: underline !important;
}

.slide-title{
  color: var(--Background, #FFF);

  /* leading-trim: both; */
  
  /* text-edge: cap; */
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: "DM Sans";
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px; /* 111.111% */
}
.slide-excerpt{
  color: var(--Background, #FFF);

  /* Base Text (Medium) */
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.slide-nav{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 20%;
}

.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 11px !important;
  height: 11px !important;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-radius: 50% !important;
  opacity: .5;
  /* z-index: 4 !important; */
  transition: opacity .6s ease;
}
.carousel-control-next, .carousel-control-prev {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 11.5% !important;
  padding: 0;
  color: #fff;
  text-align: center;
  background: 0 0;
  border: 0;
  opacity: .5;
  transition: opacity .15s ease;
}

.cs-main-body{
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.cs-main{
  /* display: inline-flex;
  flex-direction: row; */
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: flex-start;
  column-gap: 22px;
  row-gap: 16px;
}
.tag-post{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}
.tag-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.tag-header-title{
  color: var(--Secondary-400, #333);
  /* leading-trim: both; */
  
  /* text-edge: cap; */
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: "DM Sans";
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px; /* 111.111% */
}
.view-tag-post{
  display: flex;
  padding: 16px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 7px;
  border: 0.7px solid #E5E5E5;
  
  background: var(--Background, #FFF);
  
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03);
  
  color: var(--Secondary-300, #666);
  text-align: center;
  /* leading-trim: both; */
  
  /* text-edge: cap; */
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}
.view-tag-post:hover{
    color: var(--Secondary-400, #333);
    border-radius: 7px;
    border: 0.7px solid #E5E5E5;
    
    background: #FCFCFC;
    
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03);
}
.view-tag-post:active{
    color: var(--Secondary-400, #333);
    border-radius: 7px;
    border: 0.7px solid #D9D9D9;
    
    background: #F5F5F5;
}



/* ----------------- post-body style --------------- */
.post-top-body{
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
  margin-top: 64px;
}
.post-header{
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.post-breadcrumb{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 18px;
  align-self: stretch;
  flex-direction: row;
}
.breadcrumb-link{
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb-link:hover{
  color: #8a668a;
}
.bc-previous-page{
  color: var(--Secondary-300, #666);
  text-align: center;
  /* Base Text (Medium) */
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.bc-previous-page:hover{
  color: #8a668a;
}
.bc-current-post{
  color: var(--Secondary-200, #999);
  text-align: center;
  /* Base Text (Medium) */
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.post-p-title{
  align-self: stretch;
  color: #212121;

  /* Heading Two */
  font-family: "DM Sans";
  font-size: 48.83px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.post-info{
  display: flex;
  align-items: center;
  gap: 24px;
}
.post-date{
  display: flex;
  align-items: center;
  gap: 6px;
  
  
  color: var(--Secondary-300, #666);
  text-align: center;
  /* Base Text (Medium) */
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.cs-post-body{
  display: flex;
  padding: 0px 40px;
  
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  align-self: stretch;
}
.cs-post-content{
  color: var(--Secondary-300, #666);
  font-family: "DM Sans";
  /* font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal; */

  /* text-align: justify; */
}
.cs-post-content > p, ul, ol, li, dl, dd {
  font-family: "DM Sans";
  font-size: 20px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: normal !important;
}
.cs-post-content > h1, h2, h3, h4, dt {
  color: var(--Secondary-400, #333) !important;
  /* Heading Five */
  font-family: "DM Sans";
  font-size: 25px !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: normal !important;
}
.cs-byline-reading-time{
  color: var(--Secondary-300, #666);
  text-align: center;
  /* Base Text (Medium) */
  font-family: "DM Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.more-post{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}
.morepost-header{
  color: var(--Secondary-400, #333);
  /* leading-trim: both; */
  
  /* text-edge: cap; */
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: "DM Sans";
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px; /* 111.111% */
}





/* ----------------- end post-body style --------------- */





/* ----------------------- post card ----------------------- */
.post-card-image-link{
  text-decoration: none !important;
  z-index: 2;
}
.post-card-detail-link{
  text-decoration: none !important;
  z-index: 4;
}
.cs-post-card{
  display: flex;
  height: 447px;
  width: auto;
  padding: 282px 19px 35px 20px;
  
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border-radius: 16px;
  border: 1px solid #F1F1F1;
  position: relative;
  overflow: hidden;

  background: linear-gradient(180deg, rgba(7, 11, 27, 0.00) 0%, #070B1B 100%), lightgray 50% / cover no-repeat, #FAFAFA;
  /* background: linear-gradient(180deg, rgba(7, 11, 27, 0.00) 0%, #070B1B 100%), url(<path-to-image>), lightgray 50% / cover no-repeat, #FAFAFA; */


}
.post-bg{
  display: flex;
  position: absolute;
  object-fit: cover;
  width: 100%;
  /* height: 447px; */
  height: 100%;
  top: 0px;
  right:0px;

}
.cs-post-detail{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  z-index: 4;
}
.cs-post-title{
  color: var(--Background, #FFF);

  font-feature-settings: 'clig' off, 'liga' off;
  font-family: "DM Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.cs-post-excerpt{
  color: var(--Background, #FFF);

  /* leading-trim: both; */
  
  /* text-edge: cap; */
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.cs-post-detail:hover{
  text-decoration: underline #fff !important;
}


/* .cs-overlay{
  display: flex;
  width: 100%;
  height: 100%;

  
} */
.overlay-link{
  display: flex;
  position: absolute;
  min-height: 100%;
  width: 100%;
  bottom: 0px;
  left: 0px;
  background-color: #000;
  z-index: 3;
  opacity: 60%;
  cursor: pointer;
}

.pagination-sec{
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: auto;
}
.pagination{
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: auto;
}
.link-page{
  text-decoration: none;
}
.page-btn{
  display: flex;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  border: 1px solid #E5E5E5;
  color: var(--Primary-500, #8A6CC8);
  font-family: "DM Sans";
  font-size: 12.8px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.page-btn:hover{
    border-radius: 5px;
    border: 1px solid #E5E5E5;
    
    background: #FCFCFC;
    
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03);
}
.page-btn:active{
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    
    background: #F5F5F5;
}


.dis-page-btn{
  display: flex;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  border: 1px solid #E5E5E5;
  
  opacity: 0.5;
  color: var(--Primary-500, #8A6CC8);
  font-family: "DM Sans";
  font-size: 12.8px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
}

.page-no{
  display: flex;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  border: 1px solid #E5E5E5;
  color: var(--Secondary-300, #666);
  /* Small Text */
  font-family: "DM Sans";
  font-size: 12.8px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.page-no:hover{
    color: var(--Secondary-300, #666);
    border-radius: 5px;
    border: 1px solid #E5E5E5;
    
    background: #FCFCFC;
    
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03);
}
.page-no:active{
    color: var(--Secondary-300, #666);
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    
    background: #F5F5F5;
}

.page-current{
  display: flex;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  background: var(--Primary-500, #8A6CC8);
  color: var(--Background, #FFF);

  /* Small Text */
  font-family: "DM Sans";
  font-size: 12.8px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}


/* ----------------- end postcard style --------------- */





/* ----------------- end body style --------------- */







/* ----------------- footer style --------------- */
.cs-footer{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: auto; 
    /* height: 436px; */
    padding: 70px 32px 19px 32px;
    flex-shrink: 0;
    background: #000;
}
.f-bg {
    display: inline;
    position: absolute;
    top: 0px;
    right: 0px;
    /* z-index: 2; */
  }
  .cs-flogo{
      display: flex;
      /* width: 95px; */
      width: auto;
      /* height: 24.099px; */
      height: auto;
      padding-bottom: 32px;
      justify-content: flex-start;
      align-items: center;
      white-space: nowrap;
      cursor: pointer;
  }
  .cs-f-logo{
      color: var(--Secondary-500, #fff);
      font-family: "DM Sans";
      font-size: 28.477px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
  }
  .p-f-logo{
      color: var(--Primary-500, #8A6CC8);
      font-family: "DM Sans";
      font-size: 28.477px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
  }
  .img-f-logo{
      display: inline-flex;
      width: 22.429px;
      height: 22.722px;
      flex-shrink: 0;
  }
  .footer-note{
    display: flex;
    justify-content: space-between;
    margin-bottom: 71px;
    z-index: 2;
  }
  .footer-about{
    width: 304px;
    height: auto;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--Background, #FFF);
    
    text-overflow: ellipsis;
    white-space: wrap;
    /* Base Text (Regular) */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .ft-read{
    text-decoration: none;
  }
  .f-readmore{
    color: var(--Primary-500, #8A6CC8);
    /* Small Text */
    font-family: "DM Sans";
    font-size: 12.8px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .footer-right{
    display: flex;
    width: auto;
    justify-content: space-between;
    gap: 96px;
  }
  .footer-company{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .company-title{
    color: var(--Background, #FFF);
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  .footer-menu{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    color: var(--Background, #FFF);

    /* Base Text (Regular) */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .footer-menu>a{
    color: var(--Background, #FFF);

    /* Base Text (Regular) */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .footer-socials{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .follow-title{
    color: var(--Background, #FFF);
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  .social-icons{
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  .social-icons>a{
    text-decoration: none;
  }
  .img-socials{
    width: 24px;
    height: 24px;
  }
  .f-copyright{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
  }
  .copyright-year{
    color: var(--Background, #FFF);

    /* Small Text */
    font-family: "DM Sans";
    font-size: 12.8px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .seamhealth-site{
    text-decoration: none;
    color: #8a668a
  }
  .seamhealth{
    color: var(--Primary-500, var(--Background, #8A6CC8));
    /* Small Text */
    font-family: "DM Sans";
    font-size: 12.8px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .f-terms{
    display: flex;
    align-items: flex-start;
    gap: 32px;
  }
  .f-terms>a{
    text-decoration: none;
    color: #fff;
  }
  .f-t-p{
    color: var(--Background, #FFF);

    /* Small Text */
    font-family: "DM Sans";
    font-size: 12.8px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  
.footer-link:hover{
  color: #8A6CC8;
}
.footer-link:active{
  color: #8A6CC8;
}
.m-f-d{
  display: none;
}

  
/* ----------------- end footer style --------------- */





.sticky {
    position: fixed;
    top: 0;
    right: -11px;
    width: 100vw;
    padding: 23px 44px;
    background-color: #fff;
}

/* .sticky + .content {
  padding-top: 102px;
} */


















@media (max-width: 788px ) {
  /* ---------------- header ---------------------- */
  .header{
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07);
  }
  .cs-viewport {
    display: flex;
    padding: 0px 16px;
    flex-direction: column;
}
  .nav-bar{
    display: none;
  }
  .nav-bar-mobile{
    display: flex;
    width: 100%;
    padding: 8px 0px;
    justify-content: space-between;
    align-items: center;
    background: #FFF;
    z-index: 5;
  }
  .menu-logo{
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .menu-bar{
    cursor: pointer;
    padding: 8px;
  }
  .menu-bar:hover{
    border: 1px solid #e5e5e5;
    padding: 7px;
    background-color: #FCFCFC;
    border-radius: 5px;
  }

  .mobile-home-link{
    text-decoration: none;
  }
  .cs-menu-show{
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 80% !important;
  }
  
  .m-m-header{
    display: flex;
    padding: 24px;
    justify-content: space-between;
    align-items: center;
  }
  .img-close{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
  .cs-m-logo{
      color: var(--Secondary-500, #212121);
      font-family: "DM Sans";
      font-size: 22.477px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
  }
  .p-logo{
      color: var(--Primary-500, #8A6CC8);
      font-family: "DM Sans";
      font-size: 22.477px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
  }
  .img-logo{
      display: inline-flex;
      width: 16.429px;
      height: 16.722px;
      flex-shrink: 0;
  }
  .m-menus{
    display: flex;
    flex-direction: column;
    padding: 0px 24px;
    align-items: flex-start;
    gap: 24px;
  }
  .cs-m-btn{
    width: 100%;
  }
  .cs-m-trial-btn{
    display: flex;
    width: 100%;
    padding: 12px 24.025px;
    justify-content: center;
    align-items: center;
    gap: 10.678px;
    border-radius: 7px;
    border-bottom: 1.335px solid #7D5CC2;
    background: #8A6CC8;
    box-shadow: 0px 1.335px 1.335px 0px rgba(0, 0, 0, 0.10);
    color: var(--Background, #FFF);
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .m-menu-footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 0px 24px;
  }
  .m-copyright-year{
    color: var(--Background, #212121);

    /* Small Text */
    font-family: "DM Sans";
    font-size: 12.8px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .m-span{
    text-align: center;
  }
  .m-f-terms{
    display: flex;
    align-items: center;
    /* gap: auto; */
    width: 100%;
    justify-content: space-between;
  }
  .m-f-terms>a{
    text-decoration: none;
    color: #666;
  }
  .m-f-t-p{
    color: var(--Background, #666);

    /* Small Text */
    font-family: "DM Sans";
    font-size: 12.8px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .slide-title{
    color: var(--Background, #FFF);
  
    /* leading-trim: both; */
    
    /* text-edge: cap; */
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "DM Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 111.111% */
  }
  .slide-excerpt{
    color: var(--Background, #FFF);
  
    /* Base Text (Medium) */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }


  /* ---------------------- end header --------------------- */

  .index-header{margin-top: 0px;}

  .inner-slider{
    height: 448px !important;
    max-height: 448px;
  }
  .carousel-item {
    position: relative;
    display: none;
    float: left;
    height: 100% !important;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out;
}
  .w-100{
    height: 100% !important;
  }
  .slide-details {
    display: flex;
    height: 100%;
    padding: 134px 40px 48px 0px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start !important;
    text-align: left !important;
    flex-shrink: 0;
    align-self: stretch;
    background: linear-gradient(180deg, rgba(7, 11, 27, 0.00) 3%, rgba(7, 11, 27, 0.46) 30.4%, #000 95%);
    width: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
}
.carousel-caption {
  position: relative !important;
  width: 90%;
}
.next-elipse{
  display: none;
}
.prev-elipse{
  display: none;
}



  .cs-main {
    display: grid;
    grid-template-columns: auto;
    align-items: flex-start;
    /* column-gap: 22px; */
    row-gap: 22px;
}
.head-title{
  margin: 33px 0px;
  color: var(--Secondary-400, #333);
  /* leading-trim: both; */
  
  /* text-edge: cap;
  font-feature-settings: 'clig' off, 'liga' off; */
  font-family: "DM Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px; /* 111.111% */
}
.tag-post {
  /* display: inline-flex;
  flex-direction: column;
  align-items: flex-start; */
  gap: 32px;
}

.tag-header-title{
  color: var(--Secondary-400, #333);
  /* leading-trim: both; */
  
  /* text-edge: cap; */
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: "DM Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px; /* 111.111% */
}

.post-top-body{
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.post-p-title{
  align-self: stretch;
  color: #212121;

  /* Heading Two */
  font-family: "DM Sans";
  font-size: 28.83px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.h-s-post{
  display: flex;
  width: 100%;
  height: max-content;
  max-height: 428px;
  margin-bottom: 0px;
  /* padding-top: 130px; */
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 15px;
  /* background: url(<path-to-image>), lightgray 0px -2.383px / 100% 180.974% no-repeat; */
  background: lightgray 0px -2.383px / 100% 180.974% ;
  
  
  /* Blog Card */
  /* Image · 4,096 x 2,731 */
  
}
.cs-byline-reading-time{
  display: none;
}
.more-post {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    margin-top: 59px;
    margin-bottom: 97px;
}
.morepost-header{
  color: var(--Secondary-400, #333);
  /* leading-trim: both; */
  
  /* text-edge: cap; */
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: "DM Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px; /* 111.111% */
}

.cs-main-body{
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-bottom: 100px;
}


.cs-post-body{
  display: flex;
  padding: 0px;
  
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  align-self: stretch;
}
.cs-post-content > p, ul, ol, li, dl, dd {
  font-family: "DM Sans";
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: normal !important;
}
.cs-post-content > h1, h2, h3, h4, dt {
  color: var(--Secondary-400, #333) !important;
  /* Heading Five */
  font-family: "DM Sans";
  font-size: 20px !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: normal !important;
}
.cs-post-detail{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  z-index: 4;
}



  /* ---------------- footer --------------------- */

  .footer-note{
    display: flex;
    justify-content: space-between;
    margin-bottom: 71px;
    z-index: 2;
    gap: 3em;
    flex-direction: column;
  }
  .footer-about{
    width: auto;
    height: auto;
    /* flex-shrink: 0; */
    overflow: hidden;
    color: var(--Background, #FFF);
    
    text-overflow: ellipsis;
    white-space: wrap;
    /* Base Text (Regular) */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .footer-right{
    display: flex;
    width: auto;
    justify-content: space-between;
    gap: 3em;
    flex-direction: column;
  }
  .f-copyright{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 3em;
    z-index: 2;
    flex-direction: column;
  }
.f-d{
  display: none;
}
.m-f-d{
  display: block;
  text-align: center;
}

  /* ---------------- end footer --------------------- */
.sticky {
    position: fixed;
    top: 0;
    right: 0px;
    width: 100vw;
    padding: 0px 16px;
    background-color: #fff;
}

}