:root{
    --white:  #fff;
     --black:  #000;
     --grey:#313131;
    --primary-color:  #796335;
    --heading-color:#030A1A;
     --dark-muted: #796335;
     --white-color: #fff;
}

body.p-0.m-0.smooth-scroll {
    overflow-x: hidden;
}
ul{
    list-style: none;
}
 h1 span{
    display: block;

}
.whishlist UL LI + LI {
    display: none;
}
/* our-approach css */

/* ===== Scrollbar CSS ===== */
/* Firefox */


/* Chrome, Edge, and Safari */

#scrollBtn{
    position: fixed;
    right: 20px;
    bottom: 30px;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: #000000;
    color: white;
    font-size: 22px;
    cursor: pointer;
    z-index: 999;
}
a{
    text-decoration: none !important;
}
.container{
    max-width: 1240px;
}
body{
      font-family: "Poppins", sans-serif;
}
h1{
    font-family: "Jost", sans-serif;
      text-transform: uppercase;
      color: var(--black);
      font-size: 35px;
}
h2 , h3 , h4 , h5 , h6{
    font-family: "Jost", sans-serif;
      text-transform: uppercase;
}
p{
    font-size: 17px;
    font-weight: 400;
    color: var(--black);
}

.sectionamazon .sec-03 {
    padding-bottom: 31px;
    background-image
: url('../images/bg-3.png');
    margin-bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
}
h2 , h3{
    font-family: "Jost", sans-serif;
      font-size: 22px;
      font-weight: 800;
      text-transform: uppercase;
}
html.smooth-scroll {
  scroll-behavior: smooth;
}
.contentmain h5{
    color: var(--black);
    font-size: 20px;
}
.contentmain h3{
    color: var(--black);
    font-size: 50px;
}
.custombtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 40px;
    border-radius: 0px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: #111111;
    background: linear-gradient(135deg, #F6D365 0%, #F4B400 40%, #E6A11B 70%, #C77A14 100%);
    background-size: 250% 250%;
    transition: all .45s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: 1px solid #d18b0d;
    box-shadow: 0 8px 20px rgba(199, 122, 20, .25);
}

.topimage {
    perspective: 1000px; /* 3D depth ke liye */
    display: flex;
    justify-content: center;
    align-items: center;
}

.topimg {
    height: 550px;
    width: auto; 
    object-fit: contain;
  
    transform-style: preserve-3d;
    filter: drop-shadow(20px 20px 50px rgba(0,0,0,0.2));
}

.buttonflex {
    display: flex;
    align-items: center;
    gap: 20px;
}

.buttonflex a {
   
}

.btn-white{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-transform: capitalize;
    padding: 14px 40px;
    border-radius:6px;
    text-decoration:none;
    font-size:16px;
    font-weight:600;
    color:#fff;
    background: transparent;
    order:1px solid rgba(255,255,255,.15);
    background-size:250% 250%;
    transition:.45s ease;
    position:relative;
    overflow:hidden;
}

.btn-white::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);
    transition:.7s;
}

.btn-white:hover::before{
    left:150%;
}

.btn-white:hover{
    background-position:right center;
    transform:translateY(-4px);
    color:#F4B400;
    box-shadow:0 12px 30px rgba(0,0,0,.4);
}

.custombtn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );
    transition:.7s;
    z-index:-1;
}

.custombtn:hover::before{
    left:150%;
}

/* Hover */
.custombtn:hover{
    background-position:right center;
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(199,122,20,.45);
    color:#fff;
}

/* Active */
.custombtn:active{
    transform:scale(.97);
}

/* HEADER CSS START */
.ml9 {
  position: relative;
  font-weight: 600;
  font-size: 29px;
  color: #fff;
  margin: 0;
  line-height: 48px;
}

.ml9 .text-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.ml9 .letter {
  transform-origin: 50% 100%;
  display: inline-block;
  line-height: 10px;
}
.navbar-nav {
    gap: 31px !important;
    padding-right: 55px;
}

a.nav-link {
    padding: 0px 0px !important;
    font-family: "Jost", sans-serif;
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
}

