/* =====================================================================
   Theme Name   :sass
   Author       : Fahmid Ahmed Chowdhury
   Description  : 
   Version      : 1.0.0
===================================================================== */

/* =====================================================================
   TABLE OF CONTENTS:
=====================================================================
01. Reset & Base
02. Typography
03. Text Utilities
04. Colors & Backgrounds
05. Layout Utilities
06. Buttons
07. Headings
08. Section Titles
09. Hero Section
10. Image Carousel
11. Circle Layout
12. Accordion
13. Cards (Square, Round, Long)
===================================================================== */


/* =====================================================================
   01. Reset & Base
===================================================================== */
ul,
li,
p {
  margin: 0;
  padding: 0;
}
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body, html {
    width: 100% !important;
   
  }
/* =====================================================================
   02. Typography
===================================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
a {
  font-family: "Poppins", sans-serif;
}

p {
  font-family: "Inter", sans-serif;
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}

.content-common p{
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
   margin-bottom: 40px;
}
.content-common h1,
.content-common h2,
.content-common h3,
.content-common h4,
.content-common h5{

    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
     margin-bottom: 40px;

}
.content-common h6{
    color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
     margin-bottom: 40px;
}
.content-common ul li {
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    color: #fff;
    margin-bottom: 4px;
}
.content-common ul li:last-child{
  margin-bottom: 0px;
}
.content-common ul {
    margin: 0;
    padding: 0;
    padding-left: 30px;
    margin-bottom: 40px;
}
.content-common a {
    color: #50fbaa;
    font-size: 18px;
}
.content-common img {
    width: 100%;
    height: 100%;
    margin-bottom: 40px;
}
.content-common ul:last-of-type:last-child {
  margin-bottom: 0;
}
/* =====================================================================
   03. Text Utilities
===================================================================== */
.text-link {
  text-align: none;
  color: #50fbaa;
  text-decoration: none;
  font-size: 18px;
  line-height: 18px;
  display: block;
}
.text-link:focus{
outline: none;
}
a.text-link:hover {
    color: #ffffff;
    text-decoration: underline;
}
.branding-color {
  color: #50fbaa;
}


/* =====================================================================
   04. Colors & Backgrounds
===================================================================== */
.bg-black {
  background-color: #8d6dc46b!important;
}

.bg-gradiant {
  background: linear-gradient(180deg, #2d1f6c 0%, #292734 100%);
}

a.bullet {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    line-height: 18px;
    display: block;
    background: #2a2a2a;
    padding: 8px 16px;
    border-radius: 8px;
}


/* =====================================================================
   05. Layout Utilities
===================================================================== */

.content-column {
    display: grid;
    gap: 20px;
    flex-wrap: wrap;
    grid-template-columns: 1fr 1fr 1fr;
}
.section-padding-top {
  padding-top: 120px;
}

.section-padding-bottom {
  padding-bottom: 120px;
}

.section-padding-y {
  padding-top: 120px;
  padding-bottom: 120px;
}


/* =====================================================================
   06. Buttons
===================================================================== */
.primary-btn-sm,
.primary-btn-lg {
  background: #50fbaa;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.primary-btn-lg {
  text-decoration: none;
  font-weight: 600;
  color: #000;
  text-transform: uppercase;
  box-shadow: -1px -1px 11px 0px rgba(80, 251, 170, 0.58)!important;
}

/* Hover Effects */
.primary-btn-sm:hover,
.primary-btn-lg:hover ,
.desktop-menu li:last-child a:hover
{
  background: #181818;
  color: #fff;
  box-shadow: -1px -1px 11px 0px #181818!important;
}



/* =====================================================================
   07. Headings
===================================================================== */
h1 {
  color: #fff;
  text-align: center;
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: 90px;
}

h4 {
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
}

h5 {
  color: #fff;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
}

h6 {
  color: #fff;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 42px;
}


/* =====================================================================
   08. Section Titles
===================================================================== */
.section-title h5 {
  margin-bottom: 40px;
}

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

.common-list-item ul li {
  position: relative;
  padding-left: 60px;
  margin-bottom: 40px;
  list-style: none;
}

.common-list-item ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0px;
  transform: 0px;
  width: 40px;
  height: 40px;
  background-color: #50fbaa;
  border-radius: 50%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><mask id="a" fill="white"><path d="M12.6787 0.138672L19.7724 6.41351L7.32111 20.4895L0.227468 14.2147L12.6787 0.138672Z"/></mask><path d="M7.32111 20.4895L4.67089 23.4856L7.66694 26.1358L10.3172 23.1397L7.32111 20.4895ZM19.7724 6.41351L16.7763 3.76329L4.32506 17.8393L7.32111 20.4895L10.3172 23.1397L22.7684 9.06374L19.7724 6.41351ZM7.32111 20.4895L9.97133 17.4935L2.87769 11.2186L0.227468 14.2147L-2.42276 17.2107L4.67089 23.4856L7.32111 20.4895Z" fill="white" mask="url(%23a)"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 21px;
}


