.swal2-html-container a{
    color: #0080C4;
}

.swal2-success .swal2-success-line-tip, 
.swal2-success .swal2-success-line-long{
    background-color: #0080C4 !important;
}

.swal2-success .swal2-success-ring{
    border: .25em solid #cae2ef !important;
}

.swal2-actions button.swal2-default-outline:focus{
    box-shadow: 0 0 0 3px #ffd0c5;
}

@media (min-width: 769px) {
    .techsaverfx .key,
    .techsaverfx .key2{
        height: 130px !important;
    }
}
@media (min-width: 768px) and (max-width: 1000px) {
    .key-1 {
        height: 280px;
    }
}

@media (min-width: 1280px){
    .key-1 {
        height: 160px;
    }
}
.techsaverfx-button .section-wrapper{
    margin: 0;
    padding: 0;
}

.techsaverfx-2 .cf-list ul li {
    padding-left: 0.4rem;
    padding-right: 3rem;
}

.techsaverfx-2 .cf3-flex{
    margin-top: 10px;
}

.techsaverfx-1 .lessPadding{
    padding: 0.5rem;
    padding-left: 2rem;
}
.techsaverfx-1 .lessPadding.inner h2{
    margin-bottom: 0.5rem;
}

.techsaverfx-1 .SinglePanelFlex{
    margin: 0;
}

.techsaverfx-3 .support{
    padding-bottom: 0;
}

.techsaverfx-button .section{
    padding-top: 0;
}

.techsaverfx-1 .video-container iframe{
    margin-top: 2rem;
    width: 100%;
    height: 100%;
}

.custom-demo-menu {
    background: #0080C4;
    text-align: center;
    color: #FFFFFF !important;
    /* padding: 14px 25px 12px; */
    border-radius: 30px;
    display: inline-block;
    line-height: 1.0;
    transition-duration: 0.4s;
    margin: 0.5rem 5px;
}
.custom-demo-menu:hover {
    color: #FFFFFF !important;
    box-shadow: 0px 2px 30px 0 #97B1BF;
}
.nav-item:has(.custom-demo-menu):hover {
    box-shadow: inset 0px -3px 0px #ED6542;
}
.nav-link.custom-demo-menu:focus, .nav-link.custom-demo-menu:hover{
  color: #fff !important;
}

.custom-demo-menu.partner{
  background: #ED6542;
}

.nav-item:has(.custom-demo-menu.partner):hover {
  box-shadow: inset 0px -3px 0px #0080C4;
}

.header{
  padding: 0 60px;
}