.Headermain {
    padding: 20px 0px 30px;
    transition: all 0.6s ease;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
}
.content-01 h2{
    text-transform: capitalize;
    margin-bottom: 5px;
    line-height: 28px;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 500;
}
.content-01 h4{
    margin-bottom: 0;
    line-height: 45px;
    color: #fff;
    /* font-family: "Poppins", sans-serif; */
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0px;
}
.Section-01 {
    padding: 86px 0px 75px;
    background-image: url('../images/bg-1.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
.content-01 p{
     font-family: "Poppins", sans-serif;
     color: #fff;
     font-size: 16px;
     font-weight: 500;
     word-spacing: 8px;
     width: 90%;
}

/* 
.topimg{
    height: 600px;
    width: 600px;
    object-fit: cover;
} */

.topimage {
    perspective: 1000px; /* 3D depth ke liye */
    display: flex;
    justify-content: center;
    align-items: center;
}

.topimg {
    height: 413px;
    /* width: 566px; */
    object-fit: cover;
    transform-style: preserve-3d;
    filter: drop-shadow(20px 20px 50px rgba(0,0,0,0.2));
}

.buttonflex {
    display: flex;
    align-items: center;
    gap: 20px;
}




/* SECTION-02 CSS START */

.author-section {
  padding: 83px 0 0;
  overflow: hidden;
  margin-top: -33px;
}

/* IMAGE AREA */
.image-wrapper {
  position: relative;
}

.main-img {
  width: 650px;
  position: relative;
  z-index: 2;
    left: -150px;
      top: -50px;
}

/* FADED BACK IMAGE */
.bg-img {
  position: absolute;
  left: -290px;
  top: -80px;
  width: 630px;
  /* opacity: 0.08; */
  transform: scale(1.1);
  z-index: 1;
}
.sec-03{
    align-items: baseline;
    background: #fcf1ce;
}
.author-section {
    position: relative;
     z-index: 1;
}
.bottom-img{
    position: absolute;
    bottom: 0;
    z-index: 6;
}
.bottom-img img{
    width: 1900px;
    height: 206px;
}
/* CONTENT */
.sub-title {
    margin-bottom: 5px;
    line-height: 45px;
    color: var(--grey);
    font-size: 25px;
    font-weight: 500;
    text-transform: uppercase;
}

.title {
    font-family: 'Namdhinggo-bold';
    font-weight: 600;
    font-size: 4em;
    color: var(--heading-color);
    margin: 0;
    line-height: 64px;
    padding-bottom: 15px;
}

.desc {
  font-family: "Poppins", sans-serif;
    color: #797979;
    font-size: 16px;
    font-weight: 500;
    word-spacing: 2px;
    text-align: justify;
    padding-top: 15px;
    width: 100%;
}

.btn-read {
  display: inline-block;
  padding: 12px 30px;
  background: #0c1a2b;
  color: #fff;
  position: relative;
  border-radius: 30px;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.5s ease-in;
  z-index: 1;
}
.custombtn:after{
     position: absolute;
    content: "";
    background: var(--primary-color);
    height: 100%;
    top: 0;
    width: 0%;
    right: 0;
    z-index: -1;
    transition: all 0.5s ease-in;
}
.btn-read:before {
    position: absolute;
    content: "";
    background: var(--grey);
    height: 100%;
    top: 0;
    width: 0%;
    right: 0;
    z-index: -1;
    transition: all 0.5s ease-in;
}
.btn-read:hover {
    transition: all 0.6s ease;
    color: #fff !important;
}

.btn-read:hover:before {
    transition: all 0.5s ease;
    width: 100%;
}
.ml15 {
  font-weight: 800;
  font-size: 35px;
  text-transform: uppercase;
  letter-spacing: 0px;
  color: #fff;
}
.content-01 h4 span {
    font-size: 25px;
    color: #E9B835;
}
.ml15 .word {
  display: inline-block;
  line-height: 1em;
}


/*==============================
        SERVICES SECTION
===============================*/

.services-section{
    padding:100px 0;
    background:#fff;
    overflow:hidden;
}

.section-title{
    font-size: 40px;
    font-weight:800;
    line-height:1.15;
    color:#1d2433;
    text-transform:uppercase;
    margin-bottom:25px;
    letter-spacing:.5px;
}

.section-text{
    max-width:850px;
    margin:auto;
    font-size:15px;
    line-height:30px;
    color:#666;
    margin-bottom:70px;
}


/*==============================
        CARD
===============================*/

.service-card{

    position:relative;
    background:#fff;
    border:1px solid #efefef;
    border-radius:6px;
    padding:45px 35px;
    height:100%;
    transition:.45s;
    cursor:pointer;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.04);

}

.service-card img{

    width:70px;
    transition:.45s;

}

.service-card h4{

    margin-top:25px;
    font-size:28px;
    font-weight:700;
    color:#111;
    transition:.45s;

}

.service-card p{

font-size:15px;

color:#666;

line-height:29px;

margin: 10px 0 20px;
}

.service-card a{

    color:#111;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    position:relative;

}

.service-card a:after{

    content:"";
    position:absolute;
    width:0;
    height:2px;
    background:#111;
    left:0;
    bottom:-6px;
    transition:.4s;

}

.service-card:hover a:after{

    width:100%;

}


/*==============================
    HOVER
===============================*/

.service-card:hover{

    transform:translateY(-15px);
    background:#f0bc2b;
    border:2px solid #111;
    box-shadow:0 25px 55px rgba(0,0,0,.18);

}

.service-card:hover h4{

    color:#111;

}

.service-card:hover p{

    color:#222;

}

.service-card:hover img{

    transform:translateY(-8px) scale(1.08);

}


/*==============================
ACTIVE CARD
===============================*/

.service-card.active{

    background:#f0bc2b;
    border:2px solid #111;
    box-shadow:0 20px 50px rgba(0,0,0,.16);

}


/*==============================
ICON CIRCLE
===============================*/

.icon{

    width:90px;
    height:90px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;

}

.icon:before{

content:"";

position:absolute;

width:26px;

height:26px;

background:#f0bc2b;

border-radius:50%;

right:8px;

top:8px;

animation:floatCircle 3s infinite;

z-index: -1;
}

@keyframes floatCircle{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}


/*==============================
VIEW BUTTON
===============================*/

.service-btn{

    margin-top:35px;
    background:linear-gradient(135deg,#ffd64d,#d58a00);
    color:#111;
    border:none;
    padding:18px 45px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.45s;
    position:relative;
    overflow:hidden;

}

.service-btn:before{

content:"";
position:absolute;
left:-120%;
top:0;
width:80%;
height:100%;
background:rgba(255,255,255,.35);
transform:skewX(-30deg);
transition:.6s;

}

.service-btn:hover:before{

left:140%;

}

.service-btn:hover{

transform:translateY(-5px);
box-shadow:0 15px 35px rgba(0,0,0,.25);

}


/*==============================
RIGHT IMAGE
===============================*/

.service-preview{

padding-left:40px;

}

.service-preview img{

width:100%;
animation:floatImage 5s infinite;

}

@keyframes floatImage{

0%{transform:translateY(0);}

50%{transform:translateY(-12px);}

100%{transform:translateY(0);}

}


/*==============================
RESPONSIVE
===============================*/

@media(max-width:1199px){

.section-title{

font-size:42px;

}

}

@media(max-width:991px){

.service-preview{

display:none;

}

.section-title{

font-size:36px;

}

.service-card{

margin-bottom:30px;

}

}

@media(max-width:767px){

.services-section{padding: 35px 0;}
.cta-content h2 {
    font-size: 18px;
}
.ml9 {
    line-height: 30px;
    font-size: 26px;
}

.content-01 h2 {
    font-size: 15px;
}

.ml15 {
    font-size: 23px;
}

.content-01 h4 {
    font-size: 14px;
    line-height: 24px;
}

.content-01 h4 span {
    font-size: 17px;
}

.content-01 p {
    width: 100%;
    font-size: 13px;
    line-height: 18px;
    text-align: justify;
}

.topimage {
    display: none;
}

.buttonflex {
    margin-top: 27px;
    gap: 7px;
}

.custombtn {
    padding: 8px 22px;
    font-size: 14px;
}

.media-btns {
    gap: 10px !important;
    margin-top: 18px !important;
    justify-content: center;
}

h2 {}

.book-content h2 {
    font-size: 20px !important;
}

.book-content {
    margin-left: 5px !important;
}

.book-content p {
    line-height: 25px !important;
    font-size: 13px !important;
    margin-bottom: 0px !important;
}

.subtitle {
    font-size: 10px !important;
}

.book-showcase {
    padding: 20px 0 40px !important;
}

.book-image-area {
    right: 0;
    display: none !important;
}

.book-img {
    width: 100%;
    display: none;
}

.circle-glow {
    display: none;
}

.text-center.mt-3 {
    margin-top: 0px !important;
    display: f;
}

.publisher-cta {
    padding: 44px 0px;
}

.publisher-cta::before {
    right: 0;
}
.story-section .cta-content h2 {
    font-size: 19px !important;
    margin-bottom: 12px !important;
    padding-top: 13px;
}

.social-box h4 {
    font-size: 19px;
}

.contact-bg {
    display: none;
}

.banner-overlay {
    background: url("../images/bg-1.png") center center/cover no-repeat;
}

.publisher-cta {
    padding: 60px 0px 5px;
}

.publisher-cta::after {
    right: 0;
    opacity: 0;
}

.cta-content h2 {
    font-size: 18px;
}

.cta-buttons {
    justify-content: center;
    margin-top: 30px;
}

.cta-sec {
    margin-top: 30px;
}

.footer-news {
    padding-top: 30px;
}

.footer-bottom p {
    font-size: 11px;
    padding-bottom: 20px;
}

.payment-icons img {
    width: 95%;
}

.payment-icons {
    justify-content: space-around;
}

.footer-bottom {
    margin-top: 12px;
}

.footer-social {
    margin-bottom: 22px;
}

div#navbarSupportedContent {
    background: linear-gradient(45deg, black, #f5bc1a);
    padding: 20px 20px;
}

.navbar-nav {
    padding-bottom: 14px;
    gap: 10px !important;
    padding-right: 0px;
}

a {}

.section-title{font-size: 21px !important;line-height: 26px;}

.section-text{margin-bottom: 30px;font-size:14px;line-height: 23px;max-width: 100%;}

.service-card{padding: 15px 25px 0px !important;}

.service-card h4{font-size: 19px;}

.service-btn{

width:100%;

}

}

.service-card:hover .icon:before {
    background: #fff;
    transition: all 0.5s ease;
}


.media-section{

padding: 0px 0;

background:#fff;

overflow:hidden;

position:relative;

}
    
    /* LEFT */
    
    .book-area{
    
    position:relative;
    height:520px;
    display:flex;
    justify-content:center;
    align-items:center;
    
    }
    
    .shape{
    position:absolute;
    width:340px;
    height:390px;
    border:2px solid #d9d9d9;
    left:70px;
    top:50px;
    z-index:1;
    }
    
    .book-box{
    
    position:relative;
    z-index:2;
    
    }
    
    .main-book{
    
/* width:310px; */
    
width: 841px;
    
animation:floatBook 5s ease-in-out infinite;
    
transition:.6s;
    }
    
    .book-box:hover .main-book{
    
    transform:
    perspective(1200px)
    rotateY(-12deg)
    rotateX(4deg)
    scale(1.06);
    
    }
    
    
    /* CONTENT */
    
    .media-content h2{
    
font-size: 31px;
    
font-weight:800;
    
line-height:1.1;
    
color:#1b2335;
    
margin-bottom:25px;
    }
    
    .media-content p{
    
    font-size:15px;
    line-height:31px;
    color:#666;
    margin-bottom:18px;
    
    }
    
    
    /* BUTTONS */
    
    .media-btns{
    
margin-top:35px;
    
display: flex;
    
gap: 17px;
    }
    
    .btn-read{
    
    display:inline-block;
    padding:14px 36px;
    background:linear-gradient(135deg,#ffd34a,#d89300);
    color:#111;
    font-weight:700;
    text-decoration:none;
    margin-right:15px;
    transition:.45s;
    position:relative;
    overflow:hidden;
    
    }
    
    .btn-call{
    
    display:inline-block;
    padding:14px 36px;
    border:1px solid #d5a12a;
    color:#111;
    font-weight:700;
    text-decoration:none;
    transition:.45s;
    
    }
    
    .btn-read:hover{
    
    color:#fff;
    transform:translateY(-6px);
    
    }
    
    .btn-call:hover{
    
    background:#d89300;
    color:#fff;
    transform:translateY(-6px);
    
    }
    
    
    /* Shine */
    
    .btn-read:before{
    
    content:"";
    position:absolute;
    width:50px;
    height:180%;
    background:rgba(255,255,255,.35);
    left:-80px;
    top:-30px;
    transform:rotate(30deg);
    transition:.7s;
    
    }
    
    .btn-read:hover:before{
    
    left:280px;
    
    }
    
    
    
    /* Floating */
    
    @keyframes floatBook{
    
    0%{
    
    transform:translateY(0);
    
    }
    
    50%{
    
    transform:translateY(-18px);
    
    }
    
    100%{
    
    transform:translateY(0);
    
    }
    
    }
    
    
    /* Border Animation */
    
    .shape:before{
    
content:"";
    
position:absolute;
    
width:100%;
    
height:100%;
    
border:2px solid #f2bf31;
    
left: -50px;
    
top:-12px;
    
animation:borderMove 6s linear infinite;
    }
    
    @keyframes borderMove{
    
    0%{
    
    transform:translate(0,0);
    
    }
    
    25%{
    
    transform:translate(10px,-10px);
    
    }
    
    50%{
    
    transform:translate(0,-18px);
    
    }
    
    75%{
    
    transform:translate(-10px,-8px);
    
    }
    
    100%{
    
    transform:translate(0,0);
    
    }
    
    }
    
    
    /* Responsive */
    
    @media(max-width:991px){
    
    .book-area{
    
    margin-bottom:60px;
    height:auto;
    
    }
    
    .shape{
    
    display:none;
    
    }
    
    .main-book{
    
    width:240px;
    
    }
    
    .media-content{
    
    text-align:center;
    
    }
    
    .media-content h2{
    
    font-size:38px;
    
    }
    
    }
    
    
    @media(max-width: 767px){
    
    .media-section{
    padding: 20px 0 20px;
    }
    
    .media-content h2{
    font-size: 22px;
    line-height: 33px;
    }
    
    .media-content p{
    font-size:14px;
    line-height: 24px;
    text-align: justify;
    margin-bottom: 0px;
    }
    
    .btn-read,
    .btn-call{
    
    display:block;
    margin:12px auto;
    width:220px;
    text-align:center;
    
    }
    
    .main-book{
    width: 376px;
    }
    
    }


    /* Scroll Animation */

.hidden{

    opacity:0;
    transform:translateY(60px);
    transition:.8s ease;
    
    }
    
    .show{
    
    opacity:1;
    transform:translateY(0);
    
    }
    
    
    /* Ripple */
    
    .btn-read,
    .btn-call{
    
    position:relative;
    overflow:hidden;
    
    }
    
    .ripple{
    
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    transform:translate(-50%,-50%);
    animation:ripple .6s linear;
    
    }
    
    @keyframes ripple{
    
    0%{
    
    width:0;
    height:0;
    opacity:1;
    
    }
    
    100%{
    
    width:300px;
    height:300px;
    opacity:0;
    
    }
    }

    /*==============================
      STORY SECTION
===============================*/

.story-section{
    z-index: 1;
    position:relative;
    background:#fff;
    /* overflow:hidden; */
    padding-bottom:90px;
    margin-top: 50px;
}

/*==============================
        TOP BANNER
===============================*/

.story-cta{
    position:relative;
    padding: 45px 0;
    margin-bottom:90px;
    overflow:visible;
}

.story-cta:before{
    top: 0;
    content:"";
    position:absolute;
    inset:0;
    background:url('../images/cta.png') center center/cover no-repeat;
    z-index: 0;
}

.story-cta:after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(26,34,52,.90);
    z-index:-1;
}

/*==============================
CONTENT
===============================*/

.story-section .cta-content h2{

font-size: 42px;

font-weight:800;

line-height:1.1;

color:#f1b91d;

margin-bottom:20px;

text-transform:uppercase;
}

.story-section .cta-content p{

font-size:15px;
color:#fff;
line-height:30px;
max-width:640px;
opacity:.9;
margin-bottom:35px;

}

/*==============================
BUTTONS
===============================*/

.cta-btns{

display:flex;
align-items:center;
gap:15px;

}

.btn-start{

display:inline-block;
padding:16px 34px;
background:linear-gradient(135deg,#ffd24a,#d58d00);
font-size:15px;
font-weight:700;
color:#111;
text-decoration:none;
transition:.45s;
position:relative;
overflow:hidden;

}

.btn-chat{

display:inline-block;
padding:15px 34px;
border:1px solid rgba(255,255,255,.5);
color:#fff;
font-weight:600;
text-decoration:none;
transition:.45s;

}

.btn-start:hover{

transform:translateY(-5px);
color:#fff;
box-shadow:0 20px 35px rgba(0,0,0,.25);

}

.btn-chat:hover{

background:#fff;
color:#111;
transform:translateY(-5px);

}

/* Shine */

.btn-start:before{

content:"";
position:absolute;
width:60px;
height:200%;
background:rgba(255,255,255,.35);
left:-80px;
top:-30px;
transform:rotate(30deg);
transition:.7s;

}

.btn-start:hover:before{

left:280px;

}

/*==============================
GIRL IMAGE
===============================*/

.girl-box{

position:absolute;

right:0;

z-index: 6;

top: -224px;

width:430px;

height:430px;
}

.circle-bg{

position:absolute;

width:100%;

height:100%;

/* background:#dbe4e8; */

/* border-radius:50%; */

/* border:14px solid #fff; */

/* box-shadow:0 20px 45px rgba(0,0,0,.12); */
}

.girl{

position:absolute;
width:100%;
left:0;
bottom:0;
animation:floatGirl 5s ease-in-out infinite;
transition:.5s;

}

.girl:hover{

transform:scale(1.05);

}

/*==============================
BOTTOM SECTION
===============================*/

.story-content{

padding-left:25px;

}

.story-content h2{

font-size: 32px;

font-weight:800;

line-height:1.08;

color:#1b2335;

margin-bottom:25px;

text-transform:uppercase;
}

.story-content p{

font-size:15px;
line-height:31px;
color:#666;
margin-bottom:18px;

}

/*==============================
BOTTOM BUTTONS
===============================*/

.story-btns{

margin-top:30px;

display: flex;

gap: 18px;
}

.btn-read{

display:inline-block;
padding:16px 36px;
background:linear-gradient(135deg,#ffd24a,#d58d00);
color:#111;
font-weight:700;
text-decoration:none;
margin-right:15px;
transition:.45s;
position:relative;
overflow:hidden;

}

.btn-call{

display:inline-block;
padding:16px 36px;
border:1px solid #d9a123;
font-weight:700;
color:#111;
text-decoration:none;
transition:.45s;

}

.btn-read:hover{

transform:translateY(-5px);
color:#fff;

}

.btn-call:hover{

background:#d58d00;
color:#fff;
transform:translateY(-5px);

}

/*==============================
ANIMATIONS
===============================*/

@keyframes floatGirl{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

/*====================================
        BOOK AREA
=====================================*/

.book-box{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:520px;
    perspective:1500px;
}

.book{

width:100%;

max-width:500px;

position:relative;

z-index:2;

/* filter:drop-shadow(0 30px 40px rgba(0,0,0,.20)); */

/* animation:bookFloat 5s ease-in-out infinite; */

transition:.6s ease;
}

/* 3D Hover */

.book-box:hover .book{

    transform:
    rotateY(-14deg)
    rotateX(8deg)
    scale(1.05);

    filter:
    drop-shadow(0 45px 60px rgba(0,0,0,.28));

}


/* Shadow */

.book-box:after{

content:"";

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

width:320px;

height:35px;

/* background:rgba(0,0,0,.18); */

filter:blur(22px);

border-radius:50%;

/* animation:shadowMove 5s infinite; */
}

@keyframes shadowMove{

0%{

transform:translateX(-50%) scale(.95);

}

50%{

transform:translateX(-50%) scale(1.05);

}

100%{

transform:translateX(-50%) scale(.95);

}

}


/* Floating */

@keyframes bookFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}


/*==========================
TEXT Animation
==========================*/

.story-content{

animation:fadeRight 1.2s;

}

@keyframes fadeRight{

from{

opacity:0;
transform:translateX(60px);

}

to{

opacity:1;
transform:translateX(0);

}

}

.book-box{

animation:fadeLeft 1.2s;

}

@keyframes fadeLeft{

from{

opacity:0;
transform:translateX(-60px);

}

to{

opacity:1;
transform:translateX(0);

}

}


/*==========================
Buttons Hover
==========================*/

.btn-read,
.btn-call{

border-radius:3px;

}

.btn-read:hover{

letter-spacing:.5px;

}

.btn-call:hover{

border-color:#d58d00;

}


/*==========================
Responsive
==========================*/

@media(max-width:1199px){

.girl-box{

width:360px;
height:360px;
top:-55px;

}

.story-content h2{

font-size:44px;

}

.cta-content h2{

font-size:44px;

}

}



@media(max-width:991px){

.story-cta{

padding:70px 0 170px;

}

.girl-box{

position:relative;
margin:50px auto 0;
top:0;
right:auto;

}

.book-box{margin-bottom: 0px;min-height:auto;display: none;}

.story-content{padding-left:0;text-align:center;padding-top: 30px;padding-bottom: 30px;}

.story-content h2{

font-size:36px;
line-height:48px;

}

.story-btns{

text-align:center;

}

.cta-content{

text-align:center;

}

.cta-btns{

justify-content:center;

}

}



@media(max-width:767px){

.story-section{padding-bottom: 60px !important;margin-top: 0px !important;}

.story-cta{padding: 40px 0 30px;margin-bottom: 0;}

.girl-box{width: 303px;height: 248px;margin-top: 0px;}

.circle-bg{

border-width:8px;

}

.cta-content h2{

font-size:30px;
line-height:42px;

}

.story-content h2{font-size: 23px;line-height: 30px;margin-bottom: 10px;}

.cta-content p,
.story-content p{font-size: 14px !important;line-height: 22px !important;text-align: center;}

.book{

max-width:300px;

}

.btn-start,
.btn-chat,
.btn-read,
.btn-call{display:block;width: 165px;margin: 0px;text-align:center;}

.story-btns{margin-top:25px;justify-content: center;}

}


/*==========================
Extra Smooth
==========================*/

.book,
.girl,
.btn-read,
.btn-call,
.btn-chat,
.btn-start{

will-change:transform;

}

.book:hover{

cursor:pointer;

}

.story-content h2{

transition:.5s;

}

.story-content:hover h2{

color:#d58d00;

}


/* Reveal */

.hidden-item{
    opacity:0;
    transform:translateY(70px);
    transition:.9s ease;
    }
    
    .show-item{
    opacity:1;
    transform:translateY(0);
    }
    
    /* Ripple */
    
    .btn-read,
    .btn-call,
    .btn-start,
    .btn-chat{
    position:relative;
    overflow:hidden;
    }
    
    .ripple{
    position:absolute;
    width:10px;
    height:10px;
    background:rgba(255,255,255,.45);
    border-radius:50%;
    transform:translate(-50%,-50%);
    animation:ripple .7s linear;
    }
    
    @keyframes ripple{
    
    0%{
    width:0;
    height:0;
    opacity:1;
    }
    
    100%{
    width:320px;
    height:320px;
    opacity:0;
    }
    
    }
    
    /* Text */
    
    .story-content h2,
    .story-content p,
    .story-btns{
    opacity:0;
    transform:translateY(30px);
    transition:.8s;
    }


    
.book-row{
    overflow:hidden;
    margin-bottom:20px;
}

.book-track{
    display:flex;
    gap: 50px;
    width:max-content;
    right: 0;
}

.book-track img{
    width: 260px;
    height: 400px;
    object-fit:cover;
    transition:.4s;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.book-track img:hover{
    transform:translateY(-12px);
}

/* TOP RIGHT */

.row-top .book-track{
    animation:moveRight 60s linear infinite;
}

/* BOTTOM LEFT */

.row-bottom .book-track{
    animation:moveLeft 60s linear infinite;
}

.book-row:hover .book-track{
    animation-play-state:paused;
}
.book-wall-heading h2 {
    font-size: 36px;
    color: #E9B835;
    text-align: center;
    padding-bottom: 0px;
}

/* ANIMATION */

@keyframes moveLeft{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

@keyframes moveRight{

    from{
        transform:translateX(-50%);
    }

    to{
        transform:translateX(0);
    }
}


.book-wall-section {
    background: #151e2d;
    padding-top: 35px;
    padding-bottom: 30px;
}

.book-wall-heading p {
    color: #fff;
    text-align: center;
    width: 72%;
    font-size: 15px;
    margin: auto;
}

.book-wall-heading {
    padding-bottom: 35px;
}


.hero-book-sec{

padding: 65px 0 50px;

/* min-height: 482px; */

background:url("../images/bg-2.png") center center no-repeat;

background-size:cover;

position:relative;

overflow:hidden;
}

.hero-book-sec::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:linear-gradient(90deg,
    rgba(20,28,42,.92) 0%,
    rgba(20,28,42,.75) 35%,
    rgba(20,28,42,.25) 70%,
    rgba(20,28,42,0) 100%);

}

.hero-book-sec .container{

    position:relative;

    z-index:2;

}

.sub-title{

    color:#fff;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:600;

}

.hero-content h2{color:#fff;font-size: 21px;font-weight:800;line-height:1.05;margin:18px 0;}

.hero-content h2 span{

    color:#F4B41A;

    display:block;

}

.hero-content p{

    color:#d8dde8;

    font-size:15px;

    line-height:30px;

    max-width:520px;

    margin-bottom:35px;

}

.hero-btns{

    display:flex;

    gap:15px;

}

.btn-start{

    background:#F4B41A;

    color:#111;

    padding:15px 34px;

    text-decoration:none;

    font-weight:700;

    transition:.4s;

}

.story-content .btn-call{

border: 1px solid rgb(246 202 73);

color: #000;

padding:15px 34px;

text-decoration:none;

transition:.4s;
}

.btn-start:hover{

    transform:translateY(-5px);

    background:#ffca38;

}

.btn-call:hover{background: #000000;color:#111;}

@media(max-width:991px){

.hero-book-sec{

padding:80px 0;

background-position:75% center;

}

.hero-content{

text-align:center;

}

.hero-btns{

justify-content:center;

}

.hero-content h2{

font-size:38px;

}

}

@media(max-width:767px){

.hero-book-sec{display: none;min-height:auto;padding: 25px 0 30px;/* background-position: 78% center !important; */background-position: left;}

.hero-content h2{font-size: 14px !important;line-height: 18px;margin-top: 0;}

.hero-content p{

font-size:14px;

line-height:26px;

}

.hero-btns{/* flex-direction:column; */}

.btn-start,
.btn-call{font-size: 12px;padding: 16px 14px;text-align:center;}

}

/*======================================
 BOOK SHOWCASE SECTION
======================================*/

.book-showcase{
    padding:100px 0;
    background:#fff;
    overflow:hidden;
    position:relative;
}

.book-showcase .container{
    position:relative;
    z-index:2;
}

/*=========================
 LEFT CONTENT
==========================*/

.subtitle{
    display:inline-block;
    font-size:14px;
    font-weight:700;
    color:#232323;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:12px;
}

.book-content h2{

    font-size:52px;
    font-weight:800;
    color:#1f2737;
    line-height:1.08;
    margin-bottom:22px;
    text-transform:uppercase;

}

.book-content h2 span{

    display:block;
    color:#f4b21d;

}

.book-content p{

    color:#666;
    font-size:15px;
    line-height:31px;
    margin-bottom:18px;

}

/*=========================
 BUTTONS
==========================*/

.book-buttons{

    margin-top:35px;
    display:flex;
    gap:15px;

}

.read-btn{

    display:inline-block;
    padding:15px 34px;
    background:linear-gradient(135deg,#FFC938,#D98C00);
    color:#111;
    font-weight:700;
    text-decoration:none;
    transition:.45s;
    position:relative;
    overflow:hidden;

}

.read-btn:hover{

    color:#fff;
    transform:translateY(-5px);

}

.read-btn::before{

    content:"";
    position:absolute;
    width:55px;
    height:180%;
    left:-80px;
    top:-25px;
    background:rgba(255,255,255,.35);
    transform:rotate(28deg);
    transition:.7s;

}

.read-btn:hover::before{

    left:240px;

}

.call-btn{

    display:inline-block;
    padding:15px 34px;
    border:1px solid #d7a42b;
    color:#222;
    font-weight:700;
    text-decoration:none;
    transition:.45s;

}

.call-btn:hover{

    background:#d7a42b;
    color:#fff;
    transform:translateY(-5px);

}

/*=========================
 IMAGE AREA
==========================*/

.book-image-area{

    position:relative;
    min-height:500px;
    display:flex;
    justify-content:center;
    align-items:center;
    perspective:1600px;

}

.circle-glow{

    position:absolute;
    width:340px;
    height:340px;
    border-radius:50%;
    background:#ffbb1d;
    filter:blur(90px);
    opacity:.18;

}

.book-img{

    position:relative;
    width:520px;
    max-width:100%;
    z-index:2;

    filter:
    drop-shadow(0 30px 45px rgba(0,0,0,.22));

    animation:bookFloat 5s ease-in-out infinite;

    transition:.55s;

}

.book-image-area:hover .book-img{

    transform:
    perspective(1400px)
    rotateY(-12deg)
    rotateX(6deg)
    scale(1.04);

}

/*=========================
 FLOAT
==========================*/

@keyframes bookFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

/*======================================
 BOOK SHOWCASE SECTION
======================================*/

.book-showcase{
    padding: 60px 0;
    background:#fff;
    overflow:hidden;
    position:relative;
}

.book-showcase .container{
    position:relative;
    z-index:2;
}

/*=========================
 LEFT CONTENT
==========================*/

.subtitle{
    display:inline-block;
    font-size:14px;
    font-weight:700;
    color:#232323;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:12px;
}

.book-content h2{

font-size: 32px;

font-weight:800;

color:#1f2737;

line-height:1.08;

margin-bottom:22px;

text-transform:uppercase;
}

.book-content h2 span{

    display:block;
    color:#f4b21d;

}

.book-content p{

    color:#666;
    font-size:15px;
    line-height:31px;
    margin-bottom:18px;

}

/*=========================
 BUTTONS
==========================*/

.book-buttons{

    margin-top:35px;
    display:flex;
    gap:15px;

}

.read-btn{

    display:inline-block;
    padding:15px 34px;
    background:linear-gradient(135deg,#FFC938,#D98C00);
    color:#111;
    font-weight:700;
    text-decoration:none;
    transition:.45s;
    position:relative;
    overflow:hidden;

}

.read-btn:hover{

    color:#fff;
    transform:translateY(-5px);

}

.read-btn::before{

    content:"";
    position:absolute;
    width:55px;
    height:180%;
    left:-80px;
    top:-25px;
    background:rgba(255,255,255,.35);
    transform:rotate(28deg);
    transition:.7s;

}

.read-btn:hover::before{

    left:240px;

}

.call-btn{

    display:inline-block;
    padding:15px 34px;
    border:1px solid #d7a42b;
    color:#222;
    font-weight:700;
    text-decoration:none;
    transition:.45s;

}

.call-btn:hover{

    background:#d7a42b;
    color:#fff;
    transform:translateY(-5px);

}

/*=========================
 IMAGE AREA
==========================*/

.book-image-area{

position:relative;

min-height:500px;

display:flex;

justify-content:center;

align-items:center;

perspective:1600px;

position: relative;

right: -84px;
}

.circle-glow{

    position:absolute;
    width:340px;
    height:340px;
    border-radius:50%;
    background:#ffbb1d;
    filter:blur(90px);
    opacity:.18;

}

.book-img{

position:relative;

width: 580px;

max-width:100%;

z-index:2;

filter:
    drop-shadow(0 30px 45px rgba(0,0,0,.22));

animation:bookFloat 5s ease-in-out infinite;

transition:.55s;
}

.book-image-area:hover .book-img{

    transform:
    perspective(1400px)
    rotateY(-12deg)
    rotateX(6deg)
    scale(1.04);

}

/*=========================
 FLOAT
==========================*/

@keyframes bookFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

.ripple{

    position:absolute;
    
    width:12px;
    height:12px;
    
    background:rgba(255,255,255,.45);
    
    border-radius:50%;
    
    transform:translate(-50%,-50%);
    
    animation:ripple .7s linear;
    
    pointer-events:none;
    
    }
    
    .read-btn,
    .call-btn{
    
    overflow:hidden;
    position:relative;
    
    }
    
    @keyframes ripple{
    
    0%{
    
    width:0;
    height:0;
    opacity:1;
    
    }
    
    100%{
    
    width:320px;
    height:320px;
    opacity:0;
    
    }
    
    }

    .book-content {
        margin-left: 40px;
    }


    /*=========================================
        PROCESS SECTION
=========================================*/

.process-section{
    padding:100px 0;
    background:#f8f9fc;
    position:relative;
    overflow:hidden;
}

.process-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(255,196,0,.08);
    top:-220px;
    left:-180px;
}

.process-section::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(33,43,63,.05);
    bottom:-180px;
    right:-120px;
}

/*=========================
 SECTION TITLE
=========================*/

.section-title{
    margin-bottom: 26px;
}

.section-title h2{
    font-size: 40px;
    line-height:1.05;
    font-weight:800;
    color:#202939;
    margin-bottom:18px;
    text-transform:uppercase;
}

.section-title p{
    color:#666;
    font-size: 14px;
    line-height: 23px;
    max-width: 91%;
}

/*=========================
 PROCESS CARDS
=========================*/

.process-row{
    margin-top:15px;
}

.process-card{
    background:#fff;
    padding:28px;
    margin-bottom:25px;
    border-radius: 0px;
    position:relative;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.45s;
    cursor:pointer;
    border: 2px solid #582a00;
}

.process-card span{
    font-size:14px;
    font-weight:700;
    color:#999;
}

.process-card h4{
    font-size: 21px;
    margin:12px 0 14px;
    font-weight:700;
    color:#202939;
    transition:.4s;
}

.process-card p{
    color:#666;
    font-size: 15px;
    line-height: 24px;
    margin-bottom:20px;
    transition:.4s;
}

.process-card a{
    color:#202939;
    font-weight:700;
    text-decoration:none;
    transition:.4s;
}

.process-card a i{
    margin-left:8px;
    transition:.35s;
}

/*=========================
 ACTIVE + HOVER
=========================*/

.active-card,
.process-card:hover{

background: linear-gradient(135deg,#ffc933,#d98c00);

transform:translateY(-12px);
}

.active-card span,
.process-card:hover span{

    color:#fff;

}

.active-card h4,
.process-card:hover h4{

border-top: 1px solid #fff;

color: #fff;

padding-top: 7px;
}

.active-card p,
.process-card:hover p{

    color:#473d14;

}

.active-card a,
.process-card:hover a{

    color:#202939;

}

.process-card:hover i{

    transform:translateX(8px);

}

/* Animated Border */

.process-card::before{

    content:"";
    position:absolute;
    width:100%;
    height:4px;
    left:-100%;
    top:0;
    background:#202939;
    transition:.5s;

}

.process-card:hover::before{

    left:0;

}

/*=========================
 RIGHT FORM
=========================*/

.discount-box{

background:#202939;

padding: 35px 25px;

border-radius:10px;

box-shadow:0 18px 45px rgba(0,0,0,.18);

position:relative;

overflow:hidden;
}

.discount-box::before{

content:"";

position:absolute;

width:180px;
height:180px;

border-radius:50%;

background:rgba(255,196,0,.08);

right:-80px;
top:-80px;

}

.discount-box h5{

color:#fff;
font-size:16px;
letter-spacing:1px;
text-align:center;

}
.contact-items {
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: start;
}

.contact-items i {
    padding-right: 29px;
}
.discount-box h2{

color:#fff;
font-size:33px;
font-weight:800;
text-align:center;
margin-bottom:28px;

}

.discount-box input,
.discount-box textarea{

width:100%;

background: #212121;

border:1px solid rgba(255,255,255,.18);

height:52px;

padding:0 18px;

margin-bottom:15px;

color:#fff;

transition:.4s;
}

.discount-box textarea{

height:120px;
padding-top:15px;
resize:none;

}

.discount-box input::placeholder,
.discount-box textarea::placeholder{

color:#c8cfda;

}

.discount-box input:focus,
.discount-box textarea:focus{

outline:none;

border-color:#f5bd1f;

box-shadow:0 0 20px rgba(245,189,31,.15);

}

.discount-box button{

width:100%;

height:56px;

border:none;

background:linear-gradient(135deg,#ffc933,#d98c00);

font-size:17px;

font-weight:700;

color:#202939;

transition:.45s;

}

.discount-box button:hover{

transform:translateY(-4px);

color:#fff;

box-shadow:0 15px 35px rgba(245,189,31,.35);

}

/*==========================================
    PREMIUM CARD ANIMATION
==========================================*/

.process-card{

    transform-style:preserve-3d;
    backface-visibility:hidden;
    
    }
    
    .process-card:hover{
    
    transform:
    translateY(-12px)
    scale(1.03);
    
    box-shadow:
    0 25px 55px rgba(0,0,0,.15);
    
    }
    
    .process-card::after{
    
    content:"";
    
    position:absolute;
    
    left:-120%;
    
    top:0;
    
    width:60%;
    
    height:100%;
    
    background:
    
    linear-gradient(
    
    90deg,
    
    transparent,
    
    rgba(255,255,255,.45),
    
    transparent
    
    );
    
    transform:skewX(-25deg);
    
    transition:1s;
    
    }
    
    .process-card:hover::after{
    
    left:160%;
    
    }
    
    /*==============================
    CARD NUMBER
    ==============================*/
    
    .process-card span{
    
    display:inline-block;
    
    transition:.4s;
    
    }
    
    .process-card:hover span{
    
    transform:scale(1.2);
    
    }
    
    
    /*==============================
    ARROW
    ==============================*/
    
    .process-card a{
    
    display:inline-flex;
    
    align-items:center;
    
    gap:8px;
    
    }
    
    .process-card a i{
    
    transition:.4s;
    
    }
    
    .process-card:hover a i{
    
    transform:translateX(10px);
    
    }
    
    
    /*==============================
    FORM
    ==============================*/
    
    .discount-box{
    
    animation:floatForm 5s ease-in-out infinite;
    
    }
    
    @keyframes floatForm{
    
    0%{
    
    transform:translateY(0);
    
    }
    
    50%{
    
    transform:translateY(-8px);
    
    }
    
    100%{
    
    transform:translateY(0);
    
    }
    
    }
    
    .discount-box button{
    
    cursor:pointer;
    
    border-radius:4px;
    
    overflow:hidden;
    
    position:relative;
    
    }
    
    .discount-box button::before{
    
    content:"";
    
    position:absolute;
    
    left:-100px;
    
    top:0;
    
    width:60px;
    
    height:100%;
    
    background:rgba(255,255,255,.35);
    
    transform:skewX(-25deg);
    
    transition:.7s;
    
    }
    
    .discount-box button:hover::before{
    
    left:130%;
    
    }
    
    /*==============================
    RESPONSIVE
    ==============================*/
    
    @media(max-width:1199px){
    
    .section-title h2{
    
    font-size:42px;
    
    }
    
    .discount-box h2{
    
    font-size:34px;
    
    }
    
    }
    
    @media(max-width:991px){
    
    .process-section{
    
    padding:80px 0;
    
    }
    
    .discount-box{
    
    margin-top:40px;
    
    }
    
    .section-title{
    
    text-align:center;
    
    }
    
    }
    
    @media(max-width:767px){
    
    .process-section{
    padding: 30px 0;
    }
    
    .section-title h2{
    font-size: 25px;
    line-height: 31px;
    }
    
    .section-title p{
    font-size: 12px;
    max-width: 100%;
    }
    
    .process-card{
    
    padding:22px;
    
    }
    
    .process-card h4{
    
    font-size:22px;
    
    }
    
    .discount-box{
    
    padding:25px;
    
    }
    
    .discount-box h2{
    
    font-size:28px;
    
    }
    
    .discount-box button{
    
    height:52px;
    
    }
    
    }
    
    
    /*==============================
    SCROLL REVEAL
    ==============================*/
    
    .hidden-card{
    
    opacity:0;
    
    transform:translateY(60px);
    
    transition:.8s;
    
    }
    
    .show-card{
    
    opacity:1;
    
    transform:translateY(0);
    
    }
    /*==================================
      WORKFLOW SECTION
==================================*/

.workflow-section{
    padding: 0px 0px 60px;
    background:#fafafa;
    position:relative;
    overflow:hidden;
}

.workflow-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:rgba(240,183,31,.08);
    border-radius:50%;
    top:-180px;
    left:-180px;
}

.workflow-section::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(32,41,57,.05);
    border-radius:50%;
    right:-150px;
    bottom:-150px;
}

.workflow-heading{
    margin-bottom:70px;
    position:relative;
    z-index:2;
}

.workflow-heading h2{

    font-size:48px;
    font-weight:800;
    color:#202939;
    text-transform:uppercase;
    margin-bottom:15px;

}

.workflow-heading p{

    max-width:700px;
    margin:auto;
    color:#777;
    line-height:28px;
    font-size:15px;

}

/*==================================
      ITEM
==================================*/

.workflow-item{

    position:relative;

    padding-top:45px;

    transition:.45s;

}

/*==================================
      ICON
==================================*/

.workflow-icon{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:82px;
    height:82px;

    background:#efb91d;

    border:5px solid #202939;

    border-radius:50%;

    display:flex;

    justify-content:center;
    align-items:center;

    z-index:100;

    transition:.45s;

    box-shadow:0 18px 35px rgba(0,0,0,.12);

}

.workflow-icon img{

    width:36px;

    transition:.45s;

}

/*==================================
      CARD
==================================*/

.workflow-card{

background:#fff;

border:1px solid #efb91d;

border-radius:8px;

padding: 65px 7px 27px;

text-align:center;

position:relative;

transition:.45s;

box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.workflow-card h4{

font-size: 20px;

font-weight:700;

color:#202939;

margin-bottom:15px;

transition:.35s;
}

.workflow-card p{

    color:#666;

    line-height:28px;

    font-size:15px;

    transition:.35s;

}

/*==================================
      ACTIVE + HOVER
==================================*/

.workflow-card.active-card,
.workflow-item:hover .workflow-card{
    /*background:#efb91d;*/
    /* transform:translateY(-12px); */}

.workflow-card.active-card h4,
.workflow-item:hover .workflow-card h4{

    color:#202939;

}

.workflow-card.active-card p,
.workflow-item:hover .workflow-card p{

    color:#4d431c;

}

.workflow-item:hover .workflow-icon{

    background:#202939;

    /* transform:translateX(-50%) rotate(360deg); */

}

.workflow-item:hover .workflow-icon img{

    filter:brightness(0) invert(1);

}

/*==================================
      BUTTONS
==================================*/

.workflow-btn{

    display:inline-block;

    padding:15px 35px;

    background:linear-gradient(135deg,#ffc933,#d98b00);

    color:#111;

    font-weight:700;

    text-decoration:none;

    margin:10px;

    transition:.4s;

}

.workflow-btn:hover{

    color:#fff;

    background:#202939;

    /* transform:translateY(-5px); */

}

.workflow-btn.outline{background:#fff;border:2px solid #efb91d;}

.workflow-btn.outline:hover{

    background:#efb91d;

    color:#202939;

}

/*====================================
      WORKFLOW PREMIUM EFFECTS
====================================*/

/* Card 3D Hover */

.workflow-card{/* transform-style:preserve-3d; *//* backface-visibility:hidden; */}

.workflow-item:hover .workflow-card{

    /* transform:
    perspective(1200px)
    rotateX(5deg)
    rotateY(-5deg)
    translateY(-15px)
    scale(1.03); */

    box-shadow:
    0 25px 55px rgba(0,0,0,.18),
    0 0 35px rgba(239,185,29,.18);

}


/*==============================
      SHINE EFFECT
==============================*/

.workflow-card::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

/* background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent); */

transform:skewX(-25deg);

transition:.9s;
}

/* .workflow-item:hover .workflow-card::before{

    left:160%;

} */


/*==============================
      BORDER GLOW
==============================*/

.workflow-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:8px;

    border:2px solid transparent;

    transition:.35s;

    pointer-events:none;

}

.workflow-item:hover .workflow-card::after{

    border-color:#202939;

}


/*==============================
      ICON FLOAT
==============================*/

.workflow-icon{

    animation:workflowFloat 3.5s ease-in-out infinite;

}

@keyframes workflowFloat{

0%{

transform:translateX(-50%) translateY(0);

}

50%{

transform:translateX(-50%) translateY(-8px);

}

100%{

transform:translateX(-50%) translateY(0);

}

}


/*==============================
      TEXT EFFECT
==============================*/

.workflow-card h4{

transition:.35s;

}

.workflow-item:hover h4{

letter-spacing:.4px;

}

.workflow-card p{

transition:.35s;

}

.workflow-item:hover p{

transform:translateY(-3px);

}


/*==============================
      BUTTON EFFECT
==============================*/

.workflow-btn{

position:relative;

overflow:hidden;

}

.workflow-btn::before{

content:"";

position:absolute;

left:-90px;

top:0;

width:45px;

height:100%;

background:rgba(255,255,255,.35);

transform:skewX(-25deg);

transition:.8s;

}

.workflow-btn:hover::before{

left:140%;

}

.workflow-btn:hover{

box-shadow:0 15px 35px rgba(239,185,29,.35);

}


/*==============================
      CARD SHADOW PULSE
==============================*/

.workflow-item:hover .workflow-card{

/*animation:workflowPulse 1.4s infinite alternate;*/

}

@keyframes workflowPulse{

0%{

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

100%{

box-shadow:0 25px 60px rgba(0,0,0,.18);

}

}


/*==============================
      RESPONSIVE
==============================*/

@media(max-width:1199px){

.workflow-heading h2{

font-size:42px;

}

}

@media(max-width:991px){

.workflow-section{

padding:80px 0;

}
.story-section .cta-content h2 {
    font-size: 33px;
}

.social-box h4 {
    font-size: 19px;
}

.contact-bg {
    display: none;
}

.banner-overlay {
    background: url("../images/bg-1.png") center center/cover no-repeat;
}

.publisher-cta {
    padding: 60px 0px 5px !important;
}

.publisher-cta::after {
    right: 0;
    opacity: 0;
}

.cta-content h2 {
    font-size: 19px !important;
}

.cta-buttons {
    justify-content: center !important;
    margin-top: 30px;
}

.cta-sec {
    margin-top: 30px;
}

.footer-news {
    padding-top: 30px;
}

.footer-bottom p {
    font-size: 11px;
    padding-bottom: 20px;
}

.payment-icons img {
    width: 95%;
}

.payment-icons {
    justify-content: space-around;
}

.footer-bottom {
    margin-top: 12px !important;
}

.footer-social {
    margin-bottom: 22px;
}

div#navbarSupportedContent {
    background: linear-gradient(45deg, black, #f5bc1a);
    padding: 20px 20px;
}

.navbar-nav {
    padding-bottom: 14px;
    gap: 10px !important;
    padding-right: 0px;
}

a {}
.workflow-item{margin-bottom: 0;}

}

@media(max-width:767px){

.workflow-section{padding: 27px 0 30px !important;}

.workflow-heading{

margin-bottom:55px;

}

.workflow-heading h2{font-size: 18px;line-height: 23px;}

.workflow-heading p{

font-size:14px;

line-height:26px;

}

.workflow-icon{

width:70px;
height:70px;

}

.workflow-icon img{

width:30px;

}

.workflow-card{padding: 45px 20px 22px;}

.workflow-card h4{

font-size:22px;

}

.workflow-btn{/* display:block; *//* width: fit-content; */margin: 15px auto;text-align:center;padding: 10px 20px;}

}


/*==============================
      SCROLL REVEAL
==============================*/

.workflow-hidden{

opacity:0;

transform:translateY(70px);

transition:.8s ease;

}

.workflow-show{

opacity:1;

transform:translateY(0);

}


/*==============================
      RIPPLE EFFECT
==============================*/

.workflow-btn{/* overflow:hidden; */}

.workflow-ripple{

position:absolute;

width:10px;

height:10px;

border-radius:50%;

background:rgba(255,255,255,.45);

transform:translate(-50%,-50%);

animation:workflowRipple .7s linear;

pointer-events:none;

}

@keyframes workflowRipple{

0%{

width:0;
height:0;
opacity:1;

}

100%{

width:320px;
height:320px;
opacity:0;

}

}


/*====================================
        TESTIMONIAL SECTION
====================================*/

.bp-testimonial{
    padding:100px 0;
    background:#fbfaf8;
    overflow:hidden;
    position:relative;
}

.bp-heading{
    margin-bottom:55px;
}

.bp-heading h2{
    font-size:46px;
    font-weight:800;
    color:#1f2738;
    text-transform:uppercase;
    margin-bottom:18px;
}

.bp-heading p{
    max-width:700px;
    margin:auto;
    color:#777;
    line-height:28px;
    font-size:15px;
}


/*=============================
      REVIEW BOX
=============================*/

.bp-review-wrapper{

    position:relative;

    max-width:850px;

    margin:auto;

    min-height:180px;

}

.bp-review{

    display:none;

    text-align:center;

    animation:fadeReview .8s ease;

}

.bp-review.active{

    display:block;

}

@keyframes fadeReview{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.bp-review p{

font-size:17px;

line-height:34px;

color:#666;

margin-bottom:25px;

}

.bp-review h4{

font-size:30px;

font-weight:700;

color:#1f2738;

}


/*=============================
      QUOTES
=============================*/

.bp-quote{

display:flex;

justify-content:center;

margin-bottom:30px;

}

.bp-quote span{

width:55px;

height:55px;

border-radius:50%;

background:#f1c04a;

margin:0 8px;

position:relative;

}

.bp-quote span::before{

content:"❝";

position:absolute;

left:50%;
top:50%;

transform:translate(-50%,-50%);

font-size:28px;

font-weight:700;

color:#1f2738;

}


/*=============================
      USERS
=============================*/

.bp-users{

display:flex;

justify-content:center;

align-items:center;

margin-top:45px;

gap:18px;

flex-wrap:wrap;

}

.bp-user{

width:70px;

height:70px;

border-radius:50%;

overflow:hidden;

cursor:pointer;

transition:.45s;

border:3px solid transparent;

opacity:.6;

}

.bp-user img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.bp-user:hover{

transform:translateY(-8px);

opacity:1;

}

.bp-user.active-user{

width:95px;

height:95px;

border:4px solid #f1c04a;

opacity:1;

box-shadow:0 12px 30px rgba(0,0,0,.15);

}


/*=============================
      BUTTON STYLE READY
=============================*/

.bp-btn{

display:inline-block;

padding:15px 35px;

background:#f1c04a;

color:#1f2738;

font-weight:700;

transition:.4s;

text-decoration:none;

}

.bp-btn:hover{

background:#1f2738;

color:#fff;

}

/*======================================
        TESTIMONIAL SECTION
======================================*/

.publisher-testimonial{
    padding: 67px 0 180px;
    background:#faf8f4;
    position:relative;
    overflow:hidden;
}

.publisher-testimonial::before{

content:"";

position:absolute;

width:450px;
height:450px;

border-radius:50%;

background:rgba(240,183,31,.06);

left:-180px;
top:-180px;

}

.publisher-testimonial::after{

content:"";

position:absolute;

width:350px;
height:350px;

border-radius:50%;

background:rgba(32,41,57,.04);

right:-140px;
bottom:-140px;

}


/*============================*/

.testimonial-heading{

margin-bottom:80px;

position:relative;

z-index:2;

}

.testimonial-heading h2{

font-size:50px;

font-weight:800;

line-height:1.15;

color:#202939;

text-transform:uppercase;

margin-bottom:18px;

}

.testimonial-heading span{

display:block;

color:#efb91d;

}

.testimonial-heading p{

max-width:720px;

margin:auto;

font-size:15px;

line-height:30px;

color:#777;

}


/*============================*/

.testimonial-wrapper{

position:relative;

padding-top:70px;

}


/*============================*/

.quote-circle{

position:absolute;

left:50%;

top:0;

transform:translate(-50%,-50%);

width:95px;

height:95px;

border-radius:50%;

background:#efb91d;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:#202939;

z-index:100;

box-shadow:0 20px 45px rgba(0,0,0,.12);

}


/*============================*/

.testimonial-content{

background:#fff;

border-radius:18px;

padding:90px 60px 60px;

box-shadow:

0 25px 60px rgba(0,0,0,.08);

position:relative;

overflow:hidden;

}

.testimonial-content::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:55%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:skewX(-25deg);

transition:1s;

}

.testimonial-content:hover::before{

left:160%;

}


/*============================*/

.testimonial-slide{

display:none;

text-align:center;

animation:fadeReview .8s;

}

.testimonial-slide.active{

display:block;

}

@keyframes fadeReview{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*============================*/

.stars{

margin-bottom:20px;

}

.stars i{

color:#efb91d;

margin:0 2px;

font-size:17px;

}

.testimonial-slide p{

font-size:18px;

line-height:34px;

color:#666;

margin-bottom:25px;

}

.testimonial-slide h3{

font-size:30px;

font-weight:700;

color:#202939;

margin-bottom:6px;

}

.testimonial-slide span{

font-size:15px;

color:#efb91d;

font-weight:600;

}


/*============================*/

.testimonial-users{

display:flex;

justify-content:center;

align-items:center;

gap:22px;

margin-top:55px;

flex-wrap:wrap;

}

.user-img{

width:72px;

height:72px;

border-radius:50%;

overflow:hidden;

cursor:pointer;

transition:.45s;

opacity:.55;

border:4px solid transparent;

}

.user-img img{

width:100%;

height:100%;

object-fit:cover;

display:block;

transition:.45s;

}

.user-img:hover{

transform:translateY(-8px);

opacity:1;

}

.user-img.active{

width:95px;

height:95px;

opacity:1;

border-color:#efb91d;

box-shadow:0 20px 40px rgba(0,0,0,.12);

}
/*=========================================
        TESTIMONIAL PREMIUM EFFECT
=========================================*/

.testimonial-content{

    position:relative;

    overflow:hidden;

}

/*==========================
     SMOOTH SLIDES
==========================*/

.testimonial-slide{

    position:absolute;

    left:0;
    top:90px;

    width:100%;

    padding:0 55px;

    opacity:0;

    visibility:hidden;

    transform:
    translateY(35px)
    scale(.96);

    transition:

    opacity .7s ease,

    transform .7s ease,

    visibility .7s;

}

.testimonial-slide.active{

    opacity:1;

    visibility:visible;

    transform:

    translateY(0)

    scale(1);

    position:relative;

}


/*==========================
      QUOTE FLOAT
==========================*/

.quote-circle{

animation:quoteFloat 3.5s ease-in-out infinite;

}

@keyframes quoteFloat{

0%{

transform:translate(-50%,-50%) translateY(0);

}

50%{

transform:translate(-50%,-50%) translateY(-8px);

}

100%{

transform:translate(-50%,-50%) translateY(0);

}

}


/*==========================
     AVATAR
==========================*/

.user-img{

position:relative;

transition:.45s;

}

.user-img::before{

content:"";

position:absolute;

inset:-6px;

border-radius:50%;

border:2px solid transparent;

transition:.45s;

}

.user-img.active{

transform:scale(1.35);

z-index:10;

}

.user-img.active::before{

border-color:#efb91d;

animation:userPulse 2s infinite;

}

@keyframes userPulse{

0%{

transform:scale(1);

opacity:1;

}

100%{

transform:scale(1.25);

opacity:0;

}

}

.user-img:hover{

transform:translateY(-8px) scale(1.12);

}


/*==========================
      FLOAT IMAGE
==========================*/

.user-img img{

animation:avatarFloat 4s ease-in-out infinite;

}

@keyframes avatarFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

100%{

transform:translateY(0);

}

}


/*==========================
      GLASS SHADOW
==========================*/

.testimonial-content{

backdrop-filter:blur(10px);

}

.testimonial-content:hover{

box-shadow:

0 30px 70px rgba(0,0,0,.12);

}


/*==========================
     TEXT
==========================*/

.testimonial-slide h3{

transition:.35s;

}

.testimonial-slide.active h3{

letter-spacing:.5px;

}

.testimonial-slide p{

transition:.35s;

}


/*==========================
     SCROLL REVEAL
==========================*/

.testimonial-hidden{

opacity:0;

transform:translateY(60px);

transition:.8s;

}

.testimonial-show{

opacity:1;

transform:translateY(0);

}


/*==========================
      RESPONSIVE
==========================*/

@media(max-width:991px){

.testimonial-content{

padding:85px 35px 45px;

}

.testimonial-slide{

padding:0 20px;

}

}

@media(max-width:767px){

.publisher-testimonial{

padding:70px 0;

}

.testimonial-heading h2{font-size: 18px !important;line-height: 28px !important;}

.testimonial-heading p{

font-size:14px;

line-height:26px;

}

.quote-circle{

width:75px;

height:75px;

font-size:26px;

}

.testimonial-content{

padding:70px 20px 35px;

}

.testimonial-slide{

top:70px;

padding:0;

}

.testimonial-slide p{

font-size:15px;

line-height:28px;

}

.testimonial-slide h3{

font-size:22px;

}

.user-img{

width:55px;
height:55px;

}

.user-img.active{

width:75px;
height:75px;

}

.testimonial-users{

gap:12px;

}

}

/*=====================================
        TESTIMONIAL PREMIUM EFFECTS
======================================*/

/* Review Wrapper */

.testimonial-wrapper{
    position:relative;
    overflow:visible;
}

/*==============================
        REVIEW ANIMATION
==============================*/

.testimonial-slide{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    opacity:0;

    visibility:hidden;

    transform:
    translateY(30px)
    scale(.96);

    transition:
    opacity .7s ease,
    transform .7s ease,
    visibility .7s;

}

.testimonial-slide.active{

    position:relative;

    opacity:1;

    visibility:visible;

    transform:
    translateY(0)
    scale(1);

}

/*==============================
       QUOTE ICON
==============================*/

.quote-circle{

animation:quoteFloat 4s ease-in-out infinite;

z-index:999;

}

@keyframes quoteFloat{

0%{

transform:
translate(-50%,-50%)
translateY(0);

}

50%{

transform:
translate(-50%,-50%)
translateY(-8px);

}

100%{

transform:
translate(-50%,-50%)
translateY(0);

}

}

/*==============================
      ACTIVE IMAGE
==============================*/

.user-img{

position:relative;

transition:.45s;

}

.user-img::after{

content:"";

position:absolute;

inset:-5px;

border-radius:50%;

border:2px solid transparent;

transition:.4s;

}

.user-img.active{

transform:scale(1.35);

opacity:1;

z-index:5;

}

.user-img.active::after{

border-color:#efb91d;

animation:pulseBorder 2s infinite;

}

@keyframes pulseBorder{

0%{

transform:scale(1);

opacity:1;

}

100%{

transform:scale(1.3);

opacity:0;

}

}


/*==============================
       FLOAT IMAGE
==============================*/

.user-img img{

animation:userFloat 4s ease-in-out infinite;

}

@keyframes userFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}

/*==============================
        GLASS EFFECT
==============================*/

.testimonial-content{

backdrop-filter:blur(8px);

}

.testimonial-content:hover{

box-shadow:

0 30px 70px rgba(0,0,0,.12);

}

/*==============================
        SHINE EFFECT
==============================*/

.testimonial-content::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:skewX(-25deg);

transition:1s;

}

.testimonial-content:hover::after{

left:170%;

}

/*==============================
       SCROLL EFFECT
==============================*/

.testimonial-hidden{

opacity:0;

transform:translateY(70px);

transition:.8s;

}

.testimonial-show{

opacity:1;

transform:translateY(0);

}

/*==============================
      MOBILE
==============================*/

@media(max-width:991px){

.testimonial-content{

padding:80px 30px 40px;

}

}

@media(max-width:767px){

.publisher-testimonial{padding: 24px 0 115px;}

.testimonial-heading h2{font-size: 25px;line-height:40px;}

.testimonial-heading p{

font-size:14px;

line-height:26px;

}

.quote-circle{width:70px;height:70px;font-size:26px;top: -7px;}

.testimonial-content{padding: 43px 20px 35px;}

.testimonial-slide{

padding:0;

}

.testimonial-slide p{font-size: 13px;line-height: 24px;}

.testimonial-slide h3{

font-size:22px;

}

.user-img{

width:55px;
height:55px;

}

.user-img.active{

width:78px;
height:78px;

}

.testimonial-users{

gap:12px;

}

}


/*==========================================
        CTA + FOOTER SECTION
==========================================*/

.publisher-footer{
    background:#1f2738;
    padding-top:170px;
    position:relative;
    overflow:hidden;
}

/*==========================================
        CTA BOX
==========================================*/

.publisher-cta{

    position:relative;

    background:linear-gradient(135deg,#efb91d,#d89b17);

    padding:60px;

    margin-top:-90px;

    z-index:10;

    box-shadow:0 30px 60px rgba(0,0,0,.18);

}

.publisher-cta::before{

content:"";

position:absolute;

right:-12px;

top:12px;

width:100%;

height:100%;

background:#d89b17;

z-index:-1;

}

.publisher-cta::after{

content:"";

position:absolute;

right:-24px;

top:24px;

width:100%;

height:100%;

background:#efb91d;

z-index:-2;

}

/*==========================================
        CTA CONTENT
==========================================*/

.cta-content h2{

font-size:52px;

font-weight:800;

line-height:1.2;

color:#111;

margin:0;

}

.flip-text{

display:inline-block;

position:relative;

height:60px;

overflow:hidden;

background:#fff;

padding:0 18px;

border-radius:40px;

vertical-align:middle;

}

.flip-text span{

display:block;

height:60px;

line-height:60px;

font-weight:800;

color:#202939;

}

/*==========================================
        BUTTONS
==========================================*/

.cta-buttons{

display:flex;

justify-content:flex-end;

align-items:center;

gap:15px;

flex-wrap:wrap;

}

.cta-chat{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

background:#111;

color:#fff;

font-weight:700;

text-decoration:none;

transition:.4s;

}

.cta-call{

display:inline-flex;

align-items:center;

gap:10px;

padding:16px 28px;

background:transparent;

border:2px solid #202939;

color:#202939;

font-weight:700;

text-decoration:none;

transition:.4s;

}

.cta-call i{

width:38px;

height:38px;

border-radius:50%;

background:#202939;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

}

.cta-chat:hover{

background:#202939;

color:#fff;

transform:translateY(-5px);

}

.cta-call:hover{

background:#202939;

color:#fff;

transform:translateY(-5px);

}

.cta-call:hover i{

background:#fff;

color:#202939;

}

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

.main-footer{

padding:90px 0 0;

color:#fff;

}

.footer-logo img{

max-width:210px;

margin-bottom:20px;

}

.footer-logo p{

color:#b9bec8;

line-height:30px;

font-size:15px;

margin-bottom:25px;

}

/*==========================================
        SOCIAL
==========================================*/

.footer-social{

display:flex;

gap:12px;

}

.footer-social a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

background:#2c3548;

color:#efb91d;

text-decoration:none;

transition:.4s;

}

.footer-social a:hover{

background:#efb91d;

color:#202939;

transform:translateY(-6px);

}

/*==========================================
        LINKS
==========================================*/

.footer-links h4,
.footer-news h4{

color:#efb91d;

font-size:22px;

margin-bottom:30px;

font-weight:700;

}

.footer-links ul{

margin:0;
padding:0;
list-style:none;

}

.footer-links ul li{

margin-bottom:14px;

}

.footer-links ul li a{

color:#c8ccd3;

text-decoration:none;

transition:.35s;

position:relative;

padding-left:18px;

}

.footer-links ul li a::before{

content:">";

position:absolute;

left:0;

color:#efb91d;

}

.footer-links ul li a:hover{

color:#fff;

padding-left:25px;

}

/*==========================================
        NEWSLETTER
==========================================*/

.footer-news p{

color:#b8bec8;

line-height:28px;

margin-bottom:20px;

}

.footer-news form{

display:flex;

margin-bottom:18px;

}

.footer-news input{

flex:1;

height:50px;

padding:0 15px;

border:none;

outline:none;

background:#2c3548;

color:#fff;

}

.footer-news button{

padding:0 22px;

background:#efb91d;

border:none;

font-weight:700;

cursor:pointer;

transition:.4s;

}

.footer-news button:hover{

background:#fff;

}

.footer-news label{

color:#aeb4bf;

font-size:14px;

display:flex;

align-items:center;

gap:8px;

}

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

.footer-bottom{

margin-top:60px;

padding:25px 0;

border-top:1px solid rgba(255,255,255,.08);

}

.footer-bottom p{

margin:0;

color:#c4c8cf;

}

.payment-icons{

display:flex;

justify-content:flex-end;

gap:12px;

flex-wrap:wrap;

}

.payment-icons img{

height:28px;

transition:.35s;

}

.payment-icons img:hover{

transform:translateY(-4px);

}
/*==========================================
        CTA + FOOTER SECTION
==========================================*/

.publisher-footer{
    background:#1f2738;
    padding-top: 0;
    position:relative;
    overflow:hidden;
}

/*==========================================
        CTA BOX
==========================================*/

.publisher-cta{

position:relative;

background:linear-gradient(135deg,#efb91d,#d89b17);

padding:60px;

margin-bottom: -30px;

z-index:10;

box-shadow:0 30px 60px rgba(0,0,0,.18);
}

.publisher-cta::before{

content:"";

position:absolute;

right:-12px;

top:12px;

width:100%;

height:100%;

background:#d89b17;

z-index:-1;

}

.publisher-cta::after{

content:"";

position:absolute;

right:-24px;

top:24px;

width:100%;

height:100%;

background:#efb91d;

z-index:-2;

}

/*==========================================
        CTA CONTENT
==========================================*/

.cta-content h2{

font-size: 36px;

font-weight:800;

line-height:1.2;

color:#111;

margin:0;
}

.flip-text{

display:inline-block;

position:relative;

height:60px;

overflow:hidden;

background:#fff;

padding:0 18px;

border-radius:40px;

vertical-align:middle;

}

.flip-text span{

display:block;

height:60px;

line-height:60px;

font-weight:800;

color:#202939;

}

/*==========================================
        BUTTONS
==========================================*/

.cta-buttons{

display:flex;

justify-content:flex-end;

align-items:center;

gap:15px;

flex-wrap:wrap;

}

.cta-chat{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

background:#111;

color:#fff;

font-weight:700;

text-decoration:none;

transition:.4s;

}

.cta-call{

display:inline-flex;

align-items:center;

gap:10px;

padding:16px 28px;

background:transparent;

border:2px solid #202939;

color:#202939;

font-weight:700;

text-decoration:none;

transition:.4s;

}

.cta-call i{

width:38px;

height:38px;

border-radius:50%;

background:#202939;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

}

.cta-chat:hover{

background:#202939;

color:#fff;

transform:translateY(-5px);

}

.cta-call:hover{

background:#202939;

color:#fff;

transform:translateY(-5px);

}

.cta-call:hover i{

background:#fff;

color:#202939;

}

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

.main-footer{

padding:90px 0 0;

color:#fff;

}

.footer-logo img{

max-width:210px;

margin-bottom:20px;

}

.footer-logo p{

color:#b9bec8;

line-height:30px;

font-size:15px;

margin-bottom:25px;

}

/*==========================================
        SOCIAL
==========================================*/

.footer-social{

display:flex;

gap:12px;

}

.footer-social a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

background:#2c3548;

color:#efb91d;

text-decoration:none;

transition:.4s;

}

.footer-social a:hover{

background:#efb91d;

color:#202939;

transform:translateY(-6px);

}

/*==========================================
        LINKS
==========================================*/

.footer-links h4,
.footer-news h4{

color:#efb91d;

font-size:22px;

margin-bottom:30px;

font-weight:700;

}

.footer-links ul{

margin:0;
padding:0;
list-style:none;

}

.footer-links ul li{

margin-bottom:14px;

}

.footer-links ul li a{

color:#c8ccd3;

text-decoration:none;

transition:.35s;

position:relative;

padding-left:18px;

}

.footer-links ul li a::before{

content:">";

position:absolute;

left:0;

color:#efb91d;

}

.footer-links ul li a:hover{

color:#fff;

padding-left:25px;

}

/*==========================================
        NEWSLETTER
==========================================*/

.footer-news p{

color:#b8bec8;

line-height:28px;

margin-bottom:20px;

}

.footer-news form{

display:flex;

margin-bottom:18px;

}

.footer-form input{

flex:1;

height: 50px;

padding:0 15px;

border:none;

outline:none;

background:#2c3548;

color:#fff;
}

.snd input{

flex:1;

height: 20px;

padding:0 15px;

border:none;

outline:none;

background:#2c3548;

color:#fff;
}

.footer-news button{

padding:0 22px;

background:#efb91d;

border:none;

font-weight:700;

cursor:pointer;

transition:.4s;

}

.footer-news button:hover{

background:#fff;

}

.footer-news label{

color:#aeb4bf;

font-size:14px;

display:flex;

align-items:center;

gap:8px;

}

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

.footer-bottom{

margin-top:60px;

padding:25px 0;

border-top:1px solid rgba(255,255,255,.08);

}

.footer-bottom p{

margin:0;

color:#c4c8cf;

}

.payment-icons{

display:flex;

justify-content:flex-end;

gap:12px;

flex-wrap:wrap;

}

.payment-icons img{

height:28px;

transition:.35s;

}

.payment-icons img:hover{

transform:translateY(-4px);

}

.hero-book-sec a.btn-call {
    color: #fff;
}

/*==========================================
        INNER BANNER
==========================================*/

.inner-banner{

position:relative;

padding:140px 0 110px;

background:url("../images/bg-1.png") center center/cover no-repeat;

overflow:hidden;

z-index: 0;
}

/*==========================================
        DARK OVERLAY
==========================================*/

.banner-overlay{

position:absolute;

inset:0;

background:rgba(18,24,38,.78);

z-index:1;
}

/*==========================================
        CONTENT
==========================================*/

.inner-banner-content{

    position:relative;

    z-index:5;

}

/*==========================================
        SUBTITLE
==========================================*/

.banner-subtitle{

    display:inline-block;

    font-size:13px;

    font-weight:700;

    letter-spacing:1.5px;

    color:#efb91d;

    text-transform:uppercase;

    margin-bottom:18px;

}

/*==========================================
        HEADING
==========================================*/

.inner-banner-content h1{

font-size: 40px;

font-weight:800;

color:#fff;

line-height:1.15;

text-transform:uppercase;

margin-bottom:28px;
}

.inner-banner-content h1 span{

    color:#efb91d;

}

/*==========================================
        PARAGRAPH
==========================================*/

.inner-banner-content p{

    max-width:920px;

    margin:auto;

    color:#d5d7dd;

    font-size:17px;

    line-height:32px;

}

/*==========================================
        ZOOM BACKGROUND
==========================================*/

.inner-banner{

animation:bgZoom 18s linear infinite alternate;

}

@keyframes bgZoom{

0%{

background-size:100%;

}

100%{

background-size:108%;

}

}

/*==========================================
        LIGHT EFFECT
==========================================*/

.inner-banner::before{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:rgba(239,185,29,.08);

top:-220px;

left:-220px;

filter:blur(20px);

z-index:2;

}

.inner-banner::after{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:rgba(255,255,255,.03);

bottom:-180px;

right:-180px;

filter:blur(15px);

z-index:2;

}

/*==========================================
        RESPONSIVE
==========================================*/

@media(max-width:1199px){

.inner-banner-content h1{

font-size:50px;

}

}

@media(max-width:991px){

.inner-banner{

padding:120px 0 90px;

}

.inner-banner-content h1{

font-size:42px;

}

.inner-banner-content p{

font-size:16px;

line-height:30px;

}

}

@media(max-width:767px){

.inner-banner{

background-repeat: no-repeat;

padding: 113px 0 27px;

background: transparent;
}

.banner-subtitle{font-size: 13px;margin-bottom: 4px;}

.inner-banner-content h1{

font-size:30px;

line-height:1.3;

}

.inner-banner-content p{

font-size:15px;

line-height:28px;

}

}

/*==========================================
      PREMIUM TEXT REVEAL
==========================================*/

.banner-subtitle,
.inner-banner-content h1,
.inner-banner-content p{

    opacity:0;

    transform:translateY(40px);

    animation-fill-mode:forwards;

}

.banner-subtitle{

    animation:fadeUp .8s ease .2s forwards;

}

.inner-banner-content h1{

    animation:fadeUp .8s ease .5s forwards;

}

.inner-banner-content p{

    animation:fadeUp .8s ease .8s forwards;

}

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(40px);

}

100%{

opacity:1;
transform:translateY(0);

}

}


/*==========================================
        HEADING SHINE
==========================================*/

.inner-banner-content h1 span{

    position:relative;

    display:inline-block;

    background:linear-gradient(
    90deg,
    #efb91d,
    #ffd965,
    #efb91d);

    background-size:250%;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:textShine 4s linear infinite;

}

@keyframes textShine{

0%{

background-position:0%;

}

100%{

background-position:250%;

}

}


/*==========================================
       GLASS GLOW
==========================================*/

.inner-banner::before{

animation:floatGlow 8s ease-in-out infinite;

}

.inner-banner::after{

animation:floatGlow2 10s ease-in-out infinite;

}

@keyframes floatGlow{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-25px);

}

100%{

transform:translateY(0);

}

}

@keyframes floatGlow2{

0%{

transform:translateY(0);

}

50%{

transform:translateY(20px);

}

100%{

transform:translateY(0);

}

}


/*==========================================
      PARAGRAPH FADE
==========================================*/

.inner-banner-content p{

transition:.4s;

}

.inner-banner:hover p{

color:#ffffff;

}


/*==========================================
       TEXT SHADOW
==========================================*/

.inner-banner-content h1{

text-shadow:

0 5px 18px rgba(0,0,0,.25);

}


/*==========================================
      PARTICLES
==========================================*/

.inner-banner .particle{

position:absolute;

width:6px;

height:6px;

border-radius:50%;

background:#efb91d;

opacity:.35;

animation:particleMove 14s linear infinite;

}

@keyframes particleMove{

0%{

transform:translateY(0);

opacity:0;

}

25%{

opacity:.4;

}

100%{

transform:translateY(-500px);

opacity:0;

}

}


/*==========================================
      SCROLL REVEAL
==========================================*/

.banner-hidden{

opacity:0;

transform:translateY(60px);

transition:.8s;

}

.banner-show{

opacity:1;

transform:translateY(0);

}


/*==========================================
      RESPONSIVE FIX
==========================================*/

@media(max-width:767px){

.inner-banner-content h1{font-size: 14px;margin-bottom: 8px;}

.inner-banner-content p{

padding: 0 0px;

font-size: 14px;

line-height: 23px;
}

}



/*==================================================
            CONTACT SECTION
==================================================*/

.contact-sec{
    position:relative;
    padding:110px 0;
    background:#f8f8f8;
    overflow:hidden;
}

/* Floating Shape */

.contact-shape{
    position:absolute;
    left:-90px;
    top:170px;
    width:240px;
    z-index:2;
    animation:floatShape 6s ease-in-out infinite;
}

@keyframes floatShape{

0%,100%{
transform:translateY(0px);
}

50%{
transform:translateY(-20px);
}

}

/* Heading */

.contact-subtitle{

    display:block;

    color:#d6a625;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:10px;

}

.contact-title{

    font-size:52px;

    font-weight:800;

    color:#222;

    margin-bottom:18px;

}

.contact-desc{

    max-width:760px;

    margin:auto;

    color:#777;

    line-height:30px;

}

/*==================================
        LEFT
==================================*/

.contact-left{

position:relative;

/* min-height:720px; */
}

.contact-bg{

position:absolute;

inset:0;

background: url('../images/contact-bg.png') center center/cover;

border-radius: 0;

top: 390px;

height: 771px;

width: 696px;
}

.contact-bg::before{

content:'';

position:absolute;

/* inset:0; */

background:rgba(25,30,45,.82);

/* width: 400px; */

/* height: 400px; */

/* bottom: 18px; */
}

/*==================================
        FORM BOX
==================================*/

.contact-form-box{

position:absolute;

left:40px;

top:50%;

transform:translateY(-50%);

width: 100%;

background:#d7a620;

padding:40px;

border-radius:8px;

z-index:5;

transition:.45s;
}

.contact-form-box:hover{

    transform:translateY(-50%) scale(1.02);

    box-shadow:0 25px 70px rgba(0,0,0,.25);

}

.mini-text{

    display:block;

    color:#4a3b00;

    text-align:center;

    margin-bottom:8px;

    font-size:15px;

}

.contact-form-box h3{

    text-align:center;

    font-size:46px;

    color:#111;

    margin-bottom:28px;

    font-weight:800;

}

/*==================================
        FORM
==================================*/

.form-group{

    position:relative;

    margin-bottom:18px;

}

.form-group i{

    position:absolute;

    left:16px;

    top:18px;

    color:#fff;

    z-index:2;

}

.contact-left .form-control{

    height:54px;

    background:transparent;

    border:1px solid rgba(255,255,255,.8);

    color:#fff;

    padding-left:48px;

    border-radius:4px;

    transition:.35s;

}

.contact-left textarea.form-control{

    height:120px;

    resize:none;

    padding-top:15px;

}

.form-control::placeholder{

    color:#fff;

}

.form-control:focus{

    background:#c59618;

    border-color:#fff;

    color:#fff;

    box-shadow:none;

}

.submit-btn{

    width:100%;

    height:56px;

    border:none;

    background:#20263b;

    color:#fff;

    font-weight:700;

    border-radius:4px;

    transition:.35s;

}

.submit-btn:hover{

    background:#111;

    letter-spacing:1px;

}

/*==================================
        RIGHT
==================================*/

.contact-right{

padding-left: 120px;
}

.contact-right h2{

    font-size:52px;

    font-weight:800;

    margin-bottom:45px;

    color:#222;

}

/*==================================
        CONTACT ITEM
==================================*/

.contact-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 0;

    border-bottom:2px solid #ff8c8c;

    transition:.35s;

}

.contact-item:hover{

    padding-left:15px;

}

.contact-item .icon{

width:42px;

height:42px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color: #13389D;

font-size: 23px;

position: relative;

z-index: 0;
}

.contact-item:hover .icon{

    transform:rotate(10deg) scale(1.15);

}

.contact-item .text{

    color:#333;

    font-size:17px;

    font-weight:500;

}

/*==================================
        SOCIAL
==================================*/

.social-box{

    margin-top:45px;

}

.social-box h4{

    font-size:34px;

    font-weight:700;

    margin-bottom:25px;

}

.social-links{

    display:flex;

    gap:15px;

}

.social-links a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#1f2437;

    color:#fff;

    transition:.4s;

}

.social-links a:hover{

    background:#d7a620;

    transform:translateY(-8px);

}

/*==================================
        MAP
==================================*/

.map-box{

    margin-top:45px;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.map-box iframe{

    width:100%;

    height:250px;

    border:none;

    display:block;

}

/*==================================
        RESPONSIVE
==================================*/

@media(max-width:1199px){

.contact-form-box{

width:92%;

left:20px;

padding:35px;

}

.contact-right{

padding-left:10px;

}

}

@media(max-width:991px){

.contact-left{

min-height: 0;

margin-bottom: 0;
}

.contact-form-box{

position:relative;

left:auto;

top:auto;

transform:none;

width:90%;

margin:40px auto;

}

.contact-form-box:hover{

transform:scale(1.02);

}

.contact-right{

padding-left:0;

padding-top: 0;
}

.contact-title{

font-size:40px;

}

.contact-right h2{

font-size:40px;

}

.contact-shape{

display:none;

}

}

@media(max-width:767px){

.contact-sec{

padding: 30px 0;
}

.contact-title{font-size: 22px;}

.contact-right h2{

font-size:30px;

margin-bottom: 0px;
}

.contact-form-box{

padding:25px;

width:100%;

margin-top: 0;
}

.contact-form-box h3{

font-size:34px;

}

.social-links{

flex-wrap:wrap;

}

.form-control{

font-size:14px;

}

}


/*=========================================
            FAQ SECTION
=========================================*/

.faq-sec{
    padding:100px 0;
    background:#f7f7f7;
    position:relative;
    overflow:hidden;
}

.faq-item{

    background:#fff;

    border-radius:14px;

    margin-bottom:28px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    transition:.45s;

    position:relative;

}

.faq-item:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

/*=============================
        ACTIVE
=============================*/

.faq-item.active{

    background:#232937;

    color:#fff;

}

.faq-item.active h5{

    color:#fff;

}

.faq-item.active p{

    color:#d8d8d8;

}

/*=============================
        HEAD
=============================*/

.faq-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 30px;

    cursor:pointer;

    user-select:none;

}

.faq-head h5{

    margin:0;

    font-size:22px;

    font-weight:700;

    color:#31314a;

    transition:.3s;

    width:85%;

    line-height:34px;

}

/*=============================
        ICON
=============================*/

.faq-icon{

    width:44px;

    height:44px;

    border-radius:10px;

    background:#f4f4fb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    color:#666;

    transition:.4s;

    flex-shrink:0;

}

.faq-item:hover .faq-icon{

    transform:rotate(90deg);

}

.faq-item.active .faq-icon{

    background:#d8ae2f;

    color:#fff;

    transform:rotate(180deg);

}

/*=============================
        BODY
=============================*/

.faq-body{

    max-height:0;

    overflow:hidden;

    transition:max-height .5s ease;

}

.faq-item.active .faq-body{

    max-height:250px;

}

.faq-body p{

    margin:0;

    padding:0 30px 30px;

    color:#666;

    font-size:15px;

    line-height:30px;

}

/*=============================
    LEFT BORDER ANIMATION
=============================*/

.faq-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:0;

    background:#d8ae2f;

    transition:.45s;

}

.faq-item:hover::before{

    height:100%;

}

.faq-item.active::before{

    height:100%;

}

/*=============================
        HOVER TITLE
=============================*/

.faq-item:hover h5{

    color:#d8ae2f;

}

.faq-item.active:hover h5{

    color:#fff;

}

/*=============================
        RESPONSIVE
=============================*/

@media(max-width:1199px){

.faq-head{

padding:24px;

}

.faq-head h5{

font-size:20px;

}

}

@media(max-width:991px){

.faq-sec{

padding: 43px 0 90px;
}

.faq-item{

margin-bottom:20px;

}

}

@media(max-width:767px){

.faq-head{

padding:22px;

}

.faq-head h5{

font-size:18px;

line-height:28px;

width:80%;

}

.faq-icon{

width:38px;

height:38px;

font-size:15px;

}

.faq-body p{

padding:0 22px 22px;

font-size:14px;

line-height:28px;

}

}

@media(max-width:480px){

.faq-head{padding: 10px 13px;}

.faq-head h5{font-size: 13px;line-height: 19px;}

}


/*=================================================
            STORY FORM BOX
=================================================*/

.story-form-box{

position:relative;

background:#d7a620;

padding: 43px 38px;

border-radius:6px;

overflow:hidden;

box-shadow:
    0 25px 80px rgba(0,0,0,.25);

transition:.45s;
}

.story-form-box:hover{

    transform:translateY(-8px);

    box-shadow:
    0 35px 100px rgba(0,0,0,.35);

}

/*=============================
        HEADING
=============================*/

.small-title{

    display:block;

    color:#3d3212;

    font-size:14px;

    letter-spacing:3px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:10px;

}

.story-heading h2{

font-size: 40px;

line-height:1;

margin-bottom: 18px;

color:#101010;

font-weight:800;

text-transform:uppercase;
}

/*=============================
        INPUT
=============================*/

.input-box{

position:relative;

margin-bottom: 24px;
}

.input-box input,
.input-box select,
.input-box textarea{

width:100%;

background:transparent;

border:none;

border-bottom:2px solid rgba(255,255,255,.65);

outline:none;

color:#fff;

font-size:16px;

padding: 10px 0;

transition:.4s;

appearance:none;
}

.textarea-box textarea{

    resize:none;

    min-height:130px;

}

/*=============================
        LABEL
=============================*/

.input-box label{

    position:absolute;

    left:0;

    top:14px;

    color:#fff;

    pointer-events:none;

    transition:.35s;

    font-size:15px;

}

.input-box input:focus~label,
.input-box input:valid~label,

.input-box textarea:focus~label,
.input-box textarea:valid~label,

.input-box select:focus~label,
.input-box select:valid~label{

    top:-12px;

    font-size:12px;

    color:#1d1d1d;

    letter-spacing:1px;

}

/*=============================
        LINE
=============================*/

.input-box span{

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:#1d1d1d;

    transition:.4s;

}

.input-box input:focus~span,
.input-box textarea:focus~span,
.input-box select:focus~span{

    width:100%;

}

/*=============================
        SELECT
=============================*/

.select-box i{

    position:absolute;

    right:5px;

    top:18px;

    color:#fff;

    pointer-events:none;

}

/*=============================
        BUTTON
=============================*/

.story-btn{

    width:100%;

    height:58px;

    border:none;

    background:#1f2437;

    color:#fff;

    font-size:16px;

    font-weight:700;

    border-radius:4px;

    cursor:pointer;

    transition:.35s;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

}

.story-btn:hover{

    background:#101010;

    letter-spacing:1px;

}

.story-btn i{

    transition:.35s;

}

.story-btn:hover i{

    transform:translateX(6px);

}

/*=============================
        BORDER
=============================*/

.border-top,
.border-right,
.border-bottom,
.border-left{

    position:absolute;

    background:#fff;

    opacity:.45;

}

.border-top{

    left:20px;

    top:20px;

    height:2px;

    width:70px;

}

.border-right{

    top:20px;

    right:20px;

    width:2px;

    height:70px;

}

.border-bottom{

    right:20px;

    bottom:20px;

    height:2px;

    width:70px;

}

.border-left{

    left:20px;

    bottom:20px;

    width:2px;

    height:70px;

}
/*=================================================
        PREMIUM ANIMATIONS
=================================================*/

/* Animated Border */

.border-top,
.border-right,
.border-bottom,
.border-left{

    transition:.6s;

}

.story-form-box:hover .border-top{

    width:calc(100% - 40px);

}

.story-form-box:hover .border-bottom{

    width:calc(100% - 40px);

}

.story-form-box:hover .border-left{

    height:calc(100% - 40px);

}

.story-form-box:hover .border-right{

    height:calc(100% - 40px);

}

/*==========================
      GOLD GLOW
==========================*/

.story-form-box::before{

    content:'';

    position:absolute;

    inset:-2px;

    background:

    linear-gradient(

    45deg,

    transparent,

    rgba(255,255,255,.18),

    transparent

    );

    opacity:0;

    transition:.5s;

    pointer-events:none;

}

.story-form-box:hover::before{

    opacity:1;

}

/*==========================
      SHINE EFFECT
==========================*/

.story-form-box::after{

    content:'';

    position:absolute;

    top:-100%;

    left:-120%;

    width:120px;

    height:220%;

    background:

    rgba(255,255,255,.15);

    transform:rotate(25deg);

}

.story-form-box:hover::after{

    animation:shine 1.2s linear;

}

@keyframes shine{

0%{

left:-150%;

}

100%{

left:140%;

}

}

/*==========================
      INPUT HOVER
==========================*/

.contact-sec .input-box{

transition:.35s;

}

.contact-sec .input-box:hover{

transform:translateX(6px);

}

.input-box input:hover,
.input-box textarea:hover,
.input-box select:hover{

border-color:#222;

}

/*==========================
      PLACEHOLDER COLOR
==========================*/

.input-box input,
.input-box textarea,
.input-box select{

font-weight:500;

}

.input-box input::placeholder,
.input-box textarea::placeholder{

color:#fff;

opacity:.8;

}

/*==========================
      BUTTON
==========================*/

.story-btn{

overflow:hidden;

position:relative;

}

.story-btn::before{

content:'';

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:

rgba(255,255,255,.12);

transform:skewX(-30deg);

transition:.5s;

}

.story-btn:hover::before{

left:130%;

}

.story-btn:hover{

transform:translateY(-4px);

box-shadow:

0 20px 35px rgba(0,0,0,.18);

}

/*==========================
      FLOATING EFFECT
==========================*/

.story-form-box{

animation:floatForm 5s ease-in-out infinite;

}

@keyframes floatForm{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

/*==========================
      INPUT FOCUS GLOW
==========================*/

.input-box input:focus,
.input-box textarea:focus,
.input-box select:focus{

border-bottom-color:#111;

box-shadow:0 12px 25px rgba(0,0,0,.08);

}

/*==========================
      SELECT ICON
==========================*/

.select-box:hover i{

transform:rotate(180deg);

transition:.35s;

}

/*==========================
      RESPONSIVE
==========================*/

@media(max-width:1199px){

.story-heading h2{

font-size:46px;

}

.story-form-box{

padding:45px 35px;

}

}

@media(max-width:991px){

.story-form-box{

padding:40px 30px;

}

.story-heading h2{

font-size:40px;

}

}

@media(max-width:767px){

.story-form-box{

padding:30px 20px;

}

.story-heading h2{

font-size:32px;

}

.small-title{

font-size:12px;

}

.story-btn{

height:54px;

font-size:15px;

}

.input-box{

margin-bottom:22px;

}

}

@media(max-width:480px){

.story-heading h2{

font-size:28px;

}

.story-form-box{padding:25px 18px;margin-top: 35px;}

.input-box input,
.input-box textarea,
.input-box select{

font-size:14px;

}

}

option {
    background: #000;
}


/*=========================================
        BOOK PROMO SECTION
=========================================*/

.book-promo-section{
    position:relative;
    padding: 120px 0 0;
    overflow:hidden;
    background:#fff;
}

/*=============================
      YELLOW BACKGROUND
=============================*/

.promo-circle{

position:absolute;

left: 0px;

top: 46%;

transform:translateY(-50%);

width: 599px;

height: 434px;

/* border-radius:50%; */

background: #FF9900;

z-index:1;

border-top-right-radius: 171px;
}

/*=============================
      CONTENT
=============================*/

.book-promo-section .container{

    position:relative;

    z-index:5;

}

/*=============================
      BOOK WRAPPER
=============================*/

.promo-book-wrapper{

    position:relative;

    height:640px;

}

/*=============================
      BIG BOOK
=============================*/

.promo-book-main{

position:absolute;

left: -67px;

bottom: 48px;

width: 100%;

z-index:3;

filter:

    drop-shadow(0 30px 45px rgba(0,0,0,.18));

transition:.5s;
}

/*=============================
      SMALL BOOK
=============================*/

.promo-book-small{

position:absolute;

left: 150px;

top: 24%;

width: 300px;

z-index:4;

filter:

    drop-shadow(0 20px 35px rgba(0,0,0,.2));

transition:.5s;
}

/*=============================
      BOOK HOVER
=============================*/

.promo-book-wrapper:hover .promo-book-main{

    transform:

    translateY(-12px)
    rotate(-2deg);

}

.promo-book-wrapper:hover .promo-book-small{

    transform:

    translateY(-15px)
    rotate(6deg);

}

/*=============================
      RIGHT CONTENT
=============================*/

.promo-content{

    padding-left:45px;

}

.promo-subtitle{

    display:inline-block;

    color:#d7a620;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.promo-content h2{

font-size: 31px;

line-height: 36px;

color:#1d2437;

font-weight:800;

margin-bottom: 18px;
}

.promo-content p{

color:#6d6d6d;

font-size:16px;

line-height: 28px;

margin-bottom:22px;
}

/*=============================
      LIST
=============================*/

.promo-list-row{

    margin-top:30px;

}

.promo-list{

    margin:0;

    padding:0;

    list-style:none;

}

.promo-list li{

    position:relative;

    padding-left:35px;

    margin-bottom:18px;

    color:#303030;

    font-size:16px;

    font-weight:600;

}

.promo-list li i{

    position:absolute;

    left:0;

    top:4px;

    color:#d7a620;

    font-size:15px;

}

/*=============================
      BUTTONS
=============================*/

.promo-btns{

    display:flex;

    gap:18px;

    margin-top:45px;

    flex-wrap:wrap;

}

.promo-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    padding:16px 34px;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

}

.primary-btn{

    background:#1f2437;

    color:#fff;

}

.secondary-btn{

    background:#d7a620;

    color:#fff;

}

.primary-btn:hover{

    color:#fff;

}

.secondary-btn:hover{

    color:#fff;

}

.promo-btn i{

    transition:.35s;

}

.promo-btn:hover i{

    transform:translateX(6px);

}
/*=========================================
        PREMIUM EFFECTS
=========================================*/

/* Floating Animation */

.promo-book-main{

    animation:bookFloat 5s ease-in-out infinite;

}

.promo-book-small{

    animation:smallBook 4s ease-in-out infinite;

}

@keyframes bookFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

@keyframes smallBook{

0%,100%{

transform:translateY(0) rotate(0);

}

50%{

transform:translateY(-12px) rotate(4deg);

}

}

/*=========================
        CIRCLE
=========================*/

.promo-circle{

animation:circleMove 10s ease-in-out infinite;

}

@keyframes circleMove{

0%,100%{

transform:translateY(-50%) scale(1);

}

50%{

transform:translateY(-50%) scale(1.05);

}

}

/*=========================
      SHINE EFFECT
=========================*/

.promo-book-wrapper{

position:relative;

overflow:visible;

}

.promo-book-wrapper::before{

content:'';

position:absolute;

top:-120px;

left:-200px;

width:160px;

height:850px;

background:

rgba(255,255,255,.25);

transform:rotate(22deg);

opacity:0;

pointer-events:none;

}

.promo-book-wrapper:hover::before{

animation:shineBook 1.4s linear;

}

@keyframes shineBook{

0%{

left:-220px;

opacity:0;

}

20%{

opacity:1;

}

100%{

left:650px;

opacity:0;

}

}

/*=========================
      CONTENT
=========================*/

.promo-content{

animation:fadeRight .8s ease;

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(50px);

}

to{

opacity:1;

transform:translateX(0);

}

}

