/*--------------------------------------------------------------------
                SANVI STORY BANK — MAIN STYLESHEET
--------------------------------------------------------------------*/

/* 01. common (global styles) */
/* 02. navbar */
/* 03. home (hero + editor) */
/* 04. how-it-works */
/* 05. features */
/* 06. stories (blog grid) */
/* 07. contact form */
/* 08. contact corner button */
/* 09. footer */
/* 10. scroll down */
/* 11. scroll top */
/* 12. preloader */
/* 13. responsive */

/*--------------------------------------------------------------------
                        END TABLE OF CONTENT
--------------------------------------------------------------------*/

/* =====================================================
   COMMON GLOBAL STYLES
   ===================================================== */

/* KEEP — smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* KEEP — base typography */
body {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 28px;
  background: #ffffff;
  color: #191e23;
}

/* KEEP — link animation */
a {
  color: #555555;
  transition: all .4s ease-in-out;
}

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

/* KEEP — responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* KEEP — reset list */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ⚠️ MODIFY — h1 color should NOT be global */
h1 {
  font-size: 57px;
  line-height: 73px;
  letter-spacing: 2px;
  font-weight: 300;
}

/* ADD (important fix) */
#home h1 {
  color: #fff;
}

/* KEEP */
h2 {
  color: #2C2C2C;
  font-size: 46px;
  line-height: 60px;
  font-weight: 300;
}

/* KEEP */
h3{
  font-size: 25px;
  font-weight: 300;
  color: #2C2C2C;
  line-height: 38px;  
}

/* KEEP — feature headings */
h5 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 27px;
  color: #0181F5;
  text-transform: uppercase;
}

/* KEEP */
p {
  margin-bottom: 0;
}

/* OPTIONAL — brand accent */
strong {
  color: #0BC560;
}

/* KEEP — clean form inputs */
input,
textarea {
  border: 0;
}

/* KEEP — white text helper */
.c-white{
  color: #fff;
}

/* KEEP — section title system */
.title{
  padding-bottom: 63px;
  text-align: center;
  margin-top: -25px;
}

/* KEEP */
.sub-title {
  padding-top: 10px;
}


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

/* KEEP — main CTA buttons */
.site-btn {  
  display: inline-block;
  padding: 15px 27px;
  font-weight: 500;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  transition: 0.5s;
  cursor: pointer;
  letter-spacing: 1px;
  background: linear-gradient(to right, #0181f5 0%, #5db2ff 100%);
}

.site-btn:hover,
.site-btn:focus {
  color: #fff;
}

.site-btn i {
  padding-right: 5px;
  font-size: 19px;
}


/* KEEP — ripple hover animation */
.hover-effect {
  position: relative;
  overflow: hidden;
}

.hover-effect::before {
  position: absolute;
  top: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 0;
  background: rgba(255,255,255,.2);
  border-radius: 100%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.hover-effect:hover::before {
  animation: circle .73s;
}

@keyframes circle {
  0% { opacity:1; }
  40% { opacity:1; }
  100% {
      width:200%;
      height:200%;
      opacity:0;
  }
}


/* =====================================================
   NAVBAR (USED — KEEP)
   ===================================================== */

.set-color,
.navbar,
.navbar-nav .nav-item,
.navbar-brand img,
.navbar .navbar-nav .nav-link,
.show{
  transition: .3s;
}

/* KEEP */
.navbar-nav .nav-item {
  padding: 25px 8px;
}

/* KEEP — sticky navbar shadow */
.color-set.navbar-expand-lg{
  box-shadow: 0 5px 10px rgba(0,0,0,.1); 
}

/* KEEP */
.navbar .navbar-nav .nav-link {
  color: #fff;
  border-radius: 50px;
  padding: 2px 10px;
  font-size: 17px;
  text-align: center;
  text-transform: capitalize;
}

/* KEEP — scroll state */
.color-set{
  background: #fff;
}

.color-set .navbar-nav .nav-item{
  padding: 8px;
}

.color-set .navbar-nav .nav-item .nav-link {
  color: #0181F5;
}

/* KEEP */
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover{
  color: #0181F5;
  background: #fff;
}

/* KEEP */
.navbar .navbar-nav .nav-link:focus{
  outline: none;
}

/* KEEP gradient active state */
.color-set.navbar .navbar-nav .nav-link.active,
.color-set.navbar .navbar-nav .nav-link:hover{
  color: #fff;
  background: linear-gradient(to right, #0181f5 0%, #5db2ff 100%);
}

/* KEEP */
.ml-auto,
.mx-auto {
  margin: 12px 0;
}

.color-set .ml-auto,
.color-set .mx-auto {
  margin: 0;
}

/* KEEP mobile toggle */
.navbar-toggler {
  background: #fff;
}

.color-set .navbar-toggler {
  background: #000;
}

/* KEEP */
.navbar-dark .navbar-toggler-icon {
  background-image: url(../images/bars.png);
  margin: 6px 0;
  height: 20px;
}

.navbar-toggler:focus{
  outline: none;
}

/* =====================================================
   HOME SECTION — SANVI STORY BANK
   ===================================================== */

/* KEEP — Premium editor card */
.premium-editor {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.15);
    position: relative;
}

/* KEEP — glow effect */
.premium-editor::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg,#7b61ff,#00c6ff);
    z-index: -1;
    filter: blur(40px);
    opacity: .25;
}

/* KEEP — editor header */
.editor-header {
    background:#f3f4f7;
    padding:10px 15px;
    display:flex;
    align-items:center;
}

/* KEEP — mac dots */
.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    margin-right:6px;
}

