/*------------------------------------------------------------------
 * Multipurpose: Free Template by FreeHTML5.co
 * Author: https://freehtml5.co
 * Facebook: https://facebook.com/fh5co
 * Twitter: https://twitter.com/fh5co
 -------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of styles content]

1 - Header
2 - Hero
3 - Services
4 - Pricing
5 - Foot Note
--------------------------------------------------------------------*/

/* Style for the language selector container */
.language-selector {
  position: fixed; /* Fixed position at the top-right corner */
  top: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.7); /* Darker background for better contrast */
  color: white; /* White text for visibility */
  padding: 12px 15px; /* Adequate padding for comfort */
  border-radius: 8px; /* Rounded corners for a smoother look */
  z-index: 2000; /* Ensure it stays on top of other elements */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Shadow for better visibility */
  transition: background-color 0.3s ease; /* Smooth transition when hovered */
}

/* Hide the select dropdown */
.language-selector select {
  display: none; /* Hide the select element completely */
}

/* Style for the flag images (display the flags) */
.language-selector .flag {
  margin-right: 10px;
  cursor: pointer; /* Pointer cursor when hovering over the flags */
}

.language-selector .flag img {
  width: 24px; /* Ancho de la bandera */
  height: auto; /* Mantiene la proporción de la imagen */
}

/* Hover effect for the language selector */
.language-selector:hover {
  background-color: rgba(0, 0, 0, 0.9); /* Darker background when hovered */
}

.description {
  text-align: justify; /* Justifies the text for better readability */
  margin-top: 15px; /* Adds spacing above the description text */
}

.single-pricing {
  padding: 20px; /* Adds internal spacing to separate content */
  border: 1px solid #ddd; /* Optional: Adds a light border around the container */
  border-radius: 8px; /* Optional: Rounds the corners of the container */
  background-color: #f9f9f9; /* Optional: Adds a subtle background color */
}

.mb-4 {
  margin-bottom: 30px; /* Adds vertical spacing between project rows */
}

/*-----------------------------------
    1 - Header
------------------------------------*/
header {
  background-color: rgba(26, 10, 56, 0.53); /* Semi-transparent background */
  color: #fff; /* White text */
  z-index: 1000; /* Ensure the header stays on top of other content */
  padding: 3px 0; /* Padding for spacing */
  transition: top 0.5s; /* Smooth transition for header visibility */
  position: fixed; /* Fixed position at the top */
  top: 0; /* Align to the top of the page */
  left: 0;
  right: 0;
}

header a {
  color: #fff; /* White text for links */
}

header::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.02); /* Light divider line */
  position: fixed;
  left: 0;
  bottom: -10px;
}

.header-hidden {
  top: -200px; /* Hidden state of the header */
}

/* Logo size */
.navbar-brand img {
  max-width: 50px; /* Maximum width of the logo */
  width: auto; /* Maintain the aspect ratio */
  height: auto; /* Adjust height automatically */
}

.navbar-brand h1 {
  margin: 0; /* Remove margin for the brand name */
}

/* Contact section (email and phone) styles */
.contact {
  font-size: 16px; /* Larger font size for contact details */
}

.contact a {
  font-size: 14px; /* Smaller font size for links (email and phone) */
}

.contact a.tel, /* Specifically targeting phone link */
.contact a.email { /* Specifically targeting email link */
  font-size: 14px; /* Slightly smaller font size for email and phone */
}

.contact i {
  color: #ee1515; /* Icon color (red) */
  margin-right: 5px; /* Spacing for icons */
}

.tel {
  margin-right: 30px; /* Spacing for phone number */
}

/* Navbar links styling (About, Services, etc.) */
.navbar-collapse .nav-link {
  font-size: 1rem; /* Adjust font size for navigation links */
  padding: 0 8px; /* Padding around the navigation links */
}

.nav-link {
  font-family: "Rajdhani", sans-serif; /* Font for nav links */
  text-transform: uppercase; /* Uppercase text */
}

