body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background-color: #050818;
    color: #fff;
    background: -o-radial-gradient(70% 50vh, 28.32vw 28.32vw, #201565 0, rgba(5, 8, 24, 0) 100%), -o-radial-gradient(75% 55vh, 38.3vw 38.32vw, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 35vmax, rgba(5, 7, 24, .15) 35vmax, rgba(0, 0, 0, 0) 35vmax);
    background: radial-gradient(28.32vw 28.32vw at 70% 50vh, #201565 0, rgba(5, 8, 24, 0) 100%), radial-gradient(38.3vw 38.32vw at 75% 55vh, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 35vmax, rgba(5, 7, 24, .15) 0, rgba(0, 0, 0, 0) 35vmax);
    background-color: #050718;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-size: 16px;
}

::selection {
    background-color: #ff3dbb;
    color: white; /* Optional: Change the text color to white when selected */
}

#main-header {
    background-color: #fff;
    padding: 0 2em;
    border-bottom: 1px solid #ddd;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
/* Mobile-specific styles */
@media (max-width: 768px) {
    #main-header  {
        padding: 0 1em; /* Half the padding on mobile devices */
    }
}

.logo {
    max-height: 150px;
}

#hero {
    max-width: 900px;
    color: #fff;
    padding: 200px 10px 0px; /* Adjust for header */
}

#works { max-width: 1700px; }
#works .featured-work-desc {
  position: absolute;
  z-index:  1; 
  padding: 25px;
}

#works a { 
  color: #fff;
  text-decoration: none;
}

#works .image-wrap img {
    width: 100%;  /* Make the images responsive */
    height: auto;  /* Maintain aspect ratio */
    border-radius:  15px;
}

#works .works-item .view-works-link {
  position: absolute;
  z-index: 1;
  margin-top: -60px;
  margin-left: 25px;
  text-transform: uppercase;
  font-weight: 700;
}

#works .works-item .view-works-link:hover {
  border-bottom: 2px solid #fff; /* Color of the underline when hovering */
}

.container {
  max-width: 800px;
  margin:0 auto
}




.cta-text {
  font-weight: 700;
  text-decoration: none; /* Ensure there's no underline by default */
  border-bottom: 2px solid transparent; /* Create a border to animate */
  transition: border-bottom 0.3s ease-in-out; /* Transition for smooth animation */
}

.cta-text:hover {
  border-bottom: 2px solid #fff; /* Color of the underline when hovering */
}



 #services .block-display {padding:  10px; text-align: center;}
 #services .section-icon { max-height: 100px; }

.divider {
  border-top: 1px solid #bfbfdd;
  margin:  50px 0 ; 
}


p {
  font-size: 1.1em;
  font-family: 'Poppins', sans-serif;
  font-weight: 300; /* Regular weight */
  line-height: 160%;
}

#hero p {font-size: 1.4em;}

a {
  color:  #fff;
  font-weight: 600; /* Regular weight */
}

h1{
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat to headings */
    color: #fff; /* Ensure headings are white */
    font-weight: 700; /* Regular weight */
    font-size: 4em;
    line-height: 120%;
}

h2 {
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat to headings */
    color: #fff; /* Ensure headings are white */    
    font-size: 2.5em;
    line-height: 120%;
}

h3 {
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat to headings */
    color: #fff; /* Ensure headings are white */
    font-size: 1.3em;
}

h4 {
    color: #fff; /* Ensure headings are white */
    font-size: 1.1em;
    font-weight: 500; /* Regular weight */
}

section {
    padding: 100px 2em;
    max-width: 1800px;
    margin: 1em auto;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    section {
        padding: 50px 1em; /* Half the padding on mobile devices */
    }
}

footer {
    padding: 50px 2em;
    margin-top: 50px;
    background: #fff;
    color: #ccc;
}
/* Mobile-specific styles */
@media (max-width: 768px) {
    footer {
        padding: 50px 1em; /* Half the padding on mobile devices */
    }
}

header h1, header h2, header h3, header h4, header p, footer h1, footer h2, footer h3, footer h4, footer p {
  color:  black;
}

header {
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Align items vertically in the center */
}

header .logo {
  margin-right: 20px; /* Optional: Adds some space between the logo and book-chat */
}

header .book-chat {
  /* No additional styles needed if it's already aligned to the left */
}



/* Footer links */
.footer-links {
    list-style: none; /* Remove default list bullets */
    padding: 0; /* Remove default padding */
    display: flex; /* Display items in a row */
    margin-top: 2em;
}

.footer-links li {
    position: relative; /* Positioning for the divider */
    padding: 0 20px;
    text-transform: uppercase;
    border-right: 1px solid #bfbfdd; /* Divider between links */
    font-size: .9em;
}

.footer-links li:first-child {
    padding-left: 0; /* Remove left padding on the first item */
}

.footer-links li:last-child {
    border-right: none; /* Remove right border from the last item */
}

.footer-links li a {
    color: #000; /* Set text color to black */
    text-decoration: none; /* Remove underline */
    font-weight: 500; /* Optional: Make text slightly bolder */
}

.footer-links li a:hover {
    color: #333; /* Darker black for hover effect */
}

/* Tablet-specific styles */
@media (max-width: 768px) {
    .footer-links {
        flex-direction: column; /* Stack items vertically */
    }

    .footer-links li {
        padding: 10px 0; /* Adjust padding for vertical layout */
        border-right: none; /* Remove right border for all items */
        border-bottom: 1px solid #bfbfdd; /* Add bottom border instead */
    }

    .footer-links li:first-child {
        padding-top: 0; /* Remove top padding on the first item */
    }

    .footer-links li:last-child {
        border-bottom: none; /* Remove bottom border from the last item */
        padding-bottom: 0; /* Remove bottom padding */
    }
}