/* Style for the "Return to Top" button */
#return-to-top {
    position: fixed;
      bottom: 30px;
      right: 20px;
      background-color: #0080C4;
      color: white;
      font-size: 18px;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: none; /* Hidden by default */
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      transition: opacity 0.3s ease;
      z-index: 9999999;
  }

  #return-to-top:hover {
    background-color: #ED6542;
  }

  #return-to-top i {
    line-height: 50px;
    font-size: 30px;
  }

  /*adding css for UI changes*/
  #carouselExampleIndicators.slide {
    border: none !important;
    border-radius: 10px !important;
    padding: 0rem !important;
  }

  #carouselExampleIndicators.slide:hover {
    transform: none !important;
  }
  .carousel-item img {
    object-fit: cover; /* Ensures the image covers the carousel item without distortion */
  }
  #bannerSection .carousel.slide {
    width: 100% !important;
  }

  /* Flexbox Layout for Row */
  #bannerSection.banner-mt100 .row {
    /*height: 100%; /* Ensure the row stretches to full height */
    display: flex;
    align-items: flex-start; /* Ensure top alignment */
  }

  /* Left Column (col-lg-5) */
  #bannerSection.banner-mt100 .col-lg-5 {
    margin-top: -70px;
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-start; /* Align content to the top */
    align-items: flex-start; /* Align items to the left */
    height: auto; /* Allow height to be dynamic */
  }

  /* Right Column (Carousel) - col-lg-7 */
  #bannerSection.banner-mt100 .col-lg-12 {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-start; /* Align content to the top */
    align-items: flex-start; /* Align items to the left */
    height: auto; /* Allow height to be dynamic */
  }

  /* Ensure the carousel item images cover the entire container */
  #bannerSection.banner-mt100 .carousel-item {
    height: 100%;  /* Ensure each carousel item fills the container's height */
    position: relative;  /* Required for smooth transition */
    z-index: 1;  /* Ensures proper stacking of items */
    background-color: transparent; /* Prevents any unwanted background */
  }

  /* Carousel Image Styling */
  #bannerSection.banner-mt100 .carousel-item img {
    transition: none !important;  /* Disable any transition effect */
    transform: none !important;   /* Disable any zoom/scale effect */
    border: none !important;      /* Remove borders */
    object-fit: cover;            /* Keeps the object-fit for consistency */
    height: 100%;                 /* Ensures images fill the carousel's height */
    width: 100%; /* Ensure images fill the carousel item's width */
    background-color: transparent; /* Prevents any background from showing */
  }

  /* Smooth transition between carousel items */
  #bannerSection.banner-mt100 .carousel-item-next,
  #bannerSection.banner-mt100 .carousel-item-prev,
  #bannerSection.banner-mt100 .carousel-item.active {
    transition: transform 0.6s ease-in-out !important; /* Maintain the sliding effect */
  }

  #bannerSection.banner-mt100 .carousel-item img:hover {
    transform: none !important; /* Removes any zoom effect on hover */
  }

  /* Ensure Carousel Inner Stretches to Full Height */
  #bannerSection.banner-mt100 .carousel-inner {
    height: auto !important; /* Ensure the carousel inner has full height */
    background-color: transparent !important; /* Remove any background color */
    overflow: hidden !important; /* Prevents any overflow of content */
    transition: transform 0.6s ease-in-out; /* Retain the transform transition for sliding */
  }

  /* Carousel Control Icons (Previous & Next) */
  #bannerSection.banner-mt100 .carousel-control-prev-icon,
  #bannerSection.banner-mt100 .carousel-control-next-icon {
    background-color: black; /* Makes control icons more visible */
  }

  /* Max height for the first row */
  #bannerSection .carousel.d-flex {
    max-height: 600px !important; /* Set your desired max height */
    overflow: hidden !important; /* Hide overflowing content */
    display: flex !important; /* Ensure flexbox layout is applied */
    align-items: stretch !important; /* Stretch columns to match row height */
  }

  /* Adjust column content to fit */
  #bannerSection .col-lg-5,
  #bannerSection .col-lg-12 {
    height: 100% !important; /* Make columns fill the row height */
    /*overflow-y: auto !important; /* Enable scrolling if content overflows */
  }

  /* Carousel height adjustment */
  #carouselExampleIndicators {
    height: 100% !important; /* Fill parent height */
  }

  .custom-indicators {
    margin-bottom: 3rem !important;
  }

  /* Carousel images fit within the height */
  #carouselExampleIndicators .carousel-inner img {
    max-height: 100% !important; /* Constrain image height */
    object-fit: cover !important; /* Ensure images scale properly */
  }

  /*CSS for four blocks under main banner on dashboard*/
  /* Add margin between the two rows */
  #bannerSection.banner-mt100 .block-row {
    padding: 25px 0;  /* Adds padding to the blocks row */
    margin-top: 10px;  /* Adds space between the first row and the second row */
    background-color: #fff;  /* Light Blue background for the second row */
  }

  /* Styling for the individual blocks */
  .block {
    position: relative; /* Enables positioning context for children */
    cursor: pointer; /* Make the block appear clickable */
    border: 1px solid #ddd; /* Block border */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Padding inside the block */
    height: 130px; /* Adjust block height as needed */
    overflow: hidden; /* Prevent content overflow */
  }

  .block .content{
    position: absolute;
  }

  .block .image-wrapper{
    position: relative;
    float: right;
    height: 100%;
    right: -15px;
    top: 15px;
  }

  #dashboardBannerBlocks.block:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Add a hover effect */
  }

  /* Image styling inside each block */
  #dashboardBannerBlocks.block img {
    max-width: 120px;  /* Ensure image width doesn't exceed 120px */
    object-fit: cover;  /* Ensures the image covers the given space without distortion */
    height: 100%;  /* Makes the image fill the block height */
    border-radius: 10px;  /* Ensures the image has rounded corners */
  }

  /* Optional: Add a hover effect for blocks */
  #dashboardBannerBlocks.block:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Adds a subtle shadow effect on hover */
  }

  .row.block-row .col-lg-3 .block img {
    border-top-right-radius: 15px !important; /* Rounds the top-right corner */
  }

  /* Position the image at the top-right corner and round its corners */
  #bannerSection.banner-mt100 .row.block-row .col-lg-3 .block img {
    position: absolute;
    top: 10px;  /* Adjust to control vertical position */
    right: 10px; /* Adjust to control horizontal position */
    width: 65px;  /* Adjust the size of the image */
    height: 65px; /* Adjust the size of the image */
    border-radius: 50%; /* Makes the image rounded */
    object-fit: cover; /* Ensures the image covers the space within the rounded frame */
    border: 3px solid #fff; /* Optional: Adds a border around the image */
  }

  /* Styling for the content section */
  #bannerSection.banner-mt100 .row.block-row .col-lg-3 .block .content {
    padding-right: 80px; /* Ensures content doesn't overlap the image */
  }

  /* Keep the original styles for the block layout */
  #bannerSection.banner-mt100 .row.block-row .col-lg-3 .block {
    position: relative;
    padding-top: 20px; /* Adds space for the image in the top-right corner */
    height: 170px; /* Ensure the block container has a fixed height */
    overflow: hidden; /* Hide the part of the image wrapper that sticks out */
  }