.red{background:#ff5f57;}
.yellow{background:#febc2e;}
.green{background:#28c840;}

.editor-title{
    margin-left:10px;
    font-size:13px;
    color:#666;
}

/* KEEP — toolbar */
.editor-toolbar{
    background:#fafafa;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    padding:8px 15px;
    display:flex;
    gap:15px;
    font-size:14px;
    color:#555;
}

.editor-toolbar span{
    cursor:pointer;
}

.save-status{
    margin-left:auto;
    color:#28c840;
    font-size:13px;
}

/* KEEP — editor content */
.editor-body{
    padding:25px;
    min-height:260px;
}

.editor-body h3{
    font-weight:600;
    margin-bottom:12px;
}

.editor-body p{
    line-height:1.7;
    color:#444;
}

/* KEEP — footer */
.editor-footer{
    border-top:1px solid #eee;
    padding:8px 15px;
    font-size:12px;
    color:#777;
    display:flex;
    justify-content:space-between;
}

/* KEEP — typing cursor */
.cursor{
    animation:blink 1s infinite;
    font-weight:bold;
}

@keyframes blink{
    50%{opacity:0;}
}


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

#home {
  height: 750px;
  position: relative;
  background: url(../images/banner.png) no-repeat center center;
  background-size: cover;
}

/* KEEP — hero paragraph */
.home_text p {
  font-size: 20px;
  font-weight: 400;
  color: #FFFFFF;
  margin: 30px 0 50px;
  line-height: 35px;
}

/* KEEP — hero CTA button */
#home .site-btn{
  background: linear-gradient(to right, #FF7A18, #FFB347);
  border:none;
  transition: all .3s ease;
}

#home .site-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255,122,24,.35);
}



/* =====================================================
   HOW IT WORKS — TIMELINE
   ===================================================== */

/* KEEP — section wrapper */
#how-it-works{
    position:relative;
    padding:120px 0;
    background:#f9fbff;
}

/* ---------- timeline vertical line ---------- */

.timeline-line,
.timeline-progress{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:3px;
    border-radius:3px;
}

.timeline-line{
    background:rgba(1,129,245,.15);
    z-index:1;
}