/* Title and section styles */
.title {
  font-weight: 700;
  text-transform: uppercase;
}

.title h6 {
  letter-spacing: 4px;
  margin-bottom: 20px;
}

.title h1 {
  font-size: 35px;
}

.title .title-blue {
  color: #26264b;
}

.title .title-primary {
  color: #ee1515;
}

.services {
  padding: 80px 0 50px;
}

.services .title {
  margin-bottom: 20px;
}

.services .media {
  margin: 40px 0;
}

.services h5 {
  color: #26264b;
  border-bottom: 2px solid #e7e7e7;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

/* Responsive design for smaller screens */
@media (max-width: 992px) {
  .navbar .navbar-brand img {
    /* Additional styling for logo on medium screens */
  }
}

@media (max-width: 767px) {
  .navbar .navbar-brand img {
    /* Additional styling for logo on small screens */
  }
}

/*-----------------------------------
    2 - Hero
------------------------------------*/
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("../images/hero-bg.jpg") no-repeat center;
  background-size: cover;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.02);
  left: 0;
}

.hero::before {
  bottom: 58%;
}

.hero::after {
  bottom: 29%;
}

.hero .container {
  position: relative;
  z-index: 5;
}

.hero .slide-content {
  display: flex;
  flex-wrap: wrap; /* Ensure content doesn't overflow and stays within container */
  align-items: center; /* Vertically center the elements */
  justify-content: space-between; /* Spacing between text and image */
  color: #fff;
  text-align: justify; /* Justify text inside the container */
  padding: 30px; /* Padding to add space inside the container */
  gap: 20px; /* Space between text and image */
}

.hero .slide-content h1 {
  color: #fff;
  text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
  font-weight: bold;
  font-size: 2.5rem; /* Adjust title font size */
  margin: 0 0 20px 0; /* Margin below the title to separate it from the content */
  padding: 10px 0; /* Add padding to avoid the title touching the top and bottom */
  text-align: center; /* Center the title text */
}

.hero .slide-content p {
  color: #fff;
  text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.8);
  padding: 35px 30px; /* Add padding inside the text box */
  background-color: rgba(255, 255, 255, 0.2);
  border-top-right-radius: 100px;
  border-bottom-left-radius: 10px;
  margin-bottom: 0;
  width: 100%; /* Ensure text box adjusts to the container's width */
  box-sizing: border-box;
  line-height: 1.6; /* Increase line-height for better readability */
}

.hero .slide-content .btn {
  margin-top: 20px;
}

.hero .slide-content .btn:last-child {
  margin-left: 30px;
}

.hero .arr-left,
.hero .arr-right {
  font-size: 3rem;
  display: block;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 85%;
  transform: translateY(-50%);
  z-index: 9;
}

.hero .arr-left:hover,
.hero .arr-right:hover {
  cursor: pointer;
}

.hero .arr-right {
  right: 15px;
}