/*=========================
      LIST
=========================*/

.promo-list li{

transition:.35s;

cursor:pointer;

}

.promo-list li:hover{

padding-left:42px;

color:#d7a620;

}

.promo-list li:hover i{

transform:rotate(360deg);

transition:.5s;

}

/*=========================
      BUTTON
=========================*/

.promo-btn{

position:relative;

overflow:hidden;

}

.promo-btn::before{

content:'';

position:absolute;

top:0;

left:-120%;

width:100%;

height:100%;

background:

rgba(255,255,255,.15);

transform:skewX(-25deg);

transition:.5s;

}

.promo-btn:hover::before{

left:120%;

}

.primary-btn:hover{

background:#101522;

transform:translateY(-5px);

box-shadow:

0 18px 40px rgba(0,0,0,.18);

}

.secondary-btn:hover{

background:#c49412;

transform:translateY(-5px);

box-shadow:

0 18px 40px rgba(215,166,32,.35);

}

/*=========================
      IMAGE HOVER
=========================*/

.promo-book-wrapper:hover .promo-book-main{

filter:

drop-shadow(0 40px 55px rgba(0,0,0,.22));

}

.promo-book-wrapper:hover .promo-book-small{

filter:

drop-shadow(0 25px 40px rgba(0,0,0,.22));

}