.social-icons {
  display: flex;
  gap: 20px; /* Adjust gap as needed */
  justify-content: center; /* Center the icons */
  align-items: center;
}

.social-icons a img {
  display: block; /* Prevents inline spacing issues */
  width: 80px; /* Adjust size as needed */
  height: auto;
}

.social-icons-footer { align-items: left; margin-top: 25px;}
.social-icons-footer a {
    padding-right: 10px; /* Adjust size as needed */
}
.social-icons-footer a img {
    width: 30px; /* Adjust size as needed */
}




/* Full width fixed image section */
.full-width-fixed-image {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: contain;
  width: 100%;
  height: 200px;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1024px) {
  .full-width-fixed-image {
    background-attachment: scroll;
    height: 300px;
    background-size: cover;
    padding:  0;
  }
}



/* Buttons */
/* Base button styles */
.button, a.button, a:active.button, a:link.button, a:visited.button {
    color: #fff;
    font-size: 1em;
    line-height: 1.6;
    font-weight: 600;
    text-decoration: none;
    border: none;
    background-color: #ff0075; /* Fallback solid color */
    background-image: linear-gradient(90deg, #ff0075, #ff3dbb 30%, #ff0075 50%) !important;
    background-image: -webkit-gradient(linear, left top, right top, from(#ff0075), color-stop(30%, #ff3dbb), color-stop(50%, #ff0075));
    background-image: -o-linear-gradient(left, #ff0075, #ff3dbb 30%, #ff0075 50%);
    background-image: linear-gradient(90deg, #ff0075, #ff3dbb 30%, #ff0075 50%);
    padding: 10px 20px;
    border-radius: 4px;  /* Rounded corners */
    display: inline-block;
    -webkit-transition: .7s ease;
    -o-transition: .7s ease;
    transition: .7s ease;
    background-size: 200% auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add slight shadow for 3D effect */
}

/* Button hover effect */
.button:hover, a.button:hover {
    background-position: right center; /* Move the gradient on hover */
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Optional: Enhanced shadow on hover */
}

/* Active button state */
.button:active, a.button:active {
    background-color: #ff0075; /* Keep solid color when active */
    background-image: none; /* Remove gradient on click */
    box-shadow: none; /* Remove shadow on click */
}



/* Grids */
/* 2-Column Grid */
.duk-grid--2-col {
  display: flex; /* Modern Flexbox */
  flex-wrap: wrap; /* Allow items to wrap into multiple rows */
  justify-content: space-evenly; /* Distribute space evenly between columns */
  margin-left: -.75%; /* Adjust left margin */
  margin-right: -.75%; /* Adjust right margin */
}

.duk-grid--2-col > * {
  flex: 1 1 calc(50% - 1.5%); /* Make each item take up 1/2 of the width, with spacing */
  margin: 0 .75%; /* Margin between items for spacing */
  box-sizing: border-box; /* Ensure padding doesn't affect the width */
}

/* 3-Column Grid */
.duk-grid--3-col {
  display: flex; /* Modern Flexbox */
  flex-wrap: wrap; /* Allow items to wrap into multiple rows */
  justify-content: space-evenly; /* Distribute space evenly between columns */
  margin-left: -.75%; /* Adjust left margin */
  margin-right: -.75%; /* Adjust right margin */
}

.duk-grid--3-col > * {
  flex: 1 1 calc(33.333% - 1.5%); /* Make each item take up 1/3rd of the width, with spacing */
  margin: 0 .75%; /* Margin between items for spacing */
  box-sizing: border-box; /* Ensure padding doesn't affect the width */
}

/* 4-Column Grid */
.duk-grid--4-col {
  display: flex; /* Modern Flexbox */
  flex-wrap: wrap; /* Allow items to wrap into multiple rows */
  justify-content: space-evenly; /* Distribute space evenly between columns */
  margin-left: -.75%; /* Adjust left margin */
  margin-right: -.75%; /* Adjust right margin */
}

.duk-grid--4-col > * {
  flex: 1 1 calc(25% - 1.5%); /* Make each item take up 1/4th of the width, with spacing */
  margin: 0 .75%; /* Margin between items for spacing */
  box-sizing: border-box; /* Ensure padding doesn't affect the width */
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .duk-grid--2-col > * {
    flex: 1 1 100%; /* Stack items in a single column */
  }

  .duk-grid--3-col > * {
    flex: 1 1 100%; /* Stack items in a single column */
  }

  .duk-grid--4-col > * {
    flex: 1 1 100%; /* Stack items in a single column */
  }
}

/* Tablet adjustments (768px to 1024px) */
@media (max-width: 1024px) {
  .duk-grid--2-col > * {
    flex: 1 1 calc(50% - 1.5%); /* Two columns for tablets */
  }

  .duk-grid--3-col > * {
    flex: 1 1 calc(50% - 1.5%); /* Two columns for tablets */
  }

  .duk-grid--4-col > * {
    flex: 1 1 calc(50% - 1.5%); /* Two columns for tablets */
  }
}

/* Mobile adjustments (for very small screens under 480px) */
@media (max-width: 480px) {
  .duk-grid--2-col > * {
    flex: 1 1 100%; /* Stack items in a single column for very small screens */
  }

  .duk-grid--3-col > * {
    flex: 1 1 100%; /* Stack items in a single column for very small screens */
  }

  .duk-grid--4-col > * {
    flex: 1 1 100%; /* Stack items in a single column for very small screens */
  }
}