.hero .diag-bg {
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  background-color: rgba(240, 0, 255, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.hero .texture {
  width: 100%;
  height: 100%;
  background: url("../images/hero-texture.png") no-repeat center;
  background-size: cover;
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/*-----------------------------------
    Services Section: Overall Styling
------------------------------------*/

.services {
  background-color: #f7f7f7; /* Light gray background for better contrast */
  padding: 80px 20px; /* Increases padding to add space inside the section */
  position: relative; /* Ensures the section is positioned properly for decorations */
  margin-bottom: 60px; /* Adds extra space below the services section */
}

/* Adds a decorative top separator */
.services::before {
  content: "";
  width: 100%;
  height: 5px; /* Height of the top separator */
  background-color: #e0e0e0; /* Light gray color for the separator */
  position: absolute;
  top: 0; /* Aligns to the top of the section */
  left: 0;
  z-index: 1;
}

/* Adds a decorative bottom separator */
.services::after {
  content: "";
  width: 100%;
  height: 5px; /* Height of the bottom separator */
  background-color: #e0e0e0; /* Light gray color for the separator */
  position: absolute;
  bottom: 0; /* Aligns to the bottom of the section */
  left: 0;
  z-index: 1;
}

/* Ensures the content is on top of the separators */
.services .container {
  position: relative;
  z-index: 2;
}

/*-----------------------------------
    Services Section: Headings and Text
------------------------------------*/

.services h5 {
  color: #26264b; /* Keeps the theme color for headings */
  border-bottom: 2px solid #e7e7e7; /* Adds underline below headings */
  padding-bottom: 5px; /* Space between the text and underline */
  margin-bottom: 15px; /* Space below the heading */
  font-size: 1.2rem; /* Adjusts font size for headings */
}

.services p {
  color: #555; /* Lighter color for paragraph text */
  line-height: 1.8; /* Improves readability with better line height */
  margin: 0; /* Removes default margin */
}

/*-----------------------------------
    Services Section: Media Styling
------------------------------------*/

.services .media {
  display: flex; /* Aligns image and text in a row */
  align-items: flex-start; /* Vertically aligns content to the top */
  gap: 15px; /* Space between image and text */
  margin: 30px 0; /* Vertical spacing between media items */
}

.services .media img {
  flex-shrink: 0; /* Prevents image from shrinking when resizing */
  width: 60px; /* Sets image width to a smaller size */
  height: 60px; /* Ensures consistent height for images */
  border-radius: 50%; /* Makes images circular */
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for better visual distinction */
}


/*-----------------------------------
    4 - Pricing Tables
------------------------------------*/
.pricing-tables {
  padding: 80px 15px; /* Adjusted padding for uniform spacing */
  margin-top: 60px; /* Adds extra space above the pricing section */
  background-color: #f9f9f9; /* Subtle background for the pricing section */
  border-top: 2px solid rgba(0, 0, 0, 0.1); /* Adds a light top border */
}

.pricing-tables .pricing-table {
  background-color: #fff; /* White background for pricing cards */
  border: 1px solid #ddd; /* Light border around cards */
  border-radius: 12px; /* Rounds the corners */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  padding: 25px; /* Internal spacing */
  text-align: center; /* Centers text inside cards */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.pricing-tables .pricing-table:hover {
  transform: scale(1.05); /* Enlarges the card slightly on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhances shadow on hover */
}

.pricing-tables .pricing-table .price {
  font-size: 2rem; /* Larger font size for price */
  font-weight: bold; /* Emphasizes the price */
  color: #ee1515; /* Highlighted price color */
  margin-bottom: 15px; /* Spacing below the price */
}

.pricing-tables .pricing-table ul {
  list-style: none; /* Removes default list styling */
  padding: 0; /* Removes default padding */
  margin: 20px 0; /* Adds vertical spacing */
}

.pricing-tables .pricing-table ul li {
  font-size: 1rem; /* Standard font size */
  color: #555; /* Muted text color */
  margin-bottom: 10px; /* Spacing between items */
  line-height: 1.6; /* Improves readability */
}

.pricing-tables .pricing-table .button {
  margin-top: 30px; /* Adds space above the button */
}

.pricing-tables .pricing-table .button a {
  background-color: #26264b; /* Primary button background */
  color: #fff; /* Button text color */
  padding: 12px 30px; /* Button padding for comfort */
  font-size: 1rem; /* Button text size */
  border-radius: 8px; /* Rounded corners */
  text-transform: uppercase; /* Ensures text consistency */
  display: inline-block; /* Aligns the button properly */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow to the button */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.pricing-tables .pricing-table .button a:hover {
  background-color: #ee1515; /* Changes button color on hover */
}


/*-----------------------------------
    5 - Foot Note
------------------------------------*/

footer {
  background: url(../images/footer-bg.png) center center/cover no-repeat #26264b;
}

.foot-note {
  padding: 35px 0;
  background-color: #ee1515;
  color: #26264b;
}

.foot-note a {
  color: #26264b;
}

.foot-note a:last-child {
  margin-left: 30px;
}

.foot-note a.fh5-link {
  margin-left: 0;
}