.timeline-progress{
    background:linear-gradient(to bottom,#0181f5,#5db2ff);
    z-index:2;
    height:0;
}

/* ---------- rows ---------- */

.timeline-row{
    position:relative;
    max-width:1100px;
    margin:50px auto; /* FIXED spacing */
    display:flex;
    align-items:center;

    opacity:0;
    transform:translateY(70px);
    transition:.7s ease;
}

.timeline-row.active{
    opacity:1;
    transform:none;
}

/* ---------- center step ---------- */

.timeline-center{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:5;
}

.step-number{
    width:72px;
    height:72px;
    border-radius:50%;
    background:linear-gradient(to right,#0181f5,#5db2ff);
    color:#fff;

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

    font-weight:600;
    font-size:18px;

    box-shadow:0 15px 35px rgba(1,129,245,.35);
}

/* floating animation */
.timeline-row.active .step-number{
    animation:floatStep 4s ease-in-out infinite;
}

@keyframes floatStep{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
}

/* ---------- columns ---------- */

.timeline-col{ width:50%; }

.timeline-row:not(.reverse) .image-col{ padding-right:50px; }
.timeline-row:not(.reverse) .text-col{ padding-left:50px; }

.timeline-row.reverse .image-col{ padding-left:50px; }
.timeline-row.reverse .text-col{ padding-right:50px; }

.timeline-row.reverse .image-col{ order:2; }
.timeline-row.reverse .text-col{ order:1; }

/* ---------- images ---------- */

.timeline-img{
    width:100%;
    max-width:520px;
    display:block;
    transition:.5s;
}

.timeline-row:not(.reverse) .timeline-img{ margin-left:auto; }
.timeline-row.reverse .timeline-img{ margin-right:auto; }

.timeline-row:hover .timeline-img{
    transform:scale(1.03);
}

/* ---------- text ---------- */

.timeline-content{
    position:relative;
    max-width:480px;
}

.timeline-content p{
    margin-bottom:0;
}

/* connector line */
.timeline-content::before{
    content:'';
    position:absolute;
    top:50%;
    width:50px;
    height:3px;
    background:linear-gradient(to right,#0181f5,#5db2ff);
}

.timeline-row:not(.reverse) .timeline-content::before{
    right:-60px;
}

.timeline-row.reverse .timeline-content::before{
    left:-60px;
}

/* ---------- mobile ---------- */

@media(max-width:991px){

.timeline-line,
.timeline-progress{
    left:25px;
}

.timeline-center{
    left:25px;
}

.timeline-row{
    flex-direction:column !important;
    text-align:left;
}

.timeline-col{
    width:100%;
    padding-left:80px !important;
    padding-right:15px !important;
}

.timeline-content::before{
    display:none;
}

.step-number{
    animation:none;
}

}
/* =====================================================
   FEATURES SECTION — SANVI STORY BANK
   ===================================================== */

/* KEEP — section spacing */
#features{
    padding:80px 0;
    background:#ffffff;
    transition:all .5s ease;
}


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

.single-feature{
    background:#ffffff;
    margin:20px 10px;
    padding:30px 25px 35px;
    border-radius:20px;
    text-align:center;
    position:relative;
    overflow:hidden;
    transition:all .35s ease;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

/* Premium lift effect */
.single-feature:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(1,129,245,0.18);
}


/* Glow overlay */
.single-feature::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px;
    opacity:0;
    transition:.35s;
    background:linear-gradient(
        135deg,
        rgba(1,129,245,.15),
        rgba(93,178,255,.15)
    );
}

.single-feature:hover::before{
    opacity:1;
}


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

.feature-icon{
    width:80px;
    height:80px;
    margin:auto;
    margin-top:10px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#f1f6fd,#f0fbfe);
    transition:all .35s ease;
}

/* Gradient icon color */
.feature-icon i{
    font-size:30px;
    background:linear-gradient(135deg,#0181f5,#5db2ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* Icon animation */
.single-feature:hover .feature-icon{
    transform:scale(1.1);
}


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

.feature-text h5{
    margin:22px 0 10px;
    font-weight:600;
    font-size:18px;
}

.feature-text p{
    font-size:14px;
    color:#6c757d;
    line-height:1.6;
    margin:0;
}


/* =====================================================
   SECTION HOVER EFFECT (YOUR PREMIUM IDEA)
   ===================================================== */

#features:hover{
    background:linear-gradient(
        135deg,
        #3b82f6,
        #0ea5e9,
        #38bdf8
    );
}

/*--------------------------------------------------
                FAQ SECTION
--------------------------------------------------*/

.faq-section{
    padding:90px 0;
    background:linear-gradient(135deg,#f8fbff,#eef6ff);
}

/* heading */
.faq-heading h2{
    font-weight:700;
    margin-bottom:10px;
}

.faq-tag{
    color:#0ea5e9;
    font-weight:600;
    letter-spacing:1px;
}

.faq-sub{
    color:#6c757d;
    margin-bottom:50px;
}

/* wrapper */
.faq-wrapper{
    max-width:800px;
    margin:auto;
}

/* item */
.faq-item{
    margin-bottom:15px;
    border-radius:14px;
    overflow:hidden;
    background:#ffffff;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:.3s;
}

/* glass hover */
.faq-item:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 45px rgba(14,165,233,.2);
}

/* question */
.faq-question{
    width:100%;
    padding:18px 22px;
    border:none;
    background:none;
    text-align:left;
    font-weight:600;
    font-size:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

/* icon */
.faq-icon{
    font-size:22px;
    color:#0ea5e9;
    transition:.3s;
}

/* answer */
.faq-answer{
    max-height:0;
    overflow:hidden;
    padding:0 22px;
    color:#6c757d;
    line-height:1.7;
    transition:max-height .4s ease, padding .3s ease;
}

/* active state */
.faq-item.active .faq-answer{
    max-height:200px;
    padding:15px 22px 22px;
}

.faq-item.active .faq-icon{
    transform:rotate(45deg);
}
/* =====================================================
   STORIES SECTION (FORMER BLOG GRID)
   SANVI STORY BANK
===================================================== */

#stories{
  padding:100px 0 85px;
}

#stories .title{
  padding-bottom:25px;
}


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

.blog-grid-description{
  background:#ffffff;
  text-align:left;
  margin:0 15px;
  padding:8px 17px 22px 27px;
  border-bottom-right-radius:30px;
  position:relative;
  transition:.3s ease;
  box-shadow:0 10px 20px rgba(0,0,0,.10);
}

.blog-grid-description:hover{
  margin-top:-15px;
}


/* ===============================
   TITLE + TEXT
================================ */

.blog-grid-description h3{
  margin:12px 0 11px;
  font-size:25px;
  transition:.4s;
}

.blog-grid-description h3:hover{
  color:#0181F5;
}

.reading{
  margin-bottom:10px;
}


/* ===============================
   AUTHOR BADGE
================================ */

.blog-grid-description span{
  display:inline-block;
  padding:5px 10px;
  margin-bottom:12px;
  font-size:12px;
  line-height:1.2;
}

.blog-grid-description span.post-comments{
  color:#fff;
  background:linear-gradient(to right,#37ef8d,#37ef8d);
}

.blog-grid-description i{
  margin-right:5px;
}


/* ===============================
   READ LINK
================================ */

.continue{
  margin-bottom:0;
}

.continue a{
  color:#0181F5;
}

.continue a span{
  font-size:15px;
  transition:.2s;
}

.continue a:hover span{
  margin-left:5px;
}


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

.other-blog{
  margin-top:47px;
}


/* CARD SPACING */
#stories .col-md-4{
  margin-top:35px;
}

/*--------------------------------------------------------------------
                  12. start contact form css
--------------------------------------------------------------------*/

.contact-form-area{
  padding: 40px;
  border-radius: 10px;
  -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.10);
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.10);
}