/* =====================================================================
   09. Hero Section
===================================================================== */
.logo-menu-section {
  position: fixed;
  z-index: 999;
  width: 100%;
  top: 24px;
}

.logo-menu-section__container {
  background: #fff;
  padding: 24px 16px;
  border-radius: 8px;
}

ul.desktop-menu li {
  margin: 0px 24px;
  display: inline-block;
}

ul.desktop-menu li:last-child {
  margin-right: 0px;
}
.mobile-area{
  display: none;
}
.mobile-area .icon svg{
  width: 20px;
  height: 20px;
}
ul.mobile-menu {
    position: absolute;
    background: #fff;
    width: 100%;
    left: 0;
    top: 84px;
    z-index: 11;
    padding: 24px;
}
ul.mobile-menu li {
    display: block;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ddd;
    padding: 8px 0px;

}
ul.mobile-menu li:last-child{
   display: flex;
    justify-content: center;

}
.desktop-menu li a, .mobile-menu li a ,.footer-links a{
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
}
.desktop-menu li a{
  outline: none;
}
.mobile-menu li:last-child a, .desktop-menu li:last-child a{
  background: #50fbaa;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0px 20px;
  border-radius: 8px;
}
.footer-links a ,.footer-links li{
    color: #fff;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
}
.site-footer p {
    
    font-size: 20px;
  
    font-weight: 300;
 
}
.footer-links a:hover{
  color: #50fbaa;
  
}
.site-footer h6 {
    margin-bottom: 20px;
}


.social-icons a.social-icon {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  transition: all 0.3s ease;
}

.icon-svg {
  fill: #999;
  transition: all 0.3s ease;
}

.social-icon:hover .icon-svg {
  fill: white;
}

.social-icon.facebook:hover {
  background-color: #1877F2;
}