/*=========================
      RESPONSIVE
=========================*/

@media(max-width:1199px){

.promo-content{

padding-left:25px;

}

.promo-content h2{

font-size:46px;

}

.promo-book-main{

width:340px;

}

.promo-book-small{

width:150px;

left:220px;

}

.promo-circle{

width:520px;

height:520px;

left:-200px;

}

}

@media(max-width:991px){

.book-promo-section{

padding:90px 0;

}

.promo-circle{

display:none;

}

.promo-book-wrapper{height:auto;text-align:center;margin-bottom: 15px;}

.promo-book-main{

position:relative;

width:300px;

left:auto;

}

.promo-book-small{

position:absolute;

width:130px;

left:55%;

top:20px;

}

.promo-content{

padding-left:0;

text-align:center;

}

.promo-btns{

justify-content:center;

}

.promo-list{

text-align:left;

margin-top:20px;

}

}

@media(max-width:767px){

.book-promo-section{padding: 70px 0 0px;}

.promo-content h2{

font-size:34px;

line-height:1.2;

}

.promo-content p{

font-size:15px;

line-height:28px;

}

.promo-book-main{

width:240px;

}

.promo-book-small{

width:110px;

left:58%;

}

.promo-btn{width:100%;justify-content:center;margin-top: 10px;}

.promo-btns{

gap:15px;

}

}

