/* ********************************************************************* */
/* Customiz */
/* : Defines CSS variables for primary colors to be used throughout the stylesheet. */
:root {
  --primary-color: #ecebeb;
  --border-color: #070775;
  --light-blue-color: #007bff;
}

/* @keyframes fadeIn: Defines an animation that gradually increases the opacity from 0 to 1. */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* #gradient: Ensures the element with ID gradient takes full width with no margin. */
#gradient {
  width: 100%;
  margin: 0px;
}

/* .btn: Styles buttons with padding, background color, text color, border, and border radius. */
.btn {
  padding: 0.3rem 0.6rem;
  /* padding */
  background-color: var(--light-blue-color);
  /* background color */
  color: white;
  /* text color */
  border: 1px solid transparent;
  /* border */
  border-radius: 0.25rem;
  /* border radius */
  cursor: pointer;
  /* Cursor style */
  transition: 0.3s ease-in-out;
}

/* : Changes the button background color on hover. */
.btn:hover {
  color: white;
  background-color: var(--border-color);
}

/* **************************************************************** */
/* Resets margin and padding, sets box-sizing to border-box, and applies a default font. */
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

/* Enables smooth scrolling behavior for the webpage. */
html {
  scroll-behavior: smooth;
}

/* Applies a specific font to all heading elements. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
}

/* Removes text decoration from links and inherits the text color. */
a {
  text-decoration: none;
  color: inherit;
}

/* a:hover {
    color: var(--border-color);
} */

/* Sets the background of the header to transparent. */
header {
  background-color: transparent;
}

/* ****************************************************************************************************************************** */
/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: center;
  /* Horizontally center the content */
  align-items: center;
  /* Vertically center the content */
  z-index: 2;
}

#preloader img {
  display: block;
  margin: auto;
  /* Center horizontally */
}

/* ************************************************************************************************************** */
/* Home-Page */
/*Navbar*/
nav {
  width: 100%;
  height: 4rem;
  display: flex;
  justify-content: flex-end;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px 5%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* Optional: Add a subtle box-shadow for depth */
  /*background-color: rgba(255, 255, 255, 0.5);*/
  transition: top 0.9s;
  /* Add smooth transition effect to the 'top' property */
  z-index: 1000;
}