.contact-input,
.contact-textarea {
  width: 100%;
  padding: 10px 20px;
  color: #222222;
  outline: 0;
  border: 1px solid #ffffff;
  -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.10);
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  -webkit-transition: all .5s ease-in;
  -moz-transition: all .5s ease-in;
  -ms-transition: all .5s ease-in;
  -o-transition: all .5s ease-in;
  transition: all .5s ease-in;
}

.contact-input:focus,
.contact-textarea:focus {
  border-color: #fff;
}

.contact-input {
  margin-bottom: 23px;
  height: 60px;
}

.contact-textarea {
  margin-bottom: 14px;
  height: 150px;
}

.contact-btn {
  width: 100%;
  border: 0;
  height: 60px;
  border-radius: 10px;
  color: #ffffff;
  outline: 0;
  background: -webkit-linear-gradient(to right, #00F298 0%, #07F7F7 100%);
  background: -moz-linear-gradient(to right, #00F298 0%, #07F7F7 100%);
  background: linear-gradient(to right, #00F298 0%, #07F7F7 100%);
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.contact-btn:focus{
  outline:none;
}

.contact-btn i {
  padding-right: 7px;
}

.alert {
  background-color: #ffffff;
  border-color: #ffffff;
  margin-bottom: 0;
  border-radius: 10px;
  margin-top: 23px;
  padding: 16px 20px;
  color: #777777;
  -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.10);
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.10);
}

#contact .close {
  font-size: 43px;
  color: #fff;
  opacity: 1;
  text-shadow: none;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

#contact .close:hover{
  color: red;
}

.modal-title{
  color: #fff;
}
.modal-header{
  padding-bottom: 3px;
  border-bottom: none;
}

#contact .modal-content {
  padding: 17px 25px 25px;
  border: none;
  border-radius: 10px;
  background: #0181f5;
  background: -moz-linear-gradient(left, #0181f5 0%, #5db2ff 100%);
  background: -webkit-linear-gradient(left, #0181f5 0%, #5db2ff 100%);
  background: linear-gradient(to right, #0181f5 0%, #5db2ff 100%);
}

#contact .close:focus {
    outline: none;
}

/*--------------------------------------------------------------------
                   12. end contact form css
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
                      13. start contact-corner-btn
--------------------------------------------------------------------*/

.contact-corner-btn{
  width: 47px;
  height: 47px;
  top: 50%;
  right: 0;
  position: fixed;
  z-index: 1025;
  transform: translateY(-50%);
  color: #fff;
  font-size: 23px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background: #fdae5c;
  background: -moz-linear-gradient(left, #fdae5c 0%, #fd8e5e 100%);
  background: -webkit-linear-gradient(left, #fdae5c 0%, #fd8e5e 100%);
  background: linear-gradient(to right, #fdae5c 0%, #fd8e5e 100%);
  text-align: center;
  line-height: 47px;
}

.contact-corner-btn:hover{
  color: #fff;
}

/*--------------------------------------------------------------------
                      13. end contact-corner-btn
--------------------------------------------------------------------*/
/* =====================================================
                        FOOTER
===================================================== */

#footer{
    background:#000000;
    color:#f5f5f5;
    padding:90px 0 30px;
    position:relative;
    overflow:hidden;
}

/* REMOVE OLD SHAPES */
#footer:before,
#footer:after{
    display:none !important;
}


/* ===============================
        BRAND AREA
================================ */

.footer-title{
    font-size:34px;
    font-weight:500;
    color:#ffffff;
    margin-bottom:15px;
    letter-spacing:1px;
}

.footer-description{
    color:#9ca3af;
    line-height:1.8;
    max-width:520px;
    margin-bottom:28px;
}


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

.footer-actions{
    margin-bottom:25px;
}

.footer-actions .site-btn{
    margin-right:12px;
    margin-bottom:12px;
}


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

.footer-social{
    margin-top:10px;
    padding:0;
}

.footer-social li{
    display:inline-block;
    margin-right:8px;
}

.footer-social li a{
    width:42px;
    height:42px;
    background:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    color:#f5f5f5;
    font-size:16px;
    transition:all .3s ease;
}

.footer-social li a:hover{
    background:linear-gradient(135deg,#0181f5,#5db2ff);
    transform:translateY(-3px);
}


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

.footer-links h4{
    color:#ffffff;
    font-size:18px;
    margin-bottom:20px;
}

.footer-links ul{
    padding:0;
}

.footer-links ul li{
    margin-bottom:12px;
}

.footer-links a{
    color:#9ca3af;
    transition:.3s;
    font-size:15px;
}

.footer-links a:hover{
    color:#5db2ff;
    padding-left:5px;
}


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

.newsletter-card{
    background:#0b0b0b;
    padding:35px 28px;
    border-radius:14px;
    border:1px solid #111;
    box-shadow:0 20px 60px rgba(0,0,0,0.35);
}

.newsletter-content h3{
    color:#fff;
    margin-bottom:12px;
}

.newsletter-content p{
    color:#9ca3af;
    font-size:15px;
    margin-bottom:22px;
    line-height:1.7;
}


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

.newsletter-form input{
    width:100%;
    padding:14px 16px;
    border-radius:6px;
    border:1px solid #222;
    background:#111;
    color:#fff;
    outline:none;
    margin-bottom:14px;
    transition:.3s;
}

.newsletter-form input:focus{
    border-color:#5db2ff;
    box-shadow:0 0 0 2px rgba(93,178,255,.2);
}

.newsletter-btn{
    width:100%;
    padding:13px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
    color:#fff;
    background:linear-gradient(to right,#0181f5,#5db2ff);
    transition:.3s;
}

.newsletter-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(1,129,245,.35);
}

.newsletter-trust{
    display:block;
    margin-top:12px;
    font-size:12px;
    color:#777;
    text-align:center;
}


/* ===============================
        COPYRIGHT
================================ */

.footer-bottom{
    border-top:1px solid #111;
    margin-top:60px;
    padding-top:25px;
    text-align:center;
}

.footer-bottom p{
    margin:0;
    color:#9ca3af;
    font-size:14px;
}


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

@media (max-width:991px){

    #footer{
        text-align:center;
    }

    .footer-description{
        margin-left:auto;
        margin-right:auto;
    }

    .footer-actions{
        justify-content:center;
    }

    .footer-social{
        justify-content:center;
    }

    .newsletter-card{
        margin-top:40px;
    }
}

@media (max-width:767px){

    #footer{
        padding:70px 0 25px;
    }

    .footer-title{
        font-size:28px;
    }
}


/*--------------------------------------------------------------------
                       15. start scroll down
--------------------------------------------------------------------*/

#scroll-down a {
  position: absolute;
  bottom: 240px;
  left: 50%;
  z-index: 2;
}

#scroll-down a span {
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
}