.social-icon.tiktok:hover {
  background: linear-gradient(to bottom right, #25F4EE, #000000, #FE2C55);
  border-color: transparent;
}

.social-icon.youtube:hover {
  background-color: #FF0000;
  border-color: #FF0000;
}

.social-icon.instagram:hover {
  background: linear-gradient(to top right, #feda75, #d62976, #4f5bd5);
  border-color: transparent;
}

.social-icon.linkedin:hover {
  background-color: #0A66C2;
  border-color: #0A66C2;
}

.desktop-menu a.active, .mobile-menu a.active,
.current-menu-item a

{
    color: #000;
    font-weight: bold;
    border-bottom: 2px solid #000;
}
.hero-section {
  position: relative;
  height: 100%;
  width: 100%;
}

.hero-bg {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content-wrapper {
  align-items: center;
  padding: 250px 0px 120px 0px;
}

.hero-content h1 {
  margin-bottom: 40px;
}

.hero-content p {
  margin-bottom: 60px;
}

.hero-content .primary-btn-lg {
  margin: 0px auto;
}

.hero-information-wrapper {
  padding-bottom: 80px;
}

.hero-information-image img {
  width: 100%;
}

.hero-information-content {
  padding-left: 40px;
}

.hero-information-image img {
    width: 200px;
}
.hero-information-content{
    max-height: 510px;
    overflow: hidden;
}
.hero-information-content ul {
    margin-top: 100px;
    opacity: 0;
}

/* =====================================================================
   10. Image Carousel
===================================================================== */
.image-item-group-wrapper {
  border-radius: 8px;
}

.image-item-group {
  padding: 40px;
  align-items: center;
}

.image-item {
  padding: 24px;
}

.image-item img {
  width: 130px;
  height: auto;
  object-fit: cover;
}


/* =====================================================================
   11. Circle Layout
===================================================================== */
.circle-wrapper {
  height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.circle-wrapper h5 {
  margin-bottom: 0;
  line-height: 0;
}

.circle {
  position: relative;
  width: min(70vw, 500px);
  aspect-ratio: 1/1;
  margin-inline: auto;
  position: absolute;
  transform: translateX(0%, 0%);
}

.circle img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 8px;
  background: #fff;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  transform: translate(-50%, -50%);
  transition: 0.3s;
}

.site-footer .custom-logo-link img {
    max-width: 80px;
    margin-bottom: 28px;
    max-height: 44px;
}
/* =====================================================================
   12. Accordion
===================================================================== */
.accordion {
  border-radius: 8px;
  padding: 24px;
 
}

.accordion .title {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.accordion .content {
  margin-top: 24px;
}

.accordion svg {
  width: 40px;
  height: 40px;
  fill: #fff;
}

.accordion .content p {
  margin-bottom: 24px;
}

.accordion .content p:last-child,
.accordion-group .accordion:last-child {
  margin-bottom: 0px;
}

.accordion.active .content,
.accordion.active .up-btn {
  display: block;
}

.accordion .content,
.accordion .up-btn,
.accordion.active .dwn-btn {
  display: none;
}

.accordion-group .accordion {
  margin-bottom: 24px;
}

.accordion-group .accordion:last-child {
  margin-bottom: 0;
}


/* =====================================================================
   13. Cards (Square, Round, Long)
===================================================================== */
.square-content-card {
  border-radius: 18px;
  overflow: hidden;
}

.square-content-card .image img {
  object-fit: cover;
  width: 100%;
  height: 250px;
}

.square-content-card .content {
  padding: 24px;
}

.square-content-card .content .title {
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 16px;
}

.square-content-card .content .top-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.square-content-card .content p {
  margin-bottom: 24px;
}

.square-content-card .content .top-info p {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.round-card-group{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
  overflow: hidden;
}


.round-card {
  background: #181818;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
 
}

.round-card svg {
  width: 80px;
  height: 80px;
}

.long-card {
  display: grid;
  grid-template-columns: 1fr 0.4fr;
  padding:60px 24px;
  border-radius: 8px;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 24px;
 transform: scale(0.7);
     box-shadow: 1px -6px 20px 1px #000000
}

.long-card-group .long-card:last-child {
  margin-bottom: 0px;
}

.long-card .icon {
  width: 60px;
  height: 60px;
  margin-right: 16px;
}

.long-card .icon svg {
  width: 60px;
  height: 60px;
}

.long-card-number {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.square-content-card.slick-slide {
    margin: 0px 20px;
}





.contact-form-wrapper {
    border-radius: 8px;
    padding: 60px;

}
.contact-form {
    max-width: 700px;
    margin: 0px auto;

}
.contact-form label {
    font-family: "Inter", sans-serif!important;
    color: #fff!important;
    font-size: 16px!important;
    font-style: normal;
    font-weight: 400!important;
    line-height: normal;
    line-height: 0px;
    margin: 0px!important;
}
.contact-form .forminator-description{
  display: none!important;
}
.contact-form input{
    font-size: 18px;
    background: none;
    border: 1px solid #ddd;
    height: 50px!important;
    border-radius: 4px;
    color:#fff!important;
    line-height: 18px;
}
.contact-form textarea{
   font-size: 18px;
    background: none;
    border: 1px solid #ddd;
    height: 50px!important;
    border-radius: 4px;
    color: #fff;
    line-height: 18px;
}
.contact-form  button.forminator-button.forminator-button-submit.primary-btn-lg {
    width: 100%!important;
}
.contact-form .forminator-row-last{
  margin-bottom: 0!important;
}

.contact-form .forminator-error-message {
    background-color: #f1a0af!important;
    color: #2e020a!important;
}





section.page-banner_section {
    height: 200px;
  
}
.page-banner-bg {
    position: absolute;
    width: 100%;
    height: 100%;
}
.page-banner-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
}






.case-study-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}


.pagination-wrapper {
    margin-top: 60px;
}
span.page-numbers.current,a.page-numbers,a.next.page-numbers {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 0px 20px;
    border-radius: 8px;
    font-size: 20px;
    text-decoration: none;
}

span.page-numbers.current,span.page-numbers.current:hover,a.page-numbers:hover,a.next.page-numbers:hover {
    background: #50fbaa;
     color: #181818;
         box-shadow: -1px -1px 11px 0px #181818 !important;
}
a.page-numbers,a.next.page-numbers {
   background: #fff;
    color: #181818;
}
.pagination-wrapper {
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
}

.line-2-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.not-found-card {
    padding: 80px;
}
.not-found-card a{
    margin: 50px auto 0px;
}
.pagination-wrapper  .nav-links {
    display: flex;
    gap: 15px;
}