/* ******************* */
/*Logo-navBarda yaobado Home-page*/
.logo_companyname {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.logo_homePage {
  width: 40px;
  height: auto;
  margin-right: 5px;
}

.logo_companyname_link {
  display: flex;
  text-decoration: none;
  align-items: center;
  color: black;
}

.ortalLogo,
.raLogo {
  font-size: 21px;
}

#sidebar-active,
.open-sidebar-button,
.close-sidebar-button {
  display: none;
}

.links-container {
  width: 100%;
  flex-direction: row;
  height: 100%;
  align-items: center;
}

nav ul li {
  display: inline-block;
  margin: 10px 15px;
  font-weight: 500;
  cursor: pointer;
}

nav ul li a {
  position: relative;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: black;
  font-weight: bold;
  /* Add smooth transition effect to link color */
}

nav ul li a:after {
  content: "";
  position: absolute;
  background-color: #ff3c78;
  height: 3px;
  width: 0;
  left: 0;
  bottom: -10px;
  transition: 0.3s;
}

nav ul li a:hover {
  color: #37b7c3;
}

nav ul li a:hover:after {
  width: 100%;
}

/* Hide the navbar when scrolling down */
nav.hidden {
  top: -60px;
  /* Adjust this value based on your navbar's height */
}

/* ******************************************************************************************************* */
/*Login*/
/* .login_signin {
    justify-content: space-between;
    text-align: center;
}

.login,
.signin {
    padding: 2px 10px;
    gap: 50px;
    font-size: 15px;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    background-color: #3498db;
    /* Choose a suitable background color */
/* color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
    /* Add a smooth transition effect on hover */
/* } */

/* .login {
    margin-right: 15px;
} */

/* .login:hover,
.signin:hover {
    background-color: #2980b9;
    /* Change to a slightly different shade on hover */
/* } */

/* Add padding to the content to prevent it from being overlapped by the fixed navbar */
/* main {
    padding-top: 70px; /*Adjust this value based on your navbar's height*/
/*} */

/* ******************************************************************************* */
/* Carousel Home-Page*/
.carousel01-tumba {
  height: 100vh;
  padding: 0 10%;
  position: relative;
  margin: auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 1;
}

.slide {
  display: flex;
  /* padding-top: 20%; */
  transition: transform 0.5s ease-in-out;
}

.slide-item {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
}

.ahanba {
  text-align: center;
}

/*companygi maming home pageta yaobado*/
.chaohanbi,
.yaimarak,
.atomba {
  font-size: 9vw;
  line-height: 7vw;
}

/*ProtalEra haina semba designdugine*/
.ortal1,
.ra1,
.ortal2,
.ra2 {
  font-size: 7.5vw;
  line-height: 7vw;
}

/*tagline home page ta yaobado*/
.tagLine {
  font-weight: lighter;
}

.ahumsuba {
  text-align: right;
}

/*Next amasung Previous kine sina*/
.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  background-color: #3498db;
  color: #fff;
  outline: none;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/*menu icon hide*/
.menu-icon {
  display: none;
}

/* ****************************** */
/* Intorduction Home-Page*/
.header-container-home-welcome {
  display: flex;
  flex-wrap: wrap;
  /* Allow sections to wrap on smaller screens */
  padding: 3% 10% 0 10%;
  background-color: var(--primary-color);
}

.left-section-home-welcome {
  flex: 1;
  /* One third of the width */
  padding: 20px;
  border-radius: 20px 0 0 20px;
  overflow: hidden;
  /* Clip border radius */
  background-color: white;
  /* White background */
  box-shadow: -40px 0 50px rgba(0, 0, 0, 0.3);
  /* Box shadow for depth */
  margin-bottom: 20px;
  /* Add space between sections */
  align-content: center;
}

.left-section-home-welcome img {
  width: 100%;
  /* Make image fill the container */
  height: auto;
  /* Maintain aspect ratio */
  border-radius: 20px;
  /* Apply border radius to image */
}

.right-section-home-welcome {
  flex: 2;
  /* Right section occupies 2/3 of the container */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Vertically center content */
  align-items: flex-start;
  /* Align content to the start (left) */
  text-align: justify;
  padding: 20px;
  background-color: white;
  /* White background */
  border-radius: 0 20px 20px 0;
  box-shadow: 40px 0px 40px rgba(0, 0, 0, 0.4);
  /* Box shadow for depth */
  margin-bottom: 20px;
  /* Add space between sections */
}

.right-section-home-welcome h1 {
  font-weight: bold;
  font-size: 24px;
  color: black;
  /* Dark text color */
}

.right-section-home-welcome h4 {
  font-weight: lighter;
  font-size: small;
  margin-bottom: 10px;
}

.paragraph-home-welcome {
  font-size: 16px;
  line-height: 1.6;
  color: #050000;
  /* Medium text color */
  max-height: calc(1.6em * 10);
  /* Set max height for 10 lines */
  overflow: hidden;
  /* Hide overflow content */
  margin-bottom: 20px;
  /* Add space between sections */
  transition: max-height 1s ease;
  /* Transition for expanding and collapsing */
}

.paragraph-home-welcome.expanded {
  max-height: 28rem;
  /* A large enough height to ensure the paragraph fully expands */
}

div.right-section-home-welcome button {
  width: 10rem;
  height: 3rem;
}

/* ************************************************/
/* Mission Container */
.our-mission-container {
  display: flex;
  flex-wrap: wrap;
  /* Allow flex items to wrap to the next row */
  background: var(--primary-color);
  padding: 0 9%;
}

.missiongee-jaga {
  background-color: white;
  border: none;
  border-radius: 10px;
  padding: 5% 5%;
}

.mission-matangda-eba {
  font-size: large;
  text-align: justify;
  /*Fontr size khitang chaohanbane*/
}

.our-mission-container-img img {
  width: 20rem;
  /* Set the width of the image to 40 pixels */
  height: 20rem;
  /* Set the height of the image to 40 pixels */
  border: none;
  border-radius: 5%;
}

/* Column */
.our-mission-container > div:nth-child(1),
.our-mission-container > div:nth-child(2),
.our-mission-container > div:nth-child(3),
.our-mission-container > div:nth-child(4) {
  flex: 1 1 calc(50% - 20px);
  /* Set width to 50% with some margin */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Center the content vertically */
  margin: 10px;
  /* Add margin for spacing */
}

/* Style for the mission text */
.mission-ming {
  margin-bottom: 10px;
}

.mission-matangda-eba {
  margin-top: 0;
}

/* ***************************************** */
/*Images Slider Home page*/
.collection {
  height: 85svh;
  /* background-image: linear-gradient(to top right, #8B5CF6, #EC4899); */
  background-color: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.our-service-text-image-slider {
  text-align: center;
}

.collection .swiper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.collection .content {
  height: 28rem;
  width: 25rem;
  background-color: #1b1f2a;
  border: 0.2rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.7rem;
  border-bottom: 0.4rem solid #0099ff;
  border-top: 0.4rem solid #0099ff;
  overflow: hidden;
  /* padding: .2rem; */
}

.content img {
  width: 50%;
  /* Corrected width property */
  border-bottom-left-radius: 0.6rem;
  border-bottom-right-radius: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
  /* Center the image */
}

.text-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
}

.text-content h3 {
  font-size: 1.7rem;
  font-weight: 500;
}

.text-content p {
  max-width: 22rem;
  font-size: 0.8rem;
  font-weight: 400;
  text-align: center;
}

.btn-home-image-slider {
  background-color: #0099ff;
  padding: 0.2rem;
  border: 2px solid #0099ff;
  outline: none;
  font-size: 0.9rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
  cursor: pointer;
  color: white;
}

/* ****************************************************************** */
/* Footer Styles */
.portalera-footer {
  display: flex;
  flex-direction: column;
  background-color: #040535;
  color: #e5e1da;
  padding: 1rem 3rem;
  border-radius: 0.3rem;
}

.footer-row,
.footer-row-social-media {
  display: flex;
  justify-content: space-between;
}

/* 1st Row */
.footer-row a {
  color: white;
  /* Set link color to white */
  text-decoration: none;
  /* Remove underline */
}

.footer-row ul {
  list-style: none;
  /* Remove list style */
}

.footer-row a:hover {
  padding: 1px 10px 1px 10px;
  background-color: #007bff;
  border-radius: 5px;
  /* Add underline on hover */
}

.site-navigation {
  text-align: right;
}

/* 2nd Row */
.social-media,
.newsletter-signup,
.back-to-top {
  padding-top: 1rem;
}

.portalera-footer .social-icon {
  flex: 1;
  /* Distribute available space equally among icons */
  margin-right: 2rem;
  /* Adjust the margin between icons */
}

.portalera-footer .social-icon:last-child {
  margin-right: 0;
  /* Remove margin from the last icon */
}

.portalera-footer .social-icon img {
  width: 2rem;
  /* Make the image cover the entire space of its parent */
  height: auto;
  /* Maintain aspect ratio */
}

.portalera-footer .newsletter-signup input[type="email"] {
  padding: 10px;
  width: 16rem;
  margin-right: 10px;
  border: 1px solid #fff;
  /* Set border color to white */
  border-radius: 0.5rem;
  background-color: transparent;
  /* Make background transparent */
  color: white;
  /* Set user input email text color to white */
}

.newsletter-signup input[type="email"]::placeholder {
  color: #999;
  /* Change placeholder text color to your desired color */
}

.portalera-footer .newsletter-signup button {
  padding: 10px 20px;
  background-color: #fff;
  color: #040535;
  border: none;
  cursor: pointer;
  border-radius: 0.5rem;
}

.portalera-footer .newsletter-signup button:hover {
  background-color: #0056b3;
}

.back-to-top {
  color: #fff;
  border: none;
  cursor: pointer;
  text-align: right;
  /* Align the button to the right */
}

/* 3rd Row */
.footer-row-last {
  display: flex;
  justify-content: center;
  /* Align content horizontally to the center */
  align-items: flex-end;
  /* Align content vertically to the bottom */
  flex-wrap: wrap;
  /* Allow items to wrap */
  padding: 1rem 0 0 0;
}

.privacy-policy,
.copyright-info {
  width: 100%;
  /* Ensure full width */
  text-align: center;
  /* Align content to the center */
}

.portalera-footer .privacy-policy a,
.portalera-footer .copyright-info p {
  color: white;
  /* Set link color to white */
  text-decoration: none;
  /* Remove underline */
  font-size: small;
}

.portalera-footer .privacy-policy a:hover,
.portalera-footer .copyright-info a:hover {
  text-decoration: underline;
  /* Add underline on hover */
}

/* Adjust column widths as needed */
.social-media,
.newsletter-signup,
.back-to-top,
.footer-our-service,
.contact-information,
.site-navigation {
  width: 30%;
  /* Three columns in each row */
}

.contact-information a:hover {
  /* Remove hover effect for links within .contact-information */
  background-color: #040535;
  /* Use the default color inherited from the parent */
  text-decoration: underline;
  /* Add underline on hover */
  padding: 0;
}

/* Additional styling for individual columns */

/* ************************************************************************ */
/* About ki CCC  */
/* Laptana Chenbi Scroller */
/*ProtalEra haina semba designdugine*/
.about-section-laptanachenbi {
  background-color: var(--primary-color);
}

.about-chaohanbi {
  font-size: 4.2vw;
  line-height: 3.5vw;
}

.about-ortal1,
.about-ra1 {
  font-size: 3.5vw;
  line-height: 3vw;
}

.laptanachenbi {
  max-width: 100%;
}

.laptanachenbi_manung {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.laptanachenbi[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.laptanachenbi[data-animated="true"] .laptanachenbi_manung {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.laptanachenbi[data-direction="right"] {
  --_animation-direction: reverse;
}

.laptanachenbi[data-direction="left"] {
  --_animation-direction: forwards;
}

.laptanachenbi[data-speed="kanna"] {
  --_animation-duration: 20s;
}

.laptanachenbi[data-speed="tapna"] {
  --_animation-duration: 40s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* general styles */
.about-hearder {
  display: grid;
  min-block-size: 100vh;
  place-content: center;
  font-family: system-ui;
  font-size: 1.125rem;
  background-color: var(--clr-primary-800);
}

.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list li {
  background: var(--clr-primary-400);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900);
}

/* for testing purposed to ensure the animation lined up correctly */
.test {
  background: red !important;
}

.laptanachenbi:hover .tag-list {
  animation-play-state: paused;
}

/* ****************************************************************** */
/*About page 5 items with image*/
.about-main {
  width: 100%;
  background-color: var(--primary-color);
}

.about-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-gap: 20px;
  justify-content: center;
  padding: 0 10% 0 10%;
}

.grid-item {
  text-align: center;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
}

.about-icon {
  height: 3rem;
  width: auto;
}

.about-grid-2 {
  grid-row: 1/3;
  grid-column: 2/2;
  display: grid;
  place-items: center;
}

.about-grid-2 img {
  /* Styling for the cell that holds the image */
  border-radius: 5%;
  margin: 0;
}

.about-grid-6 {
  grid-row: 3/4;
  grid-column: 2/2;
}

/* ************************************************************************* */
/* Colaps  Section*/
.colaps-section {
  max-width: 100%;
  text-align: center;
  padding: 20px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--primary-color);
}

.colaps-section-heading {
  margin-top: 50px;
}

.colaps-section-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 0 0px 150px;
}

.bullet-points {
  list-style: none;
  padding: 0;
  text-align: left;
  width: 600px;
}

.list-item {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.header-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 10px;
  background-color: #d9d9d9;
  border-radius: 5px 5px 0 0;
}

.collapse-icon {
  margin-right: 10px;
  font-size: 1.5rem;
}

.collapsed-content {
  max-height: 0;
  overflow: hidden;
  background-color: #d9d9d9;
  padding: 0 10px;
  border-radius: 0 0 5px 5px;
  transition: max-height 1s ease-out;
  text-align: justify;
}

.collapsed-content p {
  padding-bottom: 10px;
}

.collapsed-content.open {
  max-height: 6rem; /* Adjust based on content size */
}

/* ******************************************************************************************************* */
/* Videos with iphone */
.iphone-border {
  width: 260px;
  /* Adjust width to accommodate border */
  height: 520px;
  /* Adjust height to accommodate border */
  background-color: #000;
  border-radius: 40px;
  box-shadow: 0 0 50px 10px #000;
  position: relative;
  margin: 50px auto;
  /* Center the border horizontally */
}

.screen {
  width: 250px;
  height: 504px;
  background-color: #000;
  border-radius: 30px;
  overflow: hidden;
  margin: 10px auto;
  /* Center the screen vertically */
  position: relative;
}

.video-element {
  width: 100%;
  height: 100%;
}

/****************************************************************************/
/* What's New */
/* Slider */
.prev,
.next {
  background-color: transparent !important;
}

.slider-post {
  padding-top: 80px;
}

.slider-post .slider-header {
  text-align: center;
  margin: 30px auto;
  font-size: xx-large;
}

.slider-post .post-wrapper {
  width: 84%;
  height: 400px;
  padding: 10px 0px 10px 0px;
  margin: auto;
  overflow: hidden;
}

.slider-post .post-wrapper .post {
  background-color: var(--primary-color);
  display: inline-block;
  width: 300px;
  height: 380px;
  margin: 0 20px;
  border-radius: 5px;
  box-shadow: 1rem 1rem 1rem -0.3rem #4b4a4a;
}

.slider-post .post-wrapper .post .post-info {
  height: 130px;
  padding: 0 5px;
}

.slider-post .post-wrapper .post .slider-image {
  width: 100%;
  height: 250px;
  border-radius: 5px;
}

.slider-post .post-wrapper .post .post-info h4 {
  height: 80px;
  /* Adjust the height as needed */
  overflow: hidden;
  /* Ensure text overflow is hidden */
}

/* ****************************** */
/* what's new Main Post */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.content {
  width: 90%;
  margin: 30px auto 30px;
}

.content .main-content {
  width: 70%;
  float: left;
}

.content .main-content .post {
  width: 95%;
  height: 270px;
  margin: 20px auto;
  border-radius: 5px;
  background-color: var(--primary-color);
  position: relative;
}

.content .main-content .post .post-image {
  width: 40%;
  height: 100%;
  float: left;
  border-radius: 5px;
}

.content .main-content .recent-post-title {
  margin: 20px;
  font-size: xx-large;
}

.content .main-content .post .post-preview {
  width: 60%;
  padding: 10px;
  float: right;
}

.content .main-content .post .post-preview h2 {
  font-size: 22px;
  line-height: 1.2;
}

.content .main-content .post p {
  padding: 10px 0;
  height: 100px;
  overflow: hidden;
}

.content .main-content .post .read-more {
  position: absolute;
  background-color: var(--primary-color);
  color: inherit;
  border: 1px solid rgb(75, 75, 75);
  bottom: 10px;
}

.content .main-content .post .read-more:hover {
  background-color: var(--border-color);
  color: white;
}

.content .sidebar {
  width: 30%;
  float: left;
}

.content .sidebar .section {
  background-color: var(--primary-color);
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.content .sidebar .section .section-title {
  margin: 0px 0px 10px 0px;
}

.content .sidebar .section.search {
  margin-top: 80px;
}

.text-input {
  padding: 0.7rem 1rem;
  display: block;
  width: 100%;
  border-radius: 5px;
  border: 1px solid white;
  outline: none;
  color: #333;
  line-height: 1.5rem;
  font-size: 1rem;
}

.content .sidebar .section.topics ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid grey;
}

.content .sidebar .section.topics ul li a {
  display: block;
  padding: 15px 0px 15px 0px;
  border-bottom: 1px solid grey;
  transition: all 0.3s;
}

.content .sidebar .section.topics ul li a:hover {
  padding-left: 10px;
  transition: all 0.3s;
}

/* *************************************************************** */
/* Single-Blog-Post */
.blog-post {
  margin-top: 80px;
}

.content .main-content.single-blog-post-main {
  background-color: var(--primary-color);
  padding: 20px 50px;
  font-size: 1.1rem;
  border-radius: 5px;
}

.content .main-content.single-blog-post-main .post-title {
  text-align: center;
  margin-bottom: 40px;
}

.content .main-content.single-blog-post-main .post-content img {
  float: right;
  padding: 10px;
  max-width: 50%;
  /* Adjust this value as needed */
  margin: 0 0 5px 5px;
  /* Adds margin around the image */
  border-radius: 20px;
}

.content .main-content.single-blog-post-main .post-content p {
  text-align: justify;
  margin-bottom: 20px;
  /* Adjust the value as needed */
  line-height: 1.5;
  /* Optional: adjust the line height for better readability */
}

.content .sidebar.single-blog-post-sidebar {
  padding: 0 10px;
}

.fb-page {
  background-color: var(--primary-color);
  padding: 5px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.content .popular .post {
  border-top: 1px solid grey;
  margin-top: 10px;
  padding-top: 10px;
}

.content .single-blog-post-sidebar .popular .post img {
  height: 60px;
  width: 75px;
  float: left;
  margin-right: 10px;
  border-radius: 5px;
}

/* ************************************************************************************************** */
/* Our Service ki CSS */

.services-gallery {
  margin: 0%;
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.gallery {
  --size: 100px;
  display: grid;
  grid-template-columns: repeat(6, var(--size));
  grid-auto-rows: var(--size);
  margin-bottom: var(--size);
  place-items: start center;
  gap: 5px;

  &:has(:hover) img:not(:hover),
  &:has(:focus) img:not(:focus) {
    filter: brightness(0.5) contrast(0.5);
  }

  & img {
    object-fit: cover;
    width: calc(var(--size) * 2);
    height: calc(var(--size) * 2);
    clip-path: path(
      "M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z"
    );
    transition: clip-path 0.25s, filter 0.75s;
    grid-column: auto / span 2;
    border-radius: 5px;

    &:nth-child(5n - 1) {
      grid-column: 2 / span 2;
    }

    &:hover,
    &:focus {
      clip-path: path(
        "M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z"
      );
      z-index: 1;
      transition: clip-path 0.25s, filter 0.25s;
    }

    &:focus {
      outline: 1px dashed black;
      outline-offset: -5px;
    }
  }
}

/* **************************************************************************  */
/* Service sing discribe touba */
.services-main {
  background-color: var(--primary-color);
  text-align: center;
  padding: 0 10% 0 10%;
}

.services-main h1 {
  padding-top: 20px;
}

.section-services {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
}

.row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.column {
  flex: 0 1 calc(33.33% - 10px);
  background-color: white;
  border-radius: 10px;
  padding: 10px;
}

.services-paragraph-content {
  text-align: center;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 10px;
  transition: 3s ease; /* Slower transition for expanding */
}

.services-paragraph-content-atenbi {
  font-size: small;
}

.services-paragraph-content-asangba {
  max-height: calc(1.6em * 5); /* Set max height for 3 lines */
  overflow: hidden; /* Hide overflow content */
  margin-bottom: 20px; /* Add space between sections */
  transition: max-height 1s ease; /* Slower transition for expanding */
  text-align: justify;
}

.expandedservicesparagraph {
  max-height: 35rem; /* Allow paragraph to expand to full height */
}

.ServicesShowMoreBtn {
  background-color: #007bff; /* Blue button color */
  color: #fff; /* White text color */
  padding: 10px 20px;
  margin: 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth transition */
}

.ServicesShowMoreBtn:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

.services-paragraph-content img {
  max-width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 5%;
  width: 100%; /* Ensure the image takes the full width of its container */
  transition: transform 0.3s ease; /* Add transition for smooth effect */
}

.services-paragraph-content img:hover {
  transform: scale(1.1); /* Increase the scale of the image on hover */
}

/*******************************************************************************/
/* Servies page pricing section*/
.service-page-pricing-section * {
  box-sizing: border-box;
  transition: 0.5s;
}

.service-page-pricing-section {
  scroll-behavior: smooth;
}

/* .service-page-pricing-section {
	padding: 0 10% 0 10% ;
} */

.h1-services-page-pricing {
  color: black;
  text-align: center;
}

.p-services-page-pricing {
  text-align: center;
  font-size: 16px;
  padding: 0 10% 0 10%;
  color: #646464;
}

.price-container {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.price-boxes {
  position: relative;
  width: 350px;
  height: 525px;
  border: 2px solid #e5e5e5;
  margin: 2% 0 2% 0;
  border-radius: 15px;
  background-color: white;
}

.price-boxes:hover {
  border: 2px solid #004df3;
  transform: translateY(-1rem) ScaleX(1.02);
  /**transition: 1s ease-in-out;
	transition-delay: 0ms;**/
}

.closer {
  text-align: center;
  font-size: small;
}

.basic {
  color: #646464;
  text-align: center;
}

.price-boxes:hover > .basic {
  color: #004df3;
}

.price-boxes:hover > .btn-service-page-pricing-section {
  background-color: #004df3;
  color: white;
}

.price-boxes:hover > .price h1 > sup {
  color: #004df3;
}

.price-boxes:hover > .price h1 {
  color: #004df3;
}

.ul-service-page-pricing {
  margin-top: 5px;
  color: #646464;
  margin-bottom: 35px;
  display: flex;
  flex-direction: column;
  list-style: none;
  width: 98%;
  flex-basis: fill;
  padding-left: 35px;
  text-align: left;
  transform: translateX(8%);
}

.yaowi {
  margin-top: 15px;
  list-style-image: url("../images/icons/TickMark20240413_01.png");
}

.yaode {
  margin-top: 15px;
  list-style-image: url("../images/icons/CrossMark20240413_01.png");
}

.btn-service-page-pricing-section {
  background-color: #afcff1;
  /* Blue button color */
  text-decoration: none;
  color: #200d8b;
  /* White text color */
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  /* Smooth transition */
  position: absolute;
  bottom: 0;
  transform: translateX(-50%) translateY(-25%);
}

/* *********************************************************** */
/* Contact Page Ki CSS */

.contact-body {
  background-color: var(--primary-color);
}

.contact-header h1 {
  text-align: center;
  padding-top: 20px;
  margin-bottom: -50px;
}

.section-contact-form * {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

.contact-main {
  padding: 0 10% 0 10%;
}

.section-contact-form {
  display: flex;
  flex-direction: row;
  border: 1px solid var(--border-color);
  margin: 7% 0 3% 0;
  border-radius: 20px;
}

/*Get-in-touch-with-us Form*/

.left-col {
  width: 40%;
}

.container-get {
  padding: 30px 20px;
  background-color: white;
  border-radius: 20px 0 0 20px;
  height: 100%;
}

.get-header {
  background: var(--primary-color);
  border-radius: 20px;
  border: 1px solid var(--border-color);
}

.get-header h2 {
  font-size: 32px;
  font-weight: 800;
  color: Black;
  text-align: center;
  padding-top: 20px;
}

.get-header p {
  font-size: 18px;
  font-weight: 300;
  line-height: 24px;
  padding: 20px 0;
  color: black;
  text-align: center;
}

.get-phone a,
.get-email a {
  text-decoration: none;
}

.get-phone a p,
.get-email a p {
  text-decoration: none;
  background-image: linear-gradient(90deg, blue, orange);
  background-size: 0% 3px;
  background-repeat: no-repeat;
  background-position: left 1.5em;
  padding-block: 0.25em;
  transition: background-size 0.5s;
}

.get-phone a p:hover,
.get-email a p:hover {
  background-size: 100% 3px;
}

.get-phone,
.get-email {
  display: flex;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  margin-top: 30px;
  min-height: 40px;
  flex: 1;
  padding: 20px;
}

.get-phone img,
.get-email img {
  transition: 0.3s ease;
}

.get-phone img:hover,
.get-email img:hover {
  transform: scale(2.1); /* Increase the scale of the image on hover */
}

.social-link a img,
.get-phone a img,
.get-email a img {
  width: 1.5rem;
  /* Make the image cover the entire space of its parent */
  height: auto;
  /* Maintain aspect ratio */
  transition: 0.3s ease;
}

.social {
  font-size: 18px;
  margin-top: 50px;
  text-align: center;
  margin-bottom: 30px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  padding: 10px;
  border-radius: 20px;
  color: Black;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  min-height: 40px;
  flex: 1;
}

.social-link a {
  text-decoration: none;
}

.social-link a img:hover {
  transform: scale(1.5);
}

.social-link i {
  border: 1px solid var(--border-color);
  border-radius: 50%;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*Contact-us Subscription Form*/

.right-col {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.container-form {
  background: white;
  padding: 30px 20px;
  border-radius: 0px 20px 20px 0px;
  width: 100%;
}

.form-header {
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background-color: var(--primary-color);
}

.form-header h2 {
  font-size: 32px;
  font-weight: 800;
  color: Black;
  text-align: center;
  padding-top: 20px;
}

.form-header p {
  font-size: 18px;
  font-weight: 300;
  line-height: 24px;
  padding: 20px 0;
  color: black;
  text-align: center;
}

.input-box {
  display: flex;
  flex-wrap: wrap;
  column-gap: 35px;
}

.input-field {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.field label {
  color: Black;
  font-weight: 600;
  font-size: 18px;
  padding: 0px 0px 5px 10px;
}

.input-field {
  width: 48.5%;
  margin-top: 15px;
}

.item {
  width: 100%;
  padding: 18px;
  background: transparent;
  border: 1px solid var(--border-color);
  outline: none;
  border-radius: 20px;
  font-size: 16px;
  color: black;
  margin: 0 0 5px 0;
}

.field.error .item {
  border-color: #d93025;
}

.field .item::placeholder {
  color: rgba(68, 68, 68, 0.795);
}

.field .error-text {
  font-size: 14.5px;
  color: #d93025;
  text-align: left;
  margin: 0 10px 0;
  display: none;
}

.field.error .error-text {
  display: block;
}

form .textarea-field .item {
  resize: none;
  margin: 10px 0 15px 0;
}

.textarea-field {
  margin-top: 15px;
  width: 100%;
}

form .textarea-field .error-text {
  margin-top: -10px;
}

.contact-message-contenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center align items horizontally within the container */
}

form button.btn {
  border-radius: 30px;
  width: 30%;
  height: 50px;
  font-size: 20px;
  font-weight: 800;
}

/***********************************************************************************************************************************/
/* Fun Zone */
.fun-zone {
  text-align: center;
  background-color: var(--primary-color);
  padding: 0 10% 0 10%;
}

.fun-zone .fun-zone-introduction {
  background-color: white;
  border-radius: 10px;
}

.fun-zone .fun-zone-introduction h2 {
  padding: 10px;
}

/***********************************************************************************************************************************/
/* Privacy and Terms Services */

.privacy-terms-section {
  text-align: center;
  background-color: var(--primary-color);
  padding: 0 10% 0 10%;
}

.privacy-terms-header {
  padding: 3% 0 10px 0;
  border-radius: 10px;
}

.privacy-terms-content {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.privacy-terms-content-item {
  width: 100%;
  padding: 20px 0 0 0;
}

.terms-of-service {
  display: none;
}

.privacy-policy-div,
.terms-of-service-div {
  background-color: white;
  border-radius: 10px;
  margin-bottom: 20px;
}

.privacy-policy-div h3,
.privacy-policy-div h4,
.terms-of-service-div h3,
.terms-of-service-div h4 {
  padding: 10px 0 0 0;
}

.privacy-terms-content-item p {
  padding: 20px 10px 20px 10px;
}

.privacy-terms-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.privacy-terms-buttons button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.privacy-terms-buttons button:hover {
  background-color: #0056b3;
}

/* ***************************************************************************************** */
/* Styles for the new legal content pages (Privacy Policy & Terms of Service) */
.legal-content-section {
  background-color: var(--primary-color);
  padding: 40px 10%; /* Add padding top and bottom */
  min-height: 50vh; /* Ensure minimum height */
}

.legal-content-section .container {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.legal-content-section h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.legal-content {
  text-align: justify;
  line-height: 1.8;
  color: #555;
}

.legal-content h4 {
  margin-top: 25px;
  margin-bottom: 10px;
  color: #333;
  font-weight: bold;
}

.legal-content p {
  margin-bottom: 15px;
}

.legal-content ul {
  list-style: disc;
  margin-left: 20px;
  margin-bottom: 15px;
}

.legal-content li {
  margin-bottom: 8px;
}

.legal-content a {
  color: var(--light-blue-color);
  text-decoration: underline;
}

.legal-content a:hover {
  color: var(--border-color);
}

/* Styles for the updated privacy.html linking page */
.legal-links-section {
  background-color: var(--primary-color);
  padding: 60px 10%;
  text-align: center;
  min-height: 50vh;
}

.legal-links-section .container {
  background-color: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.legal-links-section h2 {
  margin-bottom: 20px;
  color: #333;
}

.legal-links-section p {
  margin-bottom: 30px;
  color: #555;
  line-height: 1.6;
}

.legal-links {
  display: flex;
  justify-content: center;
  gap: 20px; /* Space between buttons */
  margin-bottom: 30px;
}

.legal-link-btn {
  padding: 12px 25px;
  font-size: 1rem;
  min-width: 200px; /* Ensure buttons have a minimum width */
}

.legal-links-section p a {
  color: var(--light-blue-color);
  text-decoration: underline;
  font-weight: bold;
}

.legal-links-section p a:hover {
  color: var(--border-color);
}

/* ***************************************************************************************** */

/* Yarikhei Respondsive ki oiba small screen semdok semjinse css code aroibada thabio */
/* ================================================================================================ */
/* For screens with a minimum width of 768 pixels (typical tablet width) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* CSS styles for tablet screens */
  nav {
    padding: 10px 3%;
  }

  nav ul li {
    /* Reduce the margin for list items */
    margin: 10px 1px;
  }

  nav a {
    /* Reduce the padding for links */
    padding: 0 15px;
  }

  #navkilink {
    text-align: start;
  }
}

/* ============================================================================================================= */
/*. For the small Screens (Mobile). Media queries of Navbar.*/
@media screen and (max-width: 767px) {
  /* NavBar */
  #navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    /* Adjust as needed */
    text-align: left;
  }

  .logo_companyname {
    order: 1;
    /* Change the order to move it to the left */
  }

  .links-container {
    order: 3;
    /* Change the order to move it to the right */
  }

  .open-sidebar-button {
    order: 2;
    /* Change the order to move it to the middle */
  }

  .links-container {
    flex-direction: column;
    align-items: flex-start;

    position: fixed;
    top: 0;
    right: -100%;
    z-index: 10;
    width: 140px;
    height: fit-content;
    border: none;
    border-radius: 0 0 10px 10px;

    background-color: rgba(0, 0, 255, 0);
    backdrop-filter: blur(5px);
    box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);
    transition: right 0.6s ease-out;
  }

  .logo_companyname {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  nav ul li {
    width: 100%;
  }

  nav ul a {
    margin-bottom: 5px;
    text-shadow: 5px 0 5px rgba(247, 244, 244, 0.301);
  }

  nav ul li a {
    padding: 0px;
  }

  .open-sidebar-button,
  .close-sidebar-button {
    align-content: center;
    /* padding: 0 0 0 40px; */
    display: block;
  }

  .close-sidebar-button {
    padding: 10px;
    display: block;
  }

  .menu-icon,
  .menu-close-icon {
    display: block;
    width: 30px;
  }

  #sidebar-active:checked ~ .links-container {
    right: 0;
  }

  #sidebar-active:checked ~ #overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
  }

  /* *********************************************************************************************** */
  /* Carousel */

  .carousel01-tumba {
    height: 70vh;
    height: 70svh;
    /* Half of the screen height */
  }

  .makok {
    font-size: medium;
  }

  .chaohanbi .yaimarak .atomba {
    font-size: 9vw;
    line-height: 8vw;
  }

  .ortal1,
  .ortal2,
  .ortal3,
  .ra1,
  .ra2,
  .ra3 {
    font-size: 8vw;
    line-height: 7vw;
  }

  /* Set font size for tagline */
  .tagLine {
    font-weight: lighter;
    font-size: 14px;
  }

  /* Set styles for previous and next buttons */
  .prev,
  .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #3498db;
    color: #fff;
    outline: none;
  }

  .prev {
    left: 10px;
  }

  .next {
    right: 10px;
  }

  /*****************************************************************/
  /* Home Page */
  /*Introduction*/
  .header-container-home-welcome {
    flex-direction: column;
    /* Stack sections vertically */
    padding: 3% 5% 0 5%;
  }

  .left-section-home-welcome,
  .right-section-home-welcome {
    flex: 100%;
    text-align: center;
    border-radius: 10px;
    margin: 3% 0 2% 0;
    /* Full width on smaller screens */
    transform: none;
  }

  .right-section-home-welcome {
    order: -1;
    align-items: center;
    /* Move right section above left section */
    text-align: justify;
    margin-bottom: 10px;
    /* Add space between sections */
    transform: none;
    padding: 1.5rem 1rem;
  }

  /* smooth transition */
  .paragraph-home-welcome.expanded {
    max-height: 58rem;
    /* A large enough height to ensure the paragraph fully expands */
  }

  div.right-section-home-welcome button {
    width: 9rem;
    height: 2.5rem;
  }

  /* *********************************************************** */
  /* mission */
  .our-mission-container {
    padding: 0 5%;
    /* Adjust padding for smaller screens */
  }

  /* Adjust column layout for smaller screens */
  .our-mission-container > div:nth-child(1),
  .our-mission-container > div:nth-child(2) {
    flex: 1 1 100%;
    /* Set width to 100% for single column layout */
    margin: 10px 0;
    /* Add margin for spacing */
    text-align: center;
    /* Center align content */
    width: 100%;
  }

  /* Lastki anise small screenda uhandaba */
  .our-mission-container > div:nth-child(4),
  .our-mission-container > div:nth-child(3) {
    display: none;
    /* Add padding for spacing */
  }

  .our-mission-container-img img {
    width: 100%;
    height: auto;
    border: none;
    border-radius: 5%;
  }

  /**************************************************************************/
  /*Home page image slider*/
  .collection {
    height: 83vh;
    /* Adjusted height for smaller screens */
  }

  .our-service-text-image-slider {
    text-align: center;
    padding-top: 1rem;
  }

  .collection .content {
    height: 30rem;
    width: 20rem;
    background-color: #1b1f2a;
    border: 0.2rem solid rgba(255, 255, 255, 0.1);
    border-radius: 0.7rem;
    border-bottom: 0.4rem solid #0099ff;
    border-top: 0.4rem solid #0099ff;
    overflow: hidden;
  }

  .content img {
    width: 60%;
    height: 60%;
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
    /* Center the image */
  }

  .text-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    height: 200px;
    padding: -10px;
  }

  .text-content h3 {
    font-size: 1.2rem;
    font-weight: 300px;
  }

  .text-content p {
    max-width: 22rem;
    font-size: 0.8rem;
    font-weight: 400;
    text-align: center;
    margin: 0 10px 0 10px;
  }

  .btn-home-image-slider {
    background-color: #0099ff;
    padding: 0.2rem;
    border: 2px solid #0099ff;
    outline: none;
    font-size: 0.8rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    cursor: pointer;
  }

  /* ********************************************************************** */
  /* Footer */
  .footer-row {
    flex-direction: column;
    /* Change to vertical layout for smaller screens */
  }

  /* Text size semdokpa */
  .footer-row p,
  .footer-row a {
    font-size: small;
  }

  /* Adjust column widths for smaller screens */
  .social-media,
  .newsletter-signup,
  .back-to-top,
  .footer-our-service,
  .contact-information,
  .site-navigation {
    width: 100%;
    /* Full width for single column layout */
    text-align: center;
  }

  /* Gap khra semba */
  .footer-our-service,
  .contact-information,
  .site-navigation {
    margin-top: 15px;
  }

  /* Additional styling for individual columns */
  .newsletter-signup input[type="email"] {
    width: 100%;
    /* Set input width to 100% for full width */
    margin-right: 0;
    /* Remove right margin */
  }

  .newsletter-signup button {
    margin-top: 10px;
  }

  .privacy-policy,
  .copyright-info {
    margin-top: 5px;
    /* Add spacing between rows */
  }

  .footer-row-last {
    padding-top: 20px;
    /* Add padding at the top */
  }

  /* ************************************************************************ */
  /* About ki CSS  */
  /* Laptana Chenbi Scroller */
  .tag-list {
    height: 60px;
    place-content: center;
  }

  .tag-list li {
    place-content: center;
  }

  .about-chaohanbi {
    font-size: 9vw;
    line-height: 8vw;
  }

  .about-ortal1,
  .about-ra1 {
    font-size: 8vw;
    line-height: 7vw;
  }

  .laptanachenbi_manung {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
  }

  /**********************************************************************************************/
  /*Grid ki iteam 6 images yaona*/
  .grid-item {
    text-align: center;
    background-color: white;
    border-radius: 10px;
    padding: 5%;
    margin: 3% 0 2% 0;
  }

  .about-grid-container {
    grid-template-columns: repeat(1, 1fr);
    /* Change to single column layout */
    grid-gap: 0px;
    /* Reduce grid gap for smaller screens */
    padding: 0 5% 0 5%;
    /* Adjust padding for smaller screens */
  }

  .about-grid-2,
  .about-grid-6 {
    grid-column: 1 / span 1;
    /* Adjust grid column span for smaller screens */
    grid-row: auto;
    /* Reset grid row span for smaller screens */
    padding: 20px 0 20px 0;
  }

  .about-grid-2 img {
    margin: 0 3% 0 3%;
    /* Adjust margin for image for smaller screens */
  }

  .about-grid-6 p {
    padding: 0 20px 0 20px;
  }

  .aboutgee-container {
    max-width: 90%;
    /* Adjust max-width for smaller screens */
    padding: 10px;
    /* Adjust padding for smaller screens */
  }

  /* *************************************************************************** */
  /* Colaps Section */
  .colaps-section {
    padding: 0 5% 0 5%;
  }

  .colaps-section-content {
    flex-direction: column;
    /* Stack items vertically */
    align-items: center;
    /* Center items horizontally */
    padding: 0;
    /* Remove horizontal padding */
  }

  .bullet-points {
    width: auto;
    /* Remove fixed width */
  }

  .colaps-section-heading {
    padding-bottom: 3%;
    margin-top: 4%;
  }

  .collapsed-content.open {
    max-height: 10rem; /* Adjust based on content size */
  }

  /* ************************************************************************************** */
  /* Video with iphone */
  .iphone-border {
    width: 205px;
    /* Adjust width to accommodate border */
    height: 420px;
    /* Adjust height to accommodate border */
    background-color: #070707;
    border-radius: 40px;
    box-shadow: 0 0 50px 10px #000;
    position: relative;
    margin: 30px auto;
    /* Center the border horizontally */
  }

  .screen {
    width: 198px;
    height: 420px;
    background-color: #000;
    border-radius: 40px;
    overflow: hidden;
    margin: 0px auto;
    /* Center the screen vertically */
    position: relative;
  }

  .video-element {
    width: 100%;
    height: 100%;
  }

  /* ************************************************************************ */
  /* What's New page */

  /***************************************************************************/
  /*Services page*/
  /* Landing page images */
  .services-gallery {
    min-height: 70vh;
    min-height: 70svh;
  }

  .gallery {
    --size: 40px;
    /* Adjust the size as needed */
    display: grid;
    grid-template-columns: repeat(6, var(--size));
    grid-auto-rows: var(--size);
    margin-bottom: var(--size);
    gap: 5px;
    place-items: start center;

    & img {
      object-fit: cover;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      transition: clip-path 0.25s, filter 0.75s;
      border-radius: 5px;

      &:nth-child(7n - 1) {
        grid-column: 1 / span 2;
      }

      &:hover,
      &:focus {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        z-index: 1;
        transition: clip-path 0.25s, filter 0.25s;
      }

      &:focus {
        outline: 1px dashed black;
        outline-offset: -5px;
      }
    }
  }

  /* ********************************************** */
  .services-main {
    background-color: var(--primary-color);
    text-align: center;
    padding: 0 5% 0 5%;
  }

  .services-main h1 {
    padding: 3% 0 0 0;
    font-size: 1.8rem;
  }

  .section-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Center items horizontally */
    padding: 0px;
  }

  .row {
    display: flex;
    flex-direction: column;
    /* Adjust to column layout on small screens */
    margin-bottom: 20px;
  }

  .column {
    flex: 0 1 calc(100% - 40px);
    /* Full width with margin */
    /* margin: 0 20px; */
    /* Add margin to create spacing */
    width: 100%;
    margin: 3% 0 2% 0;
  }

  .services-paragraph-content {
    text-align: center;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 10px;
  }

  .services-paragraph-content-atenbi {
    font-size: small;
  }

  .services-paragraph-content-asangba {
    max-height: calc(1.6em * 5);
    /* Limit to 3 lines initially */
    overflow: hidden;
    /* Hide overflow content */
    margin-bottom: 20px;
    /* Add space between sections */
    transition: max-height 1s ease;
    /* Slower transition for expanding */
  }

  .expandedservicesparagraph {
    max-height: 30rem;
    /* Allow paragraph to expand to full height */
  }

  .ServicesShowMoreBtn {
    background-color: #007bff;
    /* Blue button color */
    color: #fff;
    /* White text color */
    padding: 10px 20px;
    margin: 0px auto;
    /* Center button horizontally */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    /* Smooth transition */
  }

  .ServicesShowMoreBtn:hover {
    background-color: #0056b3;
    /* Darker blue on hover */
  }

  .services-paragraph-content img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
    border-radius: 5%;
    width: 100%;
    /* Ensure the image takes the full width of its container */
    transition: transform 0.3s ease;
    /* Add transition for smooth effect */
  }

  .btn-service-page-pricing-section {
    position: relative;
    /* Change position to relative */
    transform: none;
    /* Remove transform */
    display: block;
    /* Change display to block */
    margin: 10% 10%;
    /* Add margin for center alignment */
  }

  .services-paragraph-content img:hover {
    transform: scale(1.1);
    /* Increase the scale of the image on hover */
  }

  /*********************************************************/
  /*Servies page pricing section*/
  .price-container {
    flex-direction: column;
    align-items: center;
    margin: 0;
  }

  .price-boxes {
    align-content: center;
    width: 100%;
  }

  .btn-service-page-pricing-section {
    transform: none;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 20px;
    /* Adjust as needed */
    margin: 0 20%;
  }

  /* ************************************************************************************************************************************************************************************************* */
  /* Contact Page */
  .contact-body {
    background-color: var(--primary-color);
  }

  .contact-header h1 {
    text-align: center;
    padding-top: 20px;
    margin-bottom: 0px;
  }

  .section-contact-form * {
    box-sizing: border-box;
    scroll-behavior: smooth;
    /* text-align: center; */
  }

  .contact-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 5% 0 5%;
  }

  .section-contact-form {
    display: flex;
    flex-direction: column;
    /* Change to column layout for small screens */
    border: 0px solid var(--border-color);
    margin: 0;
    border-radius: 20px;
    padding: 2% 0 3% 0;
  }

  .left-col {
    width: 100%;
    /* Occupy full width for small screens */
  }

  .container-get {
    padding: 30px 20px;
    background-color: white;
    border-radius: 20px;
    /* No need to specify border-radius for specific corners */
    margin-bottom: 20px;
    /* Add margin at bottom for separation */
  }

  .get-header h2 {
    font-size: 28px;
    /* Decrease font size for smaller screens */
    padding-top: 10px;
    /* Adjust padding for smaller screens */
  }

  .get-header p {
    font-size: 16px;
    /* Decrease font size for smaller screens */
    padding: 10px 0;
    /* Adjust padding for smaller screens */
  }

  .get-phone,
  .get-email {
    flex-direction: column;
    /* Arrange phone and email vertically for small screens */
    gap: 10px;
    /* Add gap between phone and email for better spacing */
  }

  .social {
    font-size: 16px;
    /* Decrease font size for smaller screens */
    margin-top: 30px;
    margin-bottom: 20px;
    /* Adjust margin for smaller screens */
    padding: 8px;
    /* Adjust padding for smaller screens */
  }

  .social-link,
  .social-git {
    flex-direction: column;
    /* Arrange social links vertically for small screens */
    gap: 10px;
    /* Add gap between social links for better spacing */
  }

  .container-form {
    width: 100%;
    /* Occupy full width for small screens */
    border-radius: 20px;
    /* No need to specify border-radius for specific corners */
  }

  .form-header h2 {
    font-size: 28px;
    /* Decrease font size for smaller screens */
    padding-top: 10px;
    /* Adjust padding for smaller screens */
  }

  .form-header p {
    font-size: 16px;
    /* Decrease font size for smaller screens */
    padding: 10px 0;
    /* Adjust padding for smaller screens */
  }

  .input-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center align items */
  }

  .field {
    width: 100%;
  }

  .field .item {
    width: calc(100% - 0px);
    /* Adjust width to leave space for padding */
    padding: 15px;
    margin-bottom: 10px;
    /* Add margin between input fields */
    font-size: 14px;
  }

  .field.error .item {
    border-color: #d93025;
  }

  .field .error-text {
    font-size: 12px;
    /* Decrease font size for smaller screens */
  }

  form button.btn {
    border-radius: 30px;
    width: 150px;
    height: 40px;
    font-size: 18px;
    font-weight: 400px;
  }

  /**********************************************************************************************************************************/
  /*Privacy and Terms*/

  /* Original styles */
  .privacy-terms-section {
    text-align: center;
    background-color: var(--primary-color);
    padding: 0 10% 3% 10%;
  }

  .privacy-terms-header {
    padding: 3% 0 10px 0;
    border-radius: 10px;
  }

  .privacy-terms-content {
    display: flex;
    justify-content: center;
    gap: 40px;
  }

  .privacy-terms-content-item {
    width: 100%;
    padding: 20px 0 0 0;
  }

  .privacy-policy-div,
  .terms-of-service-div {
    background-color: white;
    border: 1px solid #333;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  .privacy-policy-div h3,
  .privacy-policy-div h4,
  .terms-of-service-div h3,
  .terms-of-service-div h4 {
    padding: 10px 0 0 0;
  }

  .privacy-terms-content-item p {
    padding: 20px 10px 20px 10px;
  }

  .privacy-terms-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .privacy-terms-buttons button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .privacy-terms-buttons button:hover {
    background-color: #0056b3;
  }
}