@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
    opacity: 0;
  }

}

@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
    
  50% {
    opacity: 1;
  }

  100% {
    transform: rotate(-45deg) translate(-10px, 10px);
    opacity: 0;
  }

}

/*--------------------------------------------------------------------
                        15. end scroll-down 
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
                      16. start scroll top css 
--------------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  bottom: 63px;
  right: 63px;
  z-index:  333;
  display: none;
}

.scroll-top span {
  position: absolute;
  width: 24px;
  height: 24px;
  margin-right: -12px;
  border-right: 2px solid #00f298;
  border-top: 2px solid #00f298;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sbb05 1.5s infinite;
  animation: sbb05 1.5s infinite;
}

@-webkit-keyframes sbb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: rotate(-45deg) translate(10px, -10px);
    opacity: 0;
  }

}

@keyframes sbb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: rotate(-45deg) translate(10px, -10px);
    opacity: 0;
  }

}

/*--------------------------------------------------------------------
                      16. end scroll top css
--------------------------------------------------------------------*/
/* =====================================================
   PRELOADER — SANVI STORY BANK
===================================================== */

.preloader{
    position:fixed;
    inset:0;
    background:#ffffff;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity .6s ease, visibility .6s ease;
}

.preloader.hide{
    opacity:0;
    visibility:hidden;
}