/* Add a wrapper around the image to create the outer circle with white background */
#bannerSection.banner-mt100 .row.block-row .col-lg-3 .block .image-wrapper {
  position: absolute; /* Allows free placement inside the block */
  top: -20px; /* Move upward to intersect the top border */
  right: -20px; /* Move rightward to intersect the right border */
  width: 90px; /* Set size of the wrapper */
  height: 90px; /* Set size of the wrapper */
  border-radius: 50%; /* Makes the wrapper circular */
  background-color: #fff; /* Background for the wrapper */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
  display: flex;
  justify-content: center;
  align-items: center; /* Center the image inside the wrapper */
  border: 3px solid #ddd; /* Optional border around the wrapper */
}

.carousel-item video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video scales properly */
}



/* Styling for the image inside the wrapper */
#bannerSection.banner-mt100 .row.block-row .col-lg-3 .block .image-wrapper img {
  width: 100%; /* Fit the image inside the wrapper */
  height: 100%; /* Fit the image inside the wrapper */
  object-fit: cover; /* Maintain the image aspect ratio */
  border-radius: 50%; /* Ensure the image is circular */
}

/*END - CSS for four blocks under main banner on dashboard*/

#bannerSection.mt10px {
  margin-top: 10px !important;
}

.circular-border {
  border-radius: 30px;
}

/* Shift clicked block to the first position */

/* Highlight the clicked block */
.block.highlighted {
  border: none !important;
  box-shadow: none !important;
  background-color: #F5F5F5;
}

.row-highlighted {
  border: 2px solid #89CFF0; /* Highlight color */
  border-radius: 10px; /* Optional: Add rounded corners */
  /*background-color: #89CFF0 !important; */
}

/* Styling for dynamic content */
#dynamicContentContainer {
  display: block;
  background-color: #f5f5f5;
  border-radius: 10px; /* Rounded corners */
  z-index: 1000; /* Ensure it's above other elements */
  padding: 0 20px;
  width: 99%;
  margin-top: 20px;
  margin-left: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 0; /* Start collapsed */
  opacity: 0; /* Start invisible */
  overflow: hidden; /* Hide the content when collapsed */
  transition: max-height 0.5s ease-out, opacity 0.3s ease-in-out;
}