@media(max-width:480px){

.promo-content h2{font-size: 20px;}

.promo-book-main{

width:210px;

}

.promo-book-small{

width:90px;

}

.promo-list li{

font-size:15px;

}

}

.site-header {
    transition: all 0.6s ease;
    background: #111;
    position: relative;
    z-index: 9999;
}

.custom-navbar {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
    min-height: 86px;
    background: #111;
}

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

.navbar-nav {
    align-items: center;
}

.navbar-nav .nav-item {
    position: relative;
}

.navbar-nav .nav-link {
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    padding: 32px 18px;
    position: relative;
    transition: .3s;
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: 22px;
    width: 0;
    height: 2px;
    background: #f5b400;
    transition: .3s;
}

.navbar-nav .nav-link:hover,
.mega-dropdown.active > .nav-link {
    color: #f5b400 !important;
}

.navbar-nav .nav-link:hover::after,
.mega-dropdown.active > .nav-link::after {
    width: calc(100% - 36px);
}

.services-toggle i {
    font-size: 12px;
    transition: .3s;
}

.mega-dropdown.active .services-toggle i {
    transform: rotate(180deg);
}

.header-btn {
    margin-left: 30px;
}

.quote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 185px;
    height: 52px;
    background: #f5b400;
    color: #111;
    border-radius: 50px;
    font-weight: 800;
    text-decoration: none;
    transition: .3s;
}