/* center box */
.preloader-inner{
    text-align:center;
}

/* animated circle */
.loader-circle{
    width:60px;
    height:60px;
    border-radius:50%;
    border:4px solid rgba(1,129,245,.15);
    border-top:4px solid #0181f5;
    animation:spin 1s linear infinite;
    margin:auto;
}

/* brand text */
.loader-text{
    margin-top:18px;
    font-size:14px;
    letter-spacing:2px;
    color:#0181f5;
    font-weight:600;
}

/* animation */
@keyframes spin{
    100%{ transform:rotate(360deg); }
}

/* =====================================================
   RESPONSIVE — SANVI STORY BANK
===================================================== */

/* ---------- LARGE SCREENS ---------- */

@media (max-width:1200px){

    h1{
        font-size:45px;
        line-height:58px;
    }

    h2{
        font-size:38px;
        line-height:50px;
    }
}

/* ---------- TABLET ---------- */

@media (max-width:991px){

    /* NAVBAR */
    .navbar{
        padding:15px;
    }

    .show{
        background:#fff;
        margin-top:15px;
    }

    .show .nav-link{
        color:#0181f5 !important;
    }

    /* HOME */
    #home{
        height:auto;
        padding:120px 0 80px;
        text-align:center;
    }

    .home_text{
        padding-top:40px;
    }

    .home_text p{
        font-size:16px;
        line-height:28px;
    }

    /* TIMELINE */
    #how-it-works{
        padding:90px 0;
    }

    /* FEATURES */
    .single-feature{
        margin:15px 0;
    }

    /* STORIES GRID */
    #stories .col-md-4{
        flex:0 0 50%;
        max-width:50%;
    }
}

/* ---------- MOBILE ---------- */

@media (max-width:767px){

    h1{
        font-size:32px;
        line-height:44px;
    }

    h2{
        font-size:28px;
        line-height:38px;
    }

    /* STORIES */
    #stories .col-md-4{
        flex:0 0 100%;
        max-width:100%;
    }

    /* FOOTER STACK */
    #footer .col-md-8,
    #footer .col-md-4{
        flex:0 0 100%;
        max-width:100%;
    }

    /* TIMELINE MOBILE FIX */
    .timeline-line,
    .timeline-progress{
        left:25px;
    }

    .timeline-center{
        left:25px;
    }

    .timeline-row{
        flex-direction:column !important;
        text-align:left;
    }

    .timeline-col{
        width:100%;
        padding-left:80px !important;
        padding-right:15px !important;
    }
}

/* ---------- SMALL MOBILE ---------- */

@media (max-width:575px){

    .navbar .container{
        padding-left:10px;
        padding-right:10px;
    }

}