/* When the dynamic content is visible, set max-height to a large value and opacity to 1 */
#dynamicContentContainer.show {
  max-height: 500px; /* Or any large value */
  opacity: 1;
  padding-top: 20px;
  margin-bottom: 20px;
}

/* Keyframes for animations */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Animation classes */
.slide-in-left {
  animation: slideInLeft 1s ease-out forwards;
}

.slide-in-right {
  animation: slideInRight 1s ease-out forwards;
}

.slide-in-bottom {
  animation: slideInBottom 1s ease-out forwards;
}

/* Dynamic content styling */
.description p {
  margin: 10px 0;
}

.dynamic-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.dynamic-row .content-column {
  flex: 2; /* Larger portion for text */
  padding-right: 20px;
}

#dynamicContentContainer .content-column h3,
#dynamicContentContainer .content-column p {
  margin: 10px 0;
}

.dynamic-row .image-column {
  flex: 1; /* Smaller portion for image */
  display: flex;
  justify-content: center;
  align-items: center;
}

#dynamicContentContainer .image-column img {
  width: 220px;  /* Fixed width */
  height: 200px;  /* Fixed height */
  object-fit: cover; /* Ensures image covers the area without distortion */
  transition: transform 0.5s ease-in-out;
}

.dynamic-footer {
  text-align: center;
  font-size: 1rem;
  padding: 15px;
  background-color: #a0a0a0;
  color: #ffffff;
  margin-top: 20px;
  font-weight: bold;
}

/* Palm icon styles */
.palm-icon {
  position: fixed;
  top: -12px; /* Align to bottom */
  right: 20px; /* Align to right */
  font-size: 24px;
  color: #007bff;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
}

.block:hover .palm-icon {
  opacity: 1; /* Show palm icon on hover */
}

.carousel-indicators [data-bs-target] {
  background-color: #0080C4;
}

button.carousel-control-prev,
button.carousel-control-next{
  display: none;
}

/*CSS for testimonial section*/
#testimonialSection {
  /* padding: 50px 0 !important; */
  height: auto !important;
  /* margin-bottom: 10px !important; */
  border-radius: 10px !important;
}

#testimonialSection .testimonial-slider .testimonial-item {
  display: flex !important;
  justify-content: space-between !important;
}

#testimonialSection .testimonial-block {
  background-color: #ffffff !important;
  border: 2px solid #ddd !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  padding: 20px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  /*height: 100% !important;*/
  height: 400px !important;
  max-width: 100%;
  margin-bottom: 10px !important; /* Adds margin to avoid touching the bottom */
}

#testimonialSection .testimonials-wrap{
  width: 90%;
}

#testimonialSection .testimonial-custom-icon {
  font-size: 32px !important;
  color: #007bff !important;
  margin-bottom: 15px !important;
}

#testimonialSection .testimonial-message {
  font-size: 16px !important;
  font-style: italic !important;
  color: #333 !important;
  /*margin-bottom: 10px !important;*/
  flex-grow: 1 !important;
}

#testimonialSection .testimonial-company-name {
  font-weight: bold !important;
  font-size: 18px !important;
  margin-bottom: 20px !important;
}

#testimonialSection .testimonial-user-image {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  margin-right: 10px !important;
  border: 2px solid white !important;
}

#testimonialSection .testimonial-user-name {
  font-weight: bold !important;
  font-size: 16px !important;
  margin: 0 !important;
}

#testimonialSection .testimonial-user-occupation {
  font-size: 14px !important;
  color: #000 !important;
  margin: 0 !important;
}

.testimonial-footer {
  display: flex;
  background-color: #E9FCE9 !important;
  justify-content: flex-start; /* Ensures user info and image are left-aligned */
  align-items: center;
  padding: 10px !important;
  border-radius: 0 0 10px 10px !important;
  margin-top: 10px;
}