.quote-btn:hover {
    background: #fff;
    color: #111;
    text-decoration: none;
}

.navbar-toggler {
    width: 44px;
    height: 40px;
    border: 0;
    padding: 0;
}

.navbar-toggler span {
    display: block;
    width: 28px;
    height: 2px;
    background: #fff;
    margin: 6px auto;
}

/* Mega Menu Desktop */
.mega-dropdown {
    position: static;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 760px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 22px 60px rgba(0,0,0,.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(14px);
    transition: .25s;
}

.mega-dropdown:hover .mega-menu,
.mega-dropdown.active .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.mega-title {
    color: #222;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 18px;
}

.mega-item {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 64px;
    padding: 12px;
    border-radius: 8px;
    color: #222;
    text-decoration: none;
    transition: .25s;
}

.mega-item i {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: #f5b400;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mega-item span {
    color: #222;
    font-size: 15px;
    font-weight: 700;
}

.mega-item:hover {
    background: #fff6dc;
    color: #222;
    text-decoration: none;
    transform: translateX(4px);
}

/* Sticky */
.site-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
 width:100%;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    transition: all 0.6s ease;
}

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

    .custom-navbar {
        min-height: 70px;
        padding: 12px 15px;
    }

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

    .navbar-collapse {
        background: #171717;
        padding: 12px;
        border-radius: 12px;
        margin-top: 12px;
    }

    .navbar-nav {
        align-items: stretch;
        width: 100%;
    }

    .navbar-nav .nav-link {
        padding: 14px 4px !important;
        border-bottom: 1px solid rgba(255,255,255,.08);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .navbar-nav .nav-link::after {
        display: none;
    }

    .mega-dropdown {
        position: relative;
    }

    .mega-menu {
        position: static;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        border-radius: 10px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: .3s;
    }

    .mega-dropdown:hover .mega-menu {
        max-height: 0;
        padding: 0;
        margin: 0;
        transform: none;
    }

    .mega-dropdown.active .mega-menu {
        max-height: 750px;
        padding: 14px;
        margin: 10px 0 4px;
    }

    .mega-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .mega-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .mega-item {
        min-height: 54px;
        padding: 9px 6px;
    }

    .mega-item i {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 13px;
    }

    .mega-item span {
        font-size: 14px;
    }

    .mega-item:hover {
        transform: none;
    }

    .header-btn {
        margin: 14px 0 0;
        width: 100%;
    }

    .quote-btn {
        width: 100%;
        height: 48px;
    }
}

