/*
  1. >>> Headr Style
  2. >>> Banner Style
  3. >>> download Style
  4. >>> Project Style
  5. >>> Testimonials Style
  6. >>> Email Style
  7. >>> Footer Style

*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------*/
:root {
	--font_14:0.875rem;
	--font_16:1rem;
	--font_30:1.875rem;
	--font_36:2.25rem;
	--font_48:3rem;
	--40:2.5rem;
	--30:1.875rem;
	--margin_30:1.875rem;
	--margin-54:3.375rem;
	--margin-60:3.75rem;
	--margin-100:6.25rem;
	--margin-120:7.5rem;   
}
html {font-family: 'Poppins', sans-serif;background-color:#2A2A2A}
body {font-family: 'Poppins', sans-serif;overflow-x: hidden; background-color:#2A2A2A; font-weight:400;font-style: normal; color: #FFF; font-size: var(--font_14)}
html, body {
  overflow-x: hidden;
}
a,a:hover,a:focus,i,input,button,input:focus,.transition {text-decoration: none;outline: none;transition-delay: 0s;transition-duration: 0.4s;transition-property: all;transition-timing-function: ease;box-shadow: none;}
a{color: #000}
iframe {border: 0;outline: none;}
::-moz-selection {background: var(--red);text-shadow: none;color:var(--white)}
::selection {background:var(--red);text-shadow: none;color:var(--white)}
img {max-width: 100%;border: none;outline: none;height: auto;}
input,textarea {border-radius: 0;resize: none;}
ul {padding: 0;margin: 0;}
@font-face {
font-family: 'DM Serif Display', serif;
font-family: 'Poppins', sans-serif;}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {background-color: transparent;background-image: none;color:#000;}
/* 1.2 Typography */
h1,h2,h3,h4,h5,h6 {font-family: 'DM Serif Display', serif;}
figure{ margin: 0 }
svg,img { max-width: 100%; height: auto; }

/*-----------------------------------------------------------------
  1. >>> Headr Style
----------------------------------------------------------------*/
.ds-header{ padding-top:2.5rem; padding-bottom: 7.8125rem; position: relative;  }

.ds-logo img,
.ds-logo-image {
  height: 30px;
  width: auto;
  display: inline-block;
}

/*-----------------------------------------------------------------
  2. >>> Banner Style
----------------------------------------------------------------*/
.ds-banner{ margin-bottom: 8.125rem }
.ds-banner-hed{ font-size: 5.3125rem; line-height:5rem  }
.ds-image-shadow{box-shadow:30px 30px #264F78;}
/*.ds-banner-left{display: flex; justify-content: space-between; flex-direction: column;}*/
.ds-social{ list-style: none; display: flex; align-items: center;margin-top: 2.5rem }
.ds-social li{ margin-right: 15px }
.ds-social li:alst-child{ margin-right: 0 }
.ds-social a{ width: 30px; height: 30px; background-color: #264F78; border-radius: 100%; text-align: center; display: flex; justify-content: center; align-items: center; font-size:1.25rem; color:#2A2A2A }
.ds-social li:hover a{background-color: #264F78; color:#000 }

.ds-banner figure{width: 370px; position: relative;}
.ds-banner figure figcaption{ color: #FFF; font-size:1.875rem; position: absolute; bottom: 0; width: 100%; text-align: center; padding-bottom:2.5rem  }
/*-----------------------------------------------------------------
  3. >>> download Style
----------------------------------------------------------------*/
.ds-download-section{ background-color: #000; padding: 7.5rem 0 }
.ds-download-section h2{ font-size: 2.5rem; line-height: 3.375rem; width: 100%;max-width: 80%;margin: 0 }
.ds-download-section p{ color:#9C9C9C; font-size: 1rem; line-height: 1.875rem }
.ds-download-button{ display: inline-block; color: #264F78; border: 1px solid #264F78; letter-spacing: 3px; text-transform: uppercase; font-size: 0.75rem; padding:0.875rem 1.25rem; margin-top: 30px  }
.ds-download-button i{ font-size:1.125rem; vertical-align: middle;  }
.ds-download-button:hover{ color: #000; background-color:#264F78  }
/*-----------------------------------------------------------------
  4. >>> Projects Style
----------------------------------------------------------------*/
.ds-projects-section{padding: 7.5rem 0 }
.ds-projects-section h2{ font-size: 2.5rem; line-height: 3.375rem; width: 100%;max-width:40%;margin: 0}
.ds-projects-section h2 span{ display: block; font-family: 'Poppins', sans-serif; text-transform: uppercase; color: #264F78; font-weight: 600; letter-spacing: 3px; font-size: 0.75rem; margin-bottom: 0.625rem}

.ds-projects-listing-section{ margin-top:5rem  }
.ds-projects-loop figure{ margin-right: 60px; position: relative; }
.ds-projects-loop:hover figure img.ds-image-shadow{box-shadow:20px 20px #264F78;}
.ds-link-button{ position: absolute; right:0.4375rem; top:0.4375rem; width: 2rem; height: 2rem; border-radius: 3px; background-color: #000; display: block; justify-content: center; align-items: center; color: #264F78; font-size: 1.125rem; text-align: center; opacity: 0 }
.ds-projects-loop:hover .ds-link-button{ opacity: 1 }
.ds-projects-loop section{ margin-top: 5.875rem }
.ds-projects-loop section h3{font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.25rem}
.ds-projects-loop section span{ font-size: 1rem; font-weight: 400 }
/*-----------------------------------------------------------------
  5. >>> Testimonials Style
----------------------------------------------------------------*/
.ds-testimonials-section{ background-color: #000;padding: 7.5rem 0 }
.ds-testimonials-section h2 span{ display: block; font-family: 'Poppins', sans-serif; text-transform: uppercase; color: #264F78; font-weight: 600; letter-spacing: 3px; font-size: 0.75rem; margin-bottom:2.5rem}

.ds-testimonials-loop article{ color: #9C9C9C; font-size: 2rem; line-height: 2.8125rem }
.ds-testimonials-loop section{ margin-top: 3.75rem }
.ds-testimonials-loop section span{ display: block; font-size: 1rem; line-height: 1.375rem }
.ds-testimonials-loop section span.ds-name{ font-weight: 600 }
.ds-testimonials-slider .slick-arrow{ display: inline-block; outline: none; cursor: pointer; font-size:1.5rem; line-height:3.75rem; text-align: center;  border: 1px solid #575757; padding: 0; width: 3.75rem; height: 3.75rem; border-radius: 100%; background-color:#000; color: #575757; position: absolute; bottom: 0; right: 0; z-index: 2 }
.ds-testimonials-slider .slick-arrow:hover{ color: #264F78; border-color: #264F78 }
.ds-testimonials-slider .slick-arrow.slick-prev{ right: 4.375rem }
/*-----------------------------------------------------------------
  6. >>> Email Style
----------------------------------------------------------------*/
.ds-email-section {
  padding: 3rem 0; /* Was 7.5rem */
  background-color: #264F78;
  text-align: center;
}

.ds-email-section h2 {
  font-size:1.75rem; /* Was 3.75rem */
  margin-bottom: 1rem;
}

.ds-email-section a{ font-size:1.0rem; font-weight: 300; text-decoration: underline;  }
.ds-email-section a:hover{ color: #000; text-decoration: none; }
/*-----------------------------------------------------------------
  7. >>> Footer Style
----------------------------------------------------------------*/
.ds-footer{ padding: 2.5rem 0; text-align: center; color: #CECECE; font-size: 1.25rem }
.ds-footer a{color: #CECECE }
.ds-footer a:hover{color: #CECECE; text-decoration: underline; }
/*-------------------------------------------------------------------------------
 XS Style @media (max-width: 767px) 
-------------------------------------------------------------------------------*/
@media (max-width: 767px) {
	.ds-header {padding-top: 2.5rem;padding-bottom:2.5rem;}
	.ds-banner-hed {font-size: 2.3125rem;line-height: 3rem;}
	.ds-banner .container{ position: relative; padding-bottom: 90px }
	.ds-social{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
	.ds-banner figure{ width: 90%; margin: 0 auto; margin-top: 40px }
	.ds-image-shadow {box-shadow:20px 20px #264F78;}
	.ds-banner {margin-bottom: 3.5rem;}
	.ds-download-section,.ds-projects-section,.ds-testimonials-section,.ds-email-section{ padding: 3.5rem 0 }
	.ds-download-section h2,.ds-projects-section h2{ max-width: 100% }
	.ds-projects-section h2 span{ margin-bottom: 0 }
	.ds-projects-listing-section {margin-top: 3rem;}
	.ds-projects-loop section{margin-top: 2.875rem;}
	.ds-projects-loop figure{ margin-right: 20px }
	.ds-projects-loop{margin-bottom: 3.5rem;}
	.ds-projects-loop:last-child{ margin-bottom: 0 }
	.ds-testimonials-loop article{ font-size:1rem; line-height: 2rem  }
	.ds-email-section h2{ font-size: 2rem }
	.ds-testimonials-slider .slick-arrow{width: 2.75rem;height: 2.75rem;line-height: 2.75rem;}
}


@media (min-width: 768px) and (max-width: 991px) {
.ds-header{padding-bottom: 3.8125rem;}
.ds-banner-hed{font-size: 3.3125rem;line-height: 4rem;}
.ds-banner figure{ margin-right: 1.875rem }
.ds-projects-section h2{ max-width: 60% }
.ds-projects-loop figure{ margin-right: 40px }
}

@media (min-width: 992px) and (max-width: 1199px) {
.ds-banner figure{ margin-right: 1.875rem }

}

.ds-projects-subtext {
  color: #9C9C9C;
  font-size: 1rem;
  margin-top: 1rem;
  max-width: 600px;
}

/* Fine-tune layout for large alternating screenshots */
.ds-projects-feature {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
}

/* Screenshot styling (responsive and centered) */
.ds-large-screenshot {
  max-width: 700px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 20px 20px #264F78;
  cursor: pointer;
  transition: transform 0.2s ease;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.ds-large-screenshot:hover {
  transform: scale(1.02);
}

/* Text column styling */
.ds-projects-feature .col-lg-4,
.ds-projects-feature .col-lg-5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Heading styling (smaller and tighter) */
.ds-projects-feature h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Paragraph styling (smaller, lighter) */
.ds-projects-feature p {
  font-size: 0.95rem;
  color: #9C9C9C;
  line-height: 1.6;
  margin-bottom: 0;
}

.lb-overlay,
.lb-data {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 767px) {
  .ds-download-section h3 {
    margin-top: 2rem; 
  }
}

/* Phones: max-width 767px */
@media (max-width: 767px) {
  .ds-projects-feature .ds-large-screenshot {
    margin-bottom: 2rem;
  }

  .ds-projects-feature .col-12,
  .ds-projects-feature .col-sm-12 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-bottom: 2rem;
  }

  .ds-projects-feature h3 {
    font-size: 1.25rem;
    margin-top: 0.5rem;
  }
}

/* Tablets / small laptops: 768px–991px */
@media (min-width: 768px) and (max-width: 991px) {
  .ds-projects-feature {
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
  }

  .ds-projects-feature .ds-large-screenshot {
    margin-bottom: 1.5rem;
  }

  .ds-projects-feature .col-md-6,
  .ds-projects-feature .col-lg-4,
  .ds-projects-feature .col-lg-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-top: 1rem;
  }

  .ds-projects-feature h3 {
    font-size: 1.4rem;
    margin-top: 0.5rem;
  }
}

/* Large tablets / small desktops: 992px–1199px */
@media (min-width: 992px) and (max-width: 1199px) {
  .ds-projects-feature {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    margin-bottom: 3rem;
  }

  .ds-projects-feature .col-lg-8 {
    padding-right: 2rem; /* space between image and text */
  }

  .ds-projects-feature .col-lg-4,
  .ds-projects-feature .col-lg-5 {
    padding-left: 2rem;
  }

  .ds-projects-feature h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .ds-projects-feature p {
    font-size: 0.95rem;
    line-height: 1.7;
  }
}

@media (max-width: 767px) {
  .ds-banner .row {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }

  .ds-banner figure {
    width: 160px;
    margin: 0 auto 2rem auto; /* more space below logo */
  }

  .ds-banner img.ds-image-shadow {
    box-shadow: 15px 15px #264F78;
  }

  .ds-banner-left {
    margin-top: 0; /* ensure headline hugs the top edge */
  }

  .ds-banner-hed {
    font-size: 1.75rem;
    line-height: 2.25rem;
    margin-bottom: 1rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .ds-social {
    justify-content: center;
    margin-top: 1.25rem;
  }

  .ds-social li {
    margin-right: 0.5rem;
  }
}

.ds-banner-hed-small {
  font-size: 2.5rem;
  line-height: 3rem;
}

.ds-download-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ds-download-button {
  display: inline-block;
  color: #264F78;
  border: 1px solid #264F78;
  text-transform: uppercase;
  font-size: 0.875rem;
  padding: 0.875rem 1.5rem;
  letter-spacing: 2px;
  background-color: transparent;
  transition: all 0.3s ease;
}

.ds-download-button:hover {
  background-color: #264F78;
  color: #000;
}

.ds-download-button i {
  margin-left: 0.5rem;
  font-size: 1.2rem;
}

.ds-download-centered {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.ds-download-centered p,
.ds-download-centered .ds-download-notes {
  text-align: center;
}

.ds-download-centered ul {
  list-style-position: inside;
  padding-left: 0;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  text-align: center;
}

.ds-download-centered h2 {
  text-align: center;
  max-width: 100% !important;
  margin: 0 auto 1.5rem auto !important;
}



.ds-purchase-section {
  background-color: #000;
  padding: 7.5rem 0;
}

.ds-purchase-section h2 {
  font-size: 2.5rem;
  line-height: 3.375rem;
}

.ds-purchase-section h2 span {
  display: block;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  color: #264F78;
  font-weight: 600;
  letter-spacing: 3px;
  font-size: 0.75rem;
  margin-bottom: 0.625rem;
}

.ds-purchase-section table {
  border-color: #575757;
}

.ds-purchase-section td,
.ds-purchase-section th {
  vertical-align: middle;
  font-size: 0.95rem;
}

.ds-purchase-section .ds-download-button {
  text-align: center;
  width: 220px;
}

@media (max-width: 576px) {
  .ds-purchase-section table td,
  .ds-purchase-section table th {
    font-size: 0.8rem;
    padding: 0.5rem;
  }
}

.ds-pro-badge {
  display: inline-block;
  background-color: #264F78;
  color: #fff;
  font-size: 0.65rem;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  margin-top: 0.25rem;
}

.ds-heading-with-logo {
  margin-bottom: 3rem;
}

.ds-heading-logo {
  max-width: 180px;
  height: auto;
  opacity: 0.8;
  filter: drop-shadow(0 0 10px #00000088);
}

@media (max-width: 767px) {
  .ds-heading-logo {
    margin-top: 1rem;
  }
}

.ds-heading-logo {
  height: 30px;      
  width: auto;
  display: inline-block;
  opacity: 0.8;              /* optional to soften against dark background */
}