.testimonial-footer .testimonial-button {
  background-color: #fff; /* Button background color */
  color: black; /* Text color */
  border: 1px;
  padding: 8px 16px; /* Adds padding to the button */
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  margin-left: auto; /* Pushes the button to the far right */
  display: inline-flex; /* Groups the text and icon together */
  align-items: center; /* Centers text and icon vertically */
  border-radius: 5px; /* Optional: Makes the button corners rounded */
}

.testimonial-footer .testimonial-button .button-text {
  margin-right: 8px; /* Adds space between the text and the icon */
}

.testimonial-footer .testimonial-button:hover {
  background-color: #0080C4; /* Darker blue when hovered */
  transform: scale(1.05); /* Slight scale effect on hover */
  color:#fff;
}

.testimonial-footer .testimonial-button i {
  font-size: 20px; /* Adjust icon size if needed */
}


/* Override Bootstrap's transform and transition on hover for .carousel-item */
.carousel-item:hover, 
.testimonial-block:hover {
  transform: none !important; /* Disable the scale */
  transition: none !important; /* Remove transition effects */
}

/* Ensure that hover effects on the parent row are also disabled */
.testimonial-row:hover .testimonial-block {
  transform: none !important; /* Disable scale on hover */
  transition: none !important; /* Remove transition */
}

/* Optional: If you specifically want to target only the slider container */
#testimonialSection .carousel-inner:hover .carousel-item {
  transform: none !important; /* Disable scaling on hover for carousel items */
  transition: none !important; /* Remove transition */
}

/* Carousel layout settings */
/*#testimonialSection .carousel-inner {
  display: flex !important;
  flex-wrap: nowrap !important;
}*/

#testimonialSection .testimonial-item {
  flex: 0 0 auto !important; /* Ensure no shrinking */
  width: 100% !important; /* Three testimonials per row */
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: space-between !important;
  padding: 0 15px !important; /* Add space between the items */
}

.testimonial-heading {
  text-align: left !important;
  margin-left: 18px !important;
}

.testimonial-heading h2 {
  font-size: 2rem !important; /* Adjust the size */
  font-weight: bold !important;
  color: #333 !important; /* Change to the desired color */
  letter-spacing: 2px !important; /* Optional */
}

/* Slick Slider Default Styles */
.testimonial-slider .slick-slide {
  padding: 10px;
}
.testimonial-slider .slick-prev, .testimonial-slider .slick-next {
  background-color: #000;
  color: #fff;
}

@media (max-width: 480px) { 
  #testimonialSection .testimonial-message {
    font-size: 12px !important;
  }
}

.slick-dots {
  bottom: 10px;
}

.resources .nav-tabs .nav-link.active,
.resources .nav-tabs .nav-link:focus, 
.resources .nav-tabs .nav-link:hover {
    border-bottom: 2px solid #ecfafd;
}

.template-container {
  width: 850px;
  background: white;
  border: 1px solid #e0e0e0;
  margin: 30px auto;
  position: relative;
  overflow: hidden;
}

/* Green top-left decorative shape */
.top-graphic {
  position: absolute;
  width: 175px;
  height: 100%;
  background: #1C75BC;
  border-bottom-right-radius: 30px;
  top: 0;
  left: 0;
  z-index: 1;
  border-top-right-radius: 120px;
}

.higher .top-graphic{
  background: #ED6542;
}

.lower .top-graphic{
  background: #ccdfee;
}

.content-wrapper {
  display: flex;
  padding: 60px 5px;
  position: relative;
  z-index: 2;
  align-items: flex-start;
  padding-right: 50px;
}

/* Profile circle */
.profile-section {
  width: 35%;
  display: flex;
  justify-content: center;
}

.profile-circle {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 8px solid #ED6542;
  overflow: hidden;
}

.higher .profile-circle {
  border-color: #1C75BC;
}

.profile-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right text side */
.text-section {
  width: 65%;
  padding-left: 20px;
  position: relative;
}