.spacinghome{
    padding-top: 0px;
}


.trusted-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 13, 28, .82);
    backdrop-filter: blur(5px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
}

.trusted-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.trusted-modal {
    width: 100%;
    max-width: 920px;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
    transform: translateY(30px) scale(.96);
    transition: .3s ease;
}

.trusted-modal-overlay.active .trusted-modal {
    /* transform: translateY(0) scale(1); */
}

.trusted-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f5b400;
    color: #111;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: .3s;
}

.trusted-modal-close:hover {
    background: #111;
    color: #fff;
}

.trusted-modal-left {
    background:
        linear-gradient(rgba(9,18,35,.88), rgba(9,18,35,.88)),
        url("../images/modal-book.png");
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 55px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ml9 {
    line-height: 37px;
    padding-bottom: 0;
}
.paddng{
    padding-bottom: 40px;
}

.faq-heading {
    max-width: 720px;
    margin: 0 auto 35px;
    text-align: center;
}

.faq-heading span {
    display: inline-block;
    color: #f5b400;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.faq-heading h2 {
    color: #111827;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 900;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.faq-heading p {
    color: #666;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767px) {
    .faq-heading {
        margin-bottom: 25px;
        padding: 0 15px;
    }

    .faq-heading span {
        font-size: 12px;
    }

    .faq-heading h2 {
        font-size: 18px;
    }

    .faq-heading p {
        font-size: 14px;
    }
}
.trusted-form select {
    background: #f8f8f8 !important;
    color: #111 !important;
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

.trusted-form select option {
    background: #fff !important;
    color: #111 !important;
}

.trusted-form select option:checked {
    background: #f5b400 !important;
    color: #111 !important;
}
.trusted-badge {
    display: inline-flex;
    width: fit-content;
    background: #f5b400;
    color: #111;
    padding: 8px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.trusted-modal-left h2 {
    font-size: 34px;
    line-height: 1.15;
    font-weight: 900;
    margin: 0 0 15px;
    text-transform: uppercase;
}

.trusted-modal-left p {
    color: rgba(255,255,255,.82);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.trusted-points {
    display: grid;
    gap: 12px;
}

.trusted-points div {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
}

.trusted-points i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f5b400;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.trusted-modal-right {
    padding: 48px 36px;
    background: #fff;
}

.trusted-modal-right h3 {
    color: #111;
    font-size: 26px;
    font-weight: 900;
    margin: 0 0 20px;
    text-transform: uppercase;
}

.trusted-form {
    display: grid;
    gap: 12px;
}

.trusted-form input,
.trusted-form select,
.trusted-form textarea {
    width: 100%;
    height: 48px;
    border: 1px solid #e4e4e4;
    background: #f8f8f8;
    border-radius: 6px;
    padding: 0 14px;
    color: #111;
    font-size: 14px;
    outline: none;
}

.trusted-form textarea {
    height: 92px;
    padding-top: 13px;
    resize: none;
}

.trusted-form input:focus,
.trusted-form select:focus,
.trusted-form textarea:focus {
    border-color: #f5b400;
    background: #fff;
}

.trusted-form button {
    height: 52px;
    border: 0;
    border-radius: 6px;
    background: #f5b400;
    color: #111;
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    transition: .3s;
}

.trusted-form button:hover {
    background: #111;
    color: #fff;
}

.trusted-note {
    margin: 14px 0 0;
    color: #666;
    font-size: 13px;
    text-align: center;
}

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

    .trusted-modal-overlay {
        align-items: flex-start;
        overflow-y: auto;
        padding: 16px;
    }

    .trusted-modal {
        grid-template-columns: 1fr;
        max-width: 420px;
        border-radius: 14px;
    }

    .trusted-modal-left {
        padding: 38px 22px 28px;
    }

    .trusted-modal-left h2 {
        font-size: 25px;
    }

    .trusted-modal-left p {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .trusted-modal-right {
        padding: 28px 20px;
    }

    .trusted-modal-right h3 {
        font-size: 22px;
    }

    .trusted-modal-close {
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        font-size: 24px;
    }
}

.service-card.active p {
    color: #fff;
}

.security-alert {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999999;
    width: 300px;
    background: #111827;
    color: #fff;
    border-left: 5px solid #f5b400;
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
    animation: securityPop .25s ease;
}

.security-alert strong {
    display: block;
    color: #f5b400;
    font-size: 15px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.security-alert span {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,.85);
}

@keyframes securityPop {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media(max-width: 575px) {
    .security-alert {
        left: 15px;
        right: 15px;
        bottom: 15px;
        width: auto;
    }
}

.trust-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(5, 13, 28, .86);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    transition: .35s ease;
}

.trust-intro-overlay.active {
    opacity: 1;
    visibility: visible;
}

.trust-intro-box {
    width: 100%;
    max-width: 430px;
    background: #fff;
    border-radius: 18px;
    padding: 38px 30px 30px;
    text-align: center;
    position: relative;
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
    transform: translateY(22px) scale(.96);
    transition: .35s ease;
}

.trust-intro-overlay.active .trust-intro-box {
    transform: translateY(0) scale(1);
}

.trust-intro-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f4f4f4;
    color: #111;
    font-size: 24px;
    cursor: pointer;
}

.trust-shield {
    width: 74px;
    height: 74px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #f5b400;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    box-shadow: 0 12px 28px rgba(245,180,0,.35);
}

.trust-label {
    display: inline-block;
    color: #f5b400;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.trust-intro-box h3 {
    color: #111827;
    font-size: 25px;
    font-weight: 900;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.trust-intro-box p {
    color: #666;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 20px;
}

.trust-checks {
    display: grid;
    gap: 10px;
    margin-bottom: 24px;
    text-align: left;
}

.trust-checks div {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f8f8;
    border-radius: 8px;
    padding: 11px 13px;
    color: #222;
    font-size: 14px;
    font-weight: 700;
}

.trust-checks i {
    color: #f5b400;
}

.trust-continue {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 8px;
    background: #f5b400;
    color: #111;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    transition: .3s;
}

.trust-continue:hover {
    background: #111827;
    color: #fff;
}

@media(max-width: 575px) {
    .trust-intro-box {
        padding: 34px 20px 24px;
        border-radius: 14px;
    }

    .trust-shield {
        width: 64px;
        height: 64px;
        font-size: 28px;
    }

    .trust-intro-box h3 {
        font-size: 21px;
    }
}

.text a {
    color: #fff;
}


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

.privacy-hero{
    position: relative;
    padding:120px 0 90px;
    background:url('../images/banner-bg.webp') center center/cover no-repeat;
    overflow:hidden;
}

.privacy-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(20,27,45,.82);
}

.privacy-hero .container{
    position:relative;
    z-index:2;
}

.privacy-hero-content .hero-subtitle{
    display:inline-block;
    color:#f4b400;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.privacy-hero-content h1{
    color:#fff;
    font-size:60px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:20px;
    text-transform:uppercase;
}

.privacy-hero-content h1 span{
    color:#f4b400;
}

.privacy-hero-content p{
    color:#ddd;
    font-size:16px;
    line-height:30px;
    margin-bottom:35px;
}

.hero-btns{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.hero-btn{
    padding:15px 34px;
    font-weight:700;
    text-decoration:none;
    transition:.4s;
}

.primary-btn{
    background:#f4b400;
    color:#111;
}

.primary-btn:hover{
    color:#fff;
    background:#d99f00;
}

.secondary-btn{
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
}

.secondary-btn:hover{
    background:#fff;
    color:#111;
}

.privacy-hero-img{
    text-align:center;
}

.privacy-hero-img img{
    max-width:100%;
}

/*==========================================
CONTENT
==========================================*/

.privacy-content-sec{
    padding:90px 0 140px;
    background:#f7f7f7;
}

.privacy-card{
    background:#fff;
    padding:40px;
    border-radius:12px;
    margin-bottom:35px;
    box-shadow:0 12px 40px rgba(0,0,0,.08);
}

.section-tag{
    display:inline-block;
    color:#f4b400;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:15px;
}

.privacy-card h2{
    font-size:38px;
    font-weight:800;
    margin-bottom:20px;
    color:#1b2740;
}

.privacy-card h3{
    font-size:28px;
    font-weight:700;
    color:#1b2740;
    margin-bottom:18px;
}

.privacy-card p{
    color:#666;
    line-height:30px;
    margin-bottom:20px;
}

.privacy-list{
    padding-left:22px;
    margin:0;
}

.privacy-list li{
    color:#555;
    margin-bottom:15px;
    line-height:30px;
}

/*==========================================
SIDEBAR
==========================================*/

.privacy-sidebar{
    position:sticky;
    top:120px;
    /* display: none; */
}

.sidebar-box{
    background:#1b2740;
    border-radius:12px;
    padding:35px;
    margin-bottom:30px;
    display: none;
}

.sidebar-box h4{
    color:#fff;
    font-size:26px;
    margin-bottom:20px;
}

.sidebar-box ul{
    list-style:none;
    padding:0;
    margin:0;
}

.sidebar-box li{
    margin-bottom:12px;
}

.sidebar-box a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.sidebar-box a:hover{
    color:#f4b400;
    padding-left:6px;
}

.sidebar-cta{
    background:#f4b400;
    border-radius:12px;
    padding:35px;
}

.sidebar-cta h3{
    color:#111;
    font-size:28px;
    margin-bottom:15px;
}

.sidebar-cta p{
    color:#222;
    line-height:28px;
}

.sidebar-btn{
    display:inline-block;
    margin-top:15px;
    background:#1b2740;
    color:#fff;
    padding:14px 30px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.sidebar-btn:hover{
    background:#000;
    color:#fff;
}

/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:991px){

    .privacy-hero{
        padding:90px 0 70px;
        text-align:center;
    }

    .privacy-hero-content h1{
        font-size:44px;
    }

    .privacy-hero-img{
        margin-top:50px;
    }

    .privacy-sidebar{
        position:relative;
        top:0;
        margin-top:40px;
    }

    .hero-btns{
        justify-content:center;
    }

}

@media(max-width:767px){

    .privacy-content-sec{
        padding:60px 0;
    }

    .privacy-card{
        padding:28px;
    }

    .privacy-card h2{
        font-size:30px;
    }

    .privacy-card h3{
        font-size:24px;
    }

    .privacy-hero-content h1{
        font-size:34px;
    }

    .hero-btn{
        width:100%;
        text-align:center;
    }

    .sidebar-box,
    .sidebar-cta{
        padding:25px;
    }

}

@media(max-width:575px){

    .privacy-card{
        padding:22px;
    }

    .privacy-card h2{
        font-size:26px;
    }

    .privacy-card h3{
        font-size:22px;
    }

    .privacy-hero-content p,
    .privacy-card p,
    .privacy-list li{
        line-height:28px;
    }

}


.book-cover-art {
    margin-top: 25px;
    --aspect-ratio: 1 / 1.6;
    /* background: linear-gradient(135deg, #103044, #cd7915, #B8860B); */
    padding: 50px 0px;
}

.book-cover-art .covers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-flow: dense;
    grid-gap: 1rem
}

@media(min-width: 900px) {
    .book-cover-art .covers-grid {
        grid-gap:2rem
    }
}

.book-cover-art .covers-grid .cell.col-span-2 {
    grid-column: span 2
}

.book-cover-art .covers-grid .cell.large {
    grid-column: span 2;
    grid-row: span 2;
    --aspect-ratio: 1 / 1.565
}

.book-cover-art .covers-grid .cell.square {
    grid-column: span 2;
    --aspect-ratio: 1 / .735
}

.book-cover-art .covers-grid .info {
    display: none;
    position: absolute
}

.book-cover-art .freelancer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr)
}

.book-cover-art .cover-modal .modal-panel {
    display: grid;
    grid-template-columns: 1fr
}

@media(min-width: 900px) {
    .book-cover-art .cover-modal .modal-panel {
        grid-template-columns:1fr 1fr
    }
}

.book-cover-art .cover-modal .modal-body {
    display: block
}

.book-cover-art .cover-modal .modal-content {
    max-width: 100%
}

@media(min-width: 600px) {
    .book-cover-art .cover-modal .modal-content {
        max-width:80vw
    }
}

@media(min-width: 900px) {
    .book-cover-art .cover-modal .modal-content {
        max-width:80vw
    }
}

@media(min-width: 1024px) {
    .book-cover-art .cover-modal .modal-content {
        max-width:56rem
    }
}

.book-cover-art .cover-modal .modal-image {
    text-align: center;
    background-color: var(--bgColor-muted);
    padding: 1rem;
    height: 100%;
    max-height: 50vh;
    max-width: 100%
}

@media(min-width: 900px) {
    .book-cover-art .cover-modal .modal-image {
        max-height:80vh
    }
}

.book-cover-art .cover-modal .modal-image img {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    position: relative
}

.book-cover-art .book-item {
    position: relative;
    text-align: center;
    aspect-ratio: var(--aspect-ratio);
    cursor: pointer;
    border-radius: .375rem;
    background-color: var(--bgColor-muted);
    transform: translateZ(0);
    margin-bottom: 25px;
}

.book-cover-art .book-item:hover .book-cover {
      transform: perspective(2000px) rotate3d(0, 1, 0, -30deg);
      -webkit-transform: perspective(2000px) rotate3d(0, 1, 0, -31deg);
}

.book-cover-art .book-item:hover .book-cover .effect {
    width: 20%
}

.book-cover-art .book-item:hover .book-cover .light {
    opacity: 1;
    width: 70%;
}

.book-cover-art .book-item:hover .book-cover .designer {
    opacity: 1
}

.book-cover-art .book-item .book-cover {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 99%;
    transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    background: #111;
    background-size: cover;
    border-radius: .375rem;
    border-top: .0625rem solid hsla(0,0%,100%,.2);
    border-right: .0625rem solid hsla(0,0%,100%,.2);
    overflow: hidden;
    transition: transform .5s ease-in-out
}

.book-cover-art .book-item .book-cover img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    outline: none;
    border: none
}
.book-cover-art .covers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(229px, 1fr));
    grid-auto-flow: dense;
    grid-gap: 1rem;
}
.book-cover-art .book-item .book-cover .effect {
    position: absolute;
    left: 0;
    top: 0;
    width: 10%;
    height: 100%;
    margin-left: 5%;
    border-left: 2% solid var(--dark);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    transition: all .5s ease
}

