/* -----------------------------------------------------------------------------

# Base - Genral & Typography

----------------------------------------------------------------------------- */
html {  font-size: 14px;  font-weight: 400;  line-height: 28px;  height: 100%;}

body {  font-family: "Open Sans", sans-serif;  font-weight: 400;  font-size: 1rem;  letter-spacing: 0.1px;  line-height: 1.8;  color: #051922;  overflow-x: hidden;}

body img {  max-width: 100%;}

/* Global box sizing to prevent overflow */
*, *::before, *::after{ box-sizing: border-box; }


a {  cursor: pointer;  text-decoration: none;  -webkit-transition: all 0.2s ease-in-out;  -o-transition: all 0.2s ease-in-out;  transition: all 0.2s ease-in-out;}

a:hover {  color: #F28123;  text-decoration: none;}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {  font-family: "Poppins", sans-serif;  font-weight: 700;  margin: 0 0 1.25rem 0;  color: #051922;}

h1:last-child, .h1:last-child,
h2:last-child, .h2:last-child,
h3:last-child, .h3:last-child,
h4:last-child, .h4:last-child,
h5:last-child, .h5:last-child,
h6:last-child, .h6:last-child {  margin: 0;}

h1, .h1 {  font-size: 4rem;  font-weight: 700;  line-height: 4rem;}



.content-text p{  color: #F28123;  font-weight: 700;  text-transform: uppercase;  letter-spacing: 7px;}

.content-text h1{  font-size: clamp(28px, 5vw, 50px);  font-weight: 900;  color: #fff;  margin-top: 20px;}



@media only screen and (max-width: 767.96px) {  h1, .h1 {   font-size: 3rem;  line-height: 3.25rem;  }}

@media only screen and (max-width: 575.96px) {  h1, .h1 {    font-size: 2.5rem;    line-height: 2.75rem;  }}

h2, .h2 {  font-size: 3rem;  font-weight: 700;  line-height: 3.25rem;}

@media only screen and (max-width: 767.96px) {  h2, .h2 {    font-size: 2.5rem;    line-height: 2.75rem;  }}

@media only screen and (max-width: 575.96px) {  h2, .h2 {    font-size: 2rem;    line-height: 2.25rem;  }}

h3, .h3 {  font-size: 2rem;  font-weight: 700;  line-height: 2.25rem;}

@media only screen and (max-width: 575.96px) {
  h3, .h3 {   font-size: 1.75rem;    line-height: 2rem;  }}

h4, .h4 {  font-size: 1.5rem;  font-weight: 700;  line-height: 1.75rem;}

@media only screen and (max-width: 575.96px) {  h4, .h4 {    font-size: 1.25rem;    line-height: 1.5rem;  }}




h5, .h5 {  font-size: 1.25rem;  font-weight: 700;  line-height: 1.5rem;}

h6, .h6 {  font-size: 1rem;  font-weight: 700;  line-height: 1.5rem;}

p {  font-family: "Open Sans", sans-serif;  font-weight: 400;  font-size: 1rem;  letter-spacing: 0.1px;  line-height: 1.8;  color: #051922;  margin: 0 0 1.25rem 0;}

p:last-child {  margin: 0;}



/* -----------------------------------------------------------------------------

# All Common Styles

----------------------------------------------------------------------------- */

.loader {  bottom: 0;  height: 100%;  left: 0;  position: fixed;  right: 0;  top: 0;  width: 100%;  z-index: 1111; background: #fff;  overflow-x: hidden;}

.loader-inner {  position: absolute;  left: 50%;  top: 50%;  -webkit-transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);  -o-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);  height: 50px;  width: 50px;}

.circle {  width: 8vmax;  height: 8vmax;  border-right: 4px solid #000; border-radius: 50%;  -webkit-animation: spinRight 800ms linear infinite;  animation: spinRight 800ms linear infinite;}

.circle:before {  content: '';  width: 6vmax;  height: 6vmax; display: block;  position: absolute; top: calc(50% - 3vmax);  left: calc(50% - 3vmax);  border-left: 3px solid #F28123;  border-radius: 100%;  -webkit-animation: spinLeft 800ms linear infinite;  animation: spinLeft 800ms linear infinite;}

.circle:after {  content: '';  width: 6vmax;  height: 6vmax;  display: block;  position: absolute;  top: calc(50% - 3vmax);  left: calc(50% - 3vmax);  border-left: 3px solid #F28123;  border-radius: 100%;  -webkit-animation: spinLeft 800ms linear infinite;  animation: spinLeft 800ms linear infinite;  width: 4vmax;  height: 4vmax;  top: calc(50% - 2vmax); left: calc(50% - 2vmax);  border: 0;  border-right: 2px solid #000;  -webkit-animation: none;  animation: none;}




@-webkit-keyframes spinLeft {  from {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }  to {    -webkit-transform: rotate(720deg);    transform: rotate(720deg);  }}

@keyframes spinLeft {  from {    -webkit-transform: rotate(0deg);   transform: rotate(0deg);  }  to {    -webkit-transform: rotate(720deg);    transform: rotate(720deg);  }}

@-webkit-keyframes spinRight {  from {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }  to {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }}

@keyframes spinRight {  from {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }  to {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }}

.mt-80 {  margin-top: 80px;}

@media only screen and (max-width: 767.96px) {  .mt-80 {    margin-top: 50px;  }}

.mb-80 {  margin-bottom: 80px;}

@media only screen and (max-width: 767.96px) {  .mb-80 {    margin-bottom: 50px;  }}

.mt-100 {  margin-top: 100px;}

@media only screen and (max-width: 767.96px) {  .mt-100 {    margin-top: 80px;  }}

.mb-100 {  margin-bottom: 100px;}

@media only screen and (max-width: 767.96px) {  .mb-100 {    margin-bottom: 80px;  }}

.mt-150 {  margin-top: 150px;}

@media only screen and (max-width: 767.96px) {  .mt-150 {    margin-top: 100px;  }}

.mb-150 {  margin-bottom: 150px;}

@media only screen and (max-width: 767.96px) {  .mb-150 {    margin-bottom: 100px;  }}

.pt-80 {  padding-top: 80px;}

@media only screen and (max-width: 767.96px) {  .pt-80 {    padding-top: 50px;  }}

.pb-80 {  padding-bottom: 80px;}

@media only screen and (max-width: 767.96px) {  .pb-80 {    padding-bottom: 50px;  }}

.pt-100 {  padding-top: 100px;}

@media only screen and (max-width: 767.96px) {  .pt-100 {    padding-top: 80px;  }}

.pb-100 {  padding-bottom: 100px;}

@media only screen and (max-width: 767.96px) {  .pb-100 {    padding-bottom: 80px; }}

.pt-150 {  padding-top: 150px;}

@media only screen and (max-width: 767.96px) {  .pt-150 {    padding-top: 100px;  }}

.pb-150 {  padding-bottom: 150px;}

@media only screen and (max-width: 767.96px) {  .pb-150 {    padding-bottom: 100px;  }}




/* ===========================
   PRELOADER
=========================== */
.loader {    position: fixed;    inset: 0;    background: #ffffff;    z-index: 1111;    overflow: hidden; }

.loader-inner {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);    height: 50px;    width: 50px; }

.circle {
    width: 8vmax;    height: 8vmax;    border-right: 4px solid #000;    border-radius: 50%;    animation: spinRight 800ms linear infinite; }

.circle:before,.circle:after {    content: '';    position: absolute;    border-radius: 100%;}

.circle:before {    width: 6vmax;    height: 6vmax;    top: calc(50% - 3vmax);    left: calc(50% - 3vmax);    border-left: 3px solid #F28123;    animation: spinLeft 800ms linear infinite;}

.circle:after {    width: 4vmax;    height: 4vmax;    top: calc(50% - 2vmax);    left: calc(50% - 2vmax);    border-right: 2px solid #000;}

@keyframes spinLeft {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(720deg);
    }
}

@keyframes spinRight {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

/* ===========================
   HEADER / MENU
=========================== */
ul.navbar-nav li.nav-item a.nav-link, ul.navbar-nav li.nav-item.active a.nav-link {  color: #051922; }

.top-header-area {  position: absolute;  z-index: 999;  width: 100%;  padding: 25px 0; }

.top-header-area.white ul.navbar-nav li.nav-item a.nav-link, .top-header-area.white ul.navbar-nav li.nav-item.active a.nav-link {  color: #fff;}

ul.navbar-nav li.nav-item a.nav-link, ul.navbar-nav li.nav-item.active a.nav-link {  color: #fff;  font-weight: 700;  margin-right: 14px;}

a.navbar-brand img {  max-width: 150px;}

nav.main-menu ul {  margin: 0;  padding: 0;  list-style: none;}

nav.main-menu ul li {  display: inline-block;}

nav.main-menu ul li a {  color: #fff;  font-weight: 700;  display: block;  padding: 15px; }

nav.main-menu ul > li {  position: relative;}

nav.main-menu ul ul.sub-menu {  position: absolute;  background-color: #fff;  width: 220px;  padding: 15px 15px;  margin: 0;  left: 0;  top: 50px;  border-radius: 3px;  -webkit-transition: 0.3s;  -o-transition: 0.3s;  transition: 0.3s;  opacity: 0;  visibility: hidden;  -webkit-box-shadow: 0 0 20px #555555;  box-shadow: 0 0 20px #555555;}

nav.main-menu ul ul.sub-menu li {  display: block;  text-align: left;}

nav.main-menu ul ul.sub-menu li a {  color: #555;  font-weight: 600;  padding: 7px 10px;  font-size: 13px;}

nav.main-menu ul > li:hover ul {  opacity: 1;  visibility: visible;}

nav.main-menu ul li:last-child a {  display: inline-block;}

nav.main-menu > ul li:last-child {  float: right;}


/*---- Logo ------*/
.site-logo {  float: left;  max-width: 40px; }
.site-logo {  padding: 6px 0;}
.site-logo img {  width: 100%;  height: auto;  display: block;}
/*---- Logo ------*/



ul.sub-menu li:last-child {  float: none !important;}

.mean-container .mean-bar {  background-color: transparent;  position: absolute;  right: 0;  top: 15px;}

.mean-bar a.meanmenu-reveal {  background-color: #F28123;}

.main-menu-wrap {  position: relative;}

.mean-container a.meanmenu-reveal {  color: #051922;}

.mean-container a.meanmenu-reveal span {  background-color: #051922;}

.mean-container .mean-nav ul li a {  padding: 0.5em 5%;}

.mean-container .mean-nav ul li li a {  padding: 0.5em 10%;}

.mean-container .mean-nav ul li a.mean-expand {  font-size: 16px;  height: 10px;  line-height: 10px;  width: 15px;}

.mean-container a.meanmenu-reveal {  padding: 8px 8px 6px;}

nav.mean-nav > ul > li:first-child > a {  border-top: none;}

.header-icons a {  color: #fff;  display: inline-block;  padding: 10px;}

.top-header-area.sepherate-header ul li > a, .top-header-area.sepherate-header .header-icons a {  color: #051922;}

nav.main-menu ul ul.sub-menu li {  display: block;}

nav.main-menu ul ul.sub-menu li a {  color: #555;  padding: 8px;  font-size: 13px;  font-weight: 600; }

nav.main-menu ul li.current-list-item > a {  color: #F28123; }

nav.main-menu li:hover > a {  color: #F28123; }

nav.main-menu li a {  -webkit-transition: 0.3s;  -o-transition: 0.3s;  transition: 0.3s; }

.top-header-area .header-icons a {  -webkit-transition: 0.3s;  -o-transition: 0.3s;  transition: 0.3s; }

.top-header-area .header-icons a:hover {  color: #F28123; }

.sticky-wrapper {  position: absolute;  left: 0;  top: 0;  width: 100%;  z-index: 999 !important; }

.sticky-wrapper.is-sticky .top-header-area {  background-color: #051922;  padding: 15px 0; }

.top-header-area {  -webkit-transition: 0.3s;  -o-transition: 0.3s;  transition: 0.3s; }

ul.navbar-nav {  margin: 0 auto; }

a.mobile-show {  display: none; }




/* ============ HERO ========== */

.content-text h1{  font-size: clamp(28px, 5vw, 50px);  font-weight: 900;  color: #fff;  margin-top: 20px;}

.book-banner{  position: relative;  width: 100%;  overflow: hidden;}

.book-banner-img{  width: 100%;  height: auto;  display: block;}

.book-banner-overlay{  position: absolute;  inset: 0;  background: rgba(7,33,46,0.85);  z-index: 1;}

.book-banner-content{  position: absolute;  inset: 0;  z-index: 2;  display: flex;  align-items: center;  justify-content: center;  text-align: center;  padding: 20px;}




/* =========== FLIPBOOK SECTION ========= */
.flipbook-section{
  padding: 40px 0;
  background-size: contain;     /* ✅ no crop */
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f5f5f5;    /* list-section base */
}

/* Flipbook center wrapper */
.flipbook-wrap{
  display: flex;
  justify-content: center;
}

/* flipbook box look */
.flipbook{
  margin: 0 auto !important;
  max-width: 100%;
}

/* pages */
.flipbook .hard{
  background: #fff !important;
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}


.flipbook img{
  width: 100%;
  height: auto;         /* ✅ natural ratio */
  display: block;
  object-fit: contain;  /* ✅ if plugin sets fixed box */
}


/* ===========================
   FOOTER
=========================== */

.gsbd-footer {    background-color: #051922;    color: #ffffff;    padding: 30px 0 30px; }

.gsbd-footer-logo {    text-align: center;    margin-bottom: 26px;}

.gsbd-footer-logo img {    width: 250px;    max-width: 90%;}

.gsbd-footer-columns {    max-width: 1300px;    margin: 0 auto;    padding: 0 40px;    display: flex;    justify-content: space-between;    gap: 60px;}

.gsbd-footer-about,
.gsbd-footer-contact {    flex: 1;}

.gsbd-footer-about {    text-align: left;}

.gsbd-footer-contact {    text-align: right;}

.gsbd-footer-title {    font-size: 20px;    font-weight: 700;    margin-bottom: 12px;    color: #ffffff;    position: relative;    display: inline-block;}

.gsbd-footer-title::after {    content: "";    position: absolute;    left: 0;    bottom: -5px;    width: 32px;    height: 2px;    background-color: #F28123;}

.gsbd-footer-description {    color: #ffffff !important;    font-size: 15px;    line-height: 1.8;    opacity: 0.9;    max-width: 520px;}

.gsbd-footer-contact-list {    list-style: none;    margin: 0;    padding: 0;}

.gsbd-footer-contact-list li {    font-size: 15px;    line-height: 1.8;    opacity: 0.9;    margin-bottom: 6px;}

.gsbd-footer-contact-list a {    color: #ffffff !important;      font-size: 15px;    text-decoration: none !important;    line-height: 1.7;    display: inline-block;}


.gsbd-footer-social {    display: flex;    justify-content: center;    gap: 26px;    margin: 26px 0;}

.gsbd-icon {    width: 46px;    height: 46px;    border-radius: 50%;    border: 1px solid #ffffff90;    display: flex;    align-items: center;    justify-content: center;    color: #ffffff;    font-size: 18px;    transition: 0.3s;}

.gsbd-icon:hover {    background-color: #F28123;    border-color: #F28123;    color: #ffffff;}

.gsbd-footer-bottom {    border-top: 1px solid #2a3b48;    padding-top: 12px;    text-align: center;    margin-top: 18px;}

.gsbd-footer-bottom p { color: #ffffff;   margin: 0;    font-size: 14px;    opacity: 0.8;}




/* ===========================
   BACK TO TOP BUTTON
=========================== */
#backToTopBtn {
    position: fixed;
    right: 16px;
    bottom: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #F28123;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 992px) {
    .breadcrumb-section {
        padding: 120px 0 70px;
    }

    .breadcrumb-text h1 {
        font-size: 34px;
    }

    .gsbd-footer-columns {
        padding: 0 30px;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .top-header-area {
        padding: 10px 0;
        background: #051922;
    }

    .breadcrumb-section {
        padding: 100px 0 50px;
    }

    .breadcrumb-text p {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .breadcrumb-text h1 {
        font-size: 26px;
    }

    .body1 {
        padding: 22px 0;
    }

    .gsbd-footer-columns {
        flex-direction: column;
        text-align: center;
        padding: 0 20px;
    }

    .gsbd-footer-about,
    .gsbd-footer-contact {
        text-align: center;
    }

    .gsbd-footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 480px) {
    .breadcrumb-section {
        padding: 90px 0 40px;
    }

    .breadcrumb-text h1 {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
  .flipbook-section{
    padding: 20px 0;
  }
}




/* Mobile full-screen feel + no side scroll */
html, body{
  overflow-x: hidden;
}

.flipbook-wrap{
  align-items: center;
}

/* Mobile tweaks */
@media (max-width: 767px){

  /* container padding */
  .flipbook-section .container{
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }

  /*  viewport height  */
  .flipbook-wrap{
    min-height: calc(100vh - 130px);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Mobile Shadow */
  .flipbook .hard{
    box-shadow: 0 10px 24px rgba(0,0,0,0.20);
  }

  /*image*/
  .flipbook img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}