/* Logo */
.logo img {
  width: 110px;
  float: right;
  margin-bottom: 15px;
}

/* Quote */
.quote {
  margin-top: 20px;
  font-size: 20px;
  line-height: 1.5;
  color: #333;
  position: relative;
}

.quote-mark {
  font-size: 36px;
  color: #1C75BC;
  font-weight: bold;
}

.higher .quote-mark {
  color: #ED6542;
}

.lower .quote-mark {
  color: #ccdfee;
}

.quote p {
  margin: 10px 0;
}

.quote .closing {
  display: block;
  text-align: right;
}

/* Footer name */
.author h3 {
  margin: 20px 0 5px;
  font-size: 22px;
  color: #333;
}

.author p {
  margin: 0;
  font-size: 16px;
  color: #555;
}

.captcha-image{
    width: 150px;
    height: 38px;
    border: 0;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    color: #555;
    letter-spacing: 1px;
    user-select: none;
}

/* -------------------------------------- */
/*        🌟 RESPONSIVE BREAKPOINTS       */
/* -------------------------------------- */
@media (max-width: 1800px) {
    .template-container {
        width: 48%;
    }

    .profile-circle {
        width: 220px;
        height: 220px;
    }

    .profile-section{
        width: 40%;
    }

    .text-section{
      width: 60%;
    }

    .top-graphic{
      width: 25%;
    }
}

@media (max-width: 1280px) {
    .profile-circle {
        width: 200px;
        height: 200px;
    }
}

/* Tablets */
@media (max-width: 1024px) {

    .content-wrapper {
        padding: 40px 30px;
        flex-direction: column;
        text-align: left;
        display: -webkit-inline-box;
    }

    .logo img {
        float: none;
        margin: 0 auto 20px;
        display: block;
    }

    .quote p{
        font-size: 16px;
    }

    .profile-circle {
        width: 150px;
        height: 150px;
    }

    .profile-section{
        width: 35%;
    }

    .text-section{
      width: 65%;
    }
}

@media (max-width: 950px) {
    .template-container {
        width: 750px;
    }

    .content-wrapper {
        padding: 40px 30px;
        flex-direction: column;
        text-align: left;
        display: -webkit-inline-box;
    }

    .logo img {
        float: none;
        margin: 0 auto 20px;
        display: block;
    }

    .profile-circle {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 720px) {

    .content-wrapper {
        padding: 40px 0;
        flex-direction: column;
        text-align: left;
        display: -webkit-inline-box;
    }

    .logo img {
        float: none;
        margin: 0 auto 20px;
        display: block;
    }

    .quote p{
        font-size: 13px;
    }

    .profile-circle {
        width: 180px;
        height: 180px;
    }

    .top-graphic{
      width: 20%;
    }
    
    .author h3{
      margin: 0;
      font-size: 18px;
    }

    .author p{
      font-size: 13px;
    }
}

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

    .top-graphic {
        width: 80%;
        height: 130px;
        border-bottom-right-radius: 50px;
    }

    .content-wrapper {
        padding: 35px 20px;
        display: flex;
        text-align: center;
    }

    .profile-circle {
        width: 180px;
        height: 180px;
    }

    .profile-section{
        width: 100%;
    }

    .quote{
        margin-top: 0;
        text-align: left;
    }

    .quote p {
        text-align: center;
    }

    .text-section{
      width: 100%;
    }

    .author h3 {
        font-size: 20px;
    }
}

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

    .template-container {
        margin-top: 0;
    }

    .content-wrapper {
        padding: 25px 15px;
        display: flex;
    }

    .profile-section{
        width: 100%;
    }

    .profile-circle {
        width: 160px;
        height: 160px;
    }

    .quote {
        font-size: 15px;
    }

    .quote{
        margin-top: 0;
        text-align: left;
    }

    .quote p {
        text-align: center;
    }

    .logo img {
        width: 90px;
    }

    .text-section{
      width: 100%;
    }

    .top-graphic{
      width: 80%;
      height: 100px;
    }
}