.book-cover-art .book-item .book-cover .light {
    width: 90%;
    height: 100%;
    position: absolute;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
    top: 0;
    right: 0;
    opacity: .1;
    transition: all .5s ease;
    -webkit-transition: all .5s ease
}

.book-cover-art .book-item .book-cover .designer {
    backdrop-filter: blur(0.25rem);
    text-align: left;
    padding: .5rem;
    bottom: 0;
    opacity: 0;
    transition: all .5s ease;
    background-color: var(--bgColor-overlay);
    position: absolute
}

.book-cover-art .book-inside {
    width: 98%;
    height: 98%;
    position: absolute;
    top: 1.5%;
    border: 2% solid var(--dark-muted);
    border-radius: .375rem;
    background: var(--white-color);
    box-shadow: 10px 40px 40px -10px rgba(0,0,0,.1882352941),inset -2px 0 0 var(--dark-muted),inset -3px 0 0 #dbdbdb,inset -4px 0 0 #fff,inset -5px 0 0 #dbdbdb,inset -6px 0 0 #fff,inset -7px 0 0 #dbdbdb,inset -8px 0 0 #fff,inset -9px 0 0 #dbdbdb
}
.panel {
    /* background-color: #00000061; */
    position: relative;
    border-radius: .5rem;
    width: 100%;
}
.panel.panel-full-height>.panel-body {
    flex-grow: 1;
    padding: 85px 48px;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ed942b;
    border-top-right-radius: 95px;
}

.panel>.panel-body {
    padding: 1rem;
    box-sizing: border-box
}

@media(min-width: 900px) {
    .panel>.panel-body {
        padding:1.5rem
    }
}

.panel-body h1 {
    color: #fff;
    font-size: 31px;
    padding-bottom: 11px;
}

.mt-sm {
    color: #fff;
    font-size: 14px;
    line-height: 26px;
}

.inerst{
    padding-bottom: 0px;
}
.casn{
    padding-top: 0px;
}
.casn .book-content h2 {
    font-size: 23px;
    font-weight: 800;
    color: #1f2737;
    line-height: 1.08;
    margin-bottom: 22px;
    text-transform: uppercase;
}