/*
Theme Name: Astra Child
Theme URI: http://yourwebsite.com/astra-child
Description: A child theme for the Astra theme
Author: Your Name
Author URI: http://yourwebsite.com
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* Import Parent Theme Styles */
@import url("../astra/style.css");

/* You can add custom styles below this line */

/* Remove default margin for all paragraphs */
body p {
  margin: 0px !important;
}

body a {
	text-decoration: none !important;
}

/* Start Customizing learn more link in the home page */
.learn-more-link {
    font-size: 18px;
    color: #DAA520 !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;  /* Align to the right of the parent */
}

.learn-more-link svg {
    margin-left: 10px; /* Space between the text and the icon */
}

.learn-more-link:hover {
    color: #DAA520; /* Keep the color the same on hover */
    text-decoration: none; /* Make sure underline stays removed on hover */
}
/* End Customizing learn more link in the home page */


/* Start of Customization of the icons in home page */
/* Circle container styles */
.nrc-circle {
    width: 64px;
    height: 64px;
    background-color: #EBEFF9; /* Background color of the circle */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* To make it a perfect circle */
	flex-shrink: 0; /* Prevent shrinking */
}

/* Icon inside the circle */
.nrc-icon {
    width: 40px;
    height: 40px;
    color: #0B122E; /* Icon background color */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Make the icon container circular */
    padding: 2px 2px 3px 3px; /* Padding to adjust the icon's position */
}
/* End of Customization of the icons in home page */

/* Start Cutomizing the cybersecurity section of the home page */
.cybersecurity-section, .contact-information {
    background: linear-gradient(144.39deg, #FFFFFF -278.56%, #6D6D6D -78.47%, #11101D 91.61%); 
}
/* End Cutomizing the cybersecurity section of the home page */

/* Start Customizing Partners section in the home page */ 
.partners-container {
  display: flex;
  gap: 16px;
  overflow-x: hidden;
  width: 100%;
}

.partner-card {
	width: 198.67px;
	height: 120px;
	border-radius: 10px;
	background-color: white; 
  	flex: 0 0 auto;
	display: flex;
	justify-content: center; /* Horizontally center the image */
    align-items: center; /* Vertically center the image */
	padding: 4px; /* so the image isn't touching the border of the card */
}

.partner-card img {
    max-width: 100%; /* Make sure the image is responsive */
    max-height: 100%; /* Ensure the image fits within the card */
    object-fit: contain; /* Maintain aspect ratio without stretching */
}

.partners-buttons {
  display: flex;
  gap: 24px;
}

.nrc-nav-button{
    width: 50px; 
    height: 50px;
	padding: 0px;
    gap: 0px; /* No gap inside the button */
    border-radius: 50%; /* Make the buttons round */
    display: flex; /* Flexbox to center the content (e.g., icons) inside */
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    cursor: pointer; /* Make the button clickable */
    box-shadow: 0px 4px 10px 0px #FFFFFF70; /* Add white shadow */
}

.prev-button,
.prev-button:focus,
.prev-button:hover,
.prev-button:active{
	background-color: white;
	border: 2px solid #DAA520; /* Gold border color */
}

.next-button,
.next-button:focus,
.next-button:active,
.next-button:hover{
	background: linear-gradient(36.5deg, #DAA520 6.38%, #FFCD48 95.32%);
	border: none;
}

.prev-button:active,
.next-button:active{
  transform: scale(0.95); /* Slightly scale down the button when pressed */
}

/* Mobile View Customizing for Partners section */
@media (max-width: 768px) { 
	
  /* Override gap between cards for mobile */
  .partners-container {
    gap: 25px; 
  }

  /* Override partner card size for mobile */
  .partner-card {
    width: 88px; /* Mobile width of the card */
    height: 56.17px; /* Mobile height of the card */
	padding: 4px; /*Adding some padding between border and images*/
  }
}
/* End Customizing Partners section in the home page */ 

/* Start customizing the contact card container used at the end of multiple pages */
.contact-card-container {
	background: linear-gradient(144.39deg, #FFFFFF -278.56%, #6D6D6D -78.47%, #11101D 91.61%);
	backdrop-filter: blur(10px);
}
/* End customizing the contact card container used at the end of multiple pages */

/* Start customizing the selected page from main menu */
.main-header-menu .current-menu-item a {
  font-weight: 700 !important;
}
/* End customizing the selected page from main menu */

/* Start customizing the about page landing bg */
.about-landing {
	background: linear-gradient(92.42deg, rgba(245, 245, 245, 0.5) 1.18%, rgba(235, 235, 235, 0.5) 99.11%);
}
/* End customizing the about page landing bg */

/*Start creating inline-flex-containers (hug content containers) */
.inline-flex-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
}
/*End creating inline-flex-containers (hug content containers) */

/* Start customizing the Team cards name container */
.blur-effect {
    backdrop-filter: blur(14px);
}
/* End customizing the Team cards name container */

/* Start customizing the Team cards name arrow */
.arrow-box {
    position: absolute; /* Position it relative to the container */
    top: 0; /* Stick to the top */
    right: 0; /* Stick to the right */
	width: 24px; /* Fixed width of the box */
    height: 24px; /* Fixed height of the box */
	display: flex; /* Enable flexbox */
	justify-content: center; /* Horizontally center the image */
    align-items: center; /* Vertically center the image */
}

.arrow-img {
    object-fit: contain; /* Ensures the image scales properly without stretching */
}

.team-memeber-title {
	color: white !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 27.38px !important;
	margin: 0px !important;
}
/* Start customizing the Team cards name arrow */

/* Start customizing the about certification bg */
.about-certification-bg {
	background: linear-gradient(144.39deg, #FFFFFF -278.56%, #6D6D6D -78.47%, #11101D 91.61%);
	backdrop-filter: blur(10px);
}
/* End customizing the about certification bg */


/* Start customizing the About Certification Grid */
/* Grid Container */
.certification-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 equal-width columns */
  grid-template-rows: auto auto; /* 2 rows of automatic height */
  gap: 0px !important; /* No gap between items */
}

/* Certification Box */
.certification-box {
  width: 205px; /* Set width */
  height: 165px; /* Set height */
  border-radius: 20px; /* Set border radius for rounded corners */
  background-color:#8989890D;
  background: linear-gradient(
		to bottom right,
		rgba(114, 114, 114, 0.2), /* Grey with 20% opacity */
		rgba(48, 85, 227, 0.2) /* Blue with 20% opacity */
  );
	
  border: 1px solid transparent; /* Required to use border-image */
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
  border-image-slice: 1; /* Use the full gradient for the border */
	

  /* No padding */
  padding: 0;
	
	/* Centering the inner white box inside the box using Flexbox */
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
}

/* Inner White Box (Inside Each Certification Box) */
.inner-white-box {
  width: 165px; /* Set width */
  height: 125px; /* Set height */
  margin: 0; /* No margin */
  padding: 0; /* No padding */
  background-color: white; /* White background */
  border-radius: 16px; /* Apply border radius as specified */
  backdrop-filter: blur(10px); /* Apply backdrop blur */
  
  /* Centering the image inside the box using Flexbox */
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
}

/* Box 1 (Top Left) */
.certification-box1 {
  margin: 0; /* No margin */
  padding: 0; /* No padding */
}

/* Box 2 (Top Right) */
.certification-box2 {
  margin-top: 41px; /* 41px gap from top */
  margin-left: 42px; /* 42px gap from left */
  padding: 0; /* No padding */
}

/* Box 3 (Bottom Left) */
.certification-box3 {
  margin-left: 10px; /* 10px gap from left */
  margin-right: 32px; /* 32px gap from right */
  margin-bottom: 41px; /* 41px gap from bottom */
  padding: 0; /* No padding */
}

/* Box 4 (Bottom Right) */
.certification-box4 {
  margin-top: 24px; /* 24px gap from top */
  margin-left: 41px; /* 41px gap from left */
  padding: 0; /* No padding */
  margin-bottom: 0; /* No margin at the bottom, touches the bottom border */
}

/* Mobile View: */
@media (max-width: 768px) {
  .certification-box {
    width: 160px;
    height: 128px;
  }
	
	.inner-white-box {
		width: 140px;
   	 	height: 108px;
	}
	

	/* Box 2 (Top Right) */
	.certification-box2 {
	  margin-top: 30px; 
	  margin-left: 33px; /* 33px gap from left */
	  padding: 0; /* No padding */
	}

	/* Box 3 (Bottom Left) */
	.certification-box3 {
	  margin-left: 0px; /* 0px gap from left */
	  margin-right: 33px; /* 33px gap from right */
	  margin-bottom: 30px; /* 30px gap from bottom */
	  padding: 0; /* No padding */
	}

	/* Box 4 (Bottom Right) */
	.certification-box4 {
	  margin-top: 32px; /* 32px gap from top */
	  margin-left: 33px;
	  padding: 0; /* No padding */
	  margin-bottom: 0; /* No margin at the bottom, touches the bottom border */
	}
}
/* End customizing the About Certification Grid */

/* Start customizing the contact infromation box */
	/* Individual Contact Items */
	.contact-item {
	  display: flex;
	  align-items: center;
	  gap: 16px;
	}

	/* Icons */
	.contact-icon {
	  width: 24px; /* Adjust based on your icon size */
	  height: 24px;
	  object-fit: contain; /* Ensures proper scaling */
	}

	/* Text */
	.contact-item p {
		margin: 0; /* Removes any default margin */
		font-family: Poppins, sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		text-align: left;
		display: flex; /* Makes the text behave like a flexbox */
		align-items: center; /* Ensures vertical centering */
		color: #FFFFFF;
	}

	/* Decorative Circles */
	.circle {
	  position: absolute;
	  border-radius: 50%;
	}

	.circle-1 {
	  width: 138px;
	  height: 138px;
	  background: rgba(255, 249, 249, 0.1); /* Ellipse 1 color */
	  bottom: 27px;
	  right: 25px;
	}

	.circle-2 {
	  width: 269px;
	  height: 269px;
	  background: rgba(255, 255, 255, 0.1); /* Ellipse 2 color */
	  bottom: -134.5px;
	  right: -134.5px;
	}

	@media (max-width: 768px) {
		.contact-item p {
			font-size: 13px;
			line-height: 19.5px;
		}

		.circle-1 {
		  width: 86px;
		  height: 86px;
		  background: rgba(255, 249, 249, 0.1); /* Ellipse 1 color */
		  bottom: 20px;
		  right: 20px;
		}

		.circle-2 {
		  width: 166px;
		  height: 166px;
		  background: rgba(255, 255, 255, 0.1); /* Ellipse 2 color */
		  bottom: -83px;
		  right: -83px;
		}

	}
/* End customizing the contact infromation box */


/* Start Customizing Services popup */
/* Popup Container */
.popup-container {
  width: 1300px;
  height: auto; /* Adjust height as needed */
  max-width: 100%; /* Ensures responsiveness */
  padding: 24px 24px 48px 24px;
  background: #fafbfc;
  box-shadow: 0px 4px 34px 0px #0000000d;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: fixed;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Combine both translateX and translateY */
  z-index: 1000; /* Ensures it appears above other elements */
  display: none; /* Hidden by default */
}

/* Text Frame */
.text-frame {
  width: 100%;
  gap: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Title Frame */
.title-frame {
  position: relative; /* Necessary for the close-icon to be positioned absolutely */
  width: 100%;
  background: #ebeff9;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Ensures equal spacing between items */
  height: auto; /* Allows content to dictate height */
  gap: 0px;
}

/* Close Icon */
.close-icon img {
  position: absolute; /* Take it out of the normal flow */
  top: 16px; /* Match parent container's padding */
  left: 16px; /* Match parent container's padding */
  cursor: pointer;
}

/* Hidden Close Icon */
.close-icon.hidden {
  visibility: hidden;
}

/* Title Content */
.title-content {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Custom Icon */
.custom-icon {
  width: 37px;
  height: 37px;
  object-fit: contain; /* Keeps icon proportions */
}

/* Popup Title Text */
.popup-title {
  font-family: "Titillium Web", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 70px;
  color: #0b122e;
  text-align: left;
  margin: 0px !important;
}

/* Details Frame (Parent Container) */
.details-frame {
  display: flex;
  justify-content: space-between;  /*Creates space between the two columns */
  padding: 0 16px;	
  width: 100%; /* Adjust based on the parent container */
  gap: 0; /* Figma spec */
}

/* Individual Columns */
.details-column {
  width: auto; /* Matches 'Hug' behavior */
  max-width: 626px; /* Prevents overflow */
  display: flex;
  flex-direction: column; /* Ensures bullets stack vertically */
}

/* Bullet List Styling */
.details-column ul {
  display: flex;
  flex-direction: column;	
  gap: 16px;
  padding: 0; /* Removes default browser padding */
  margin: 0; /* Removes default browser margin */
  list-style-type: none; /* Removes default bullets */
}

.details-column li {
  display: flex;
  align-items: center; /* Aligns bullet square and text */
  gap: 8px; /* Space between bullet and text */
  font-family: 'Titillium Web', sans-serif; /* Font spec */
  font-size: 20px; /* Font size */
  font-weight: 600; /* Font weight */
  line-height: 30px; /* Line height */
  text-align: left; /* Text alignment */
  color: #0B122E; /* Background color */
}

/* Bullet Square Styling */
.details-column li::before {
  content: ''; /* Generates a custom bullet */
  width: 5px; /* Size of the square bullet */
  height: 5px;
  background: #0B122E; /* Same as text color */
  display: inline-block; /* Allows bullet to be next to text */
  border-radius: 2px; /* Optional: Slightly round corners for a softer square */
}

/* Services Frame */
.services-frame {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Services Title */
.services-title {
  font-family: 'Titillium Web', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #0b122e; /* Dark background */
  text-align: left;
}

/* Services Cards Frame */
.services-cards-frame {
  display: flex;
  gap: 40px; /* Space between cards */
  width: 100%;
  flex-wrap: wrap; /* Makes cards wrap on smaller screens */
}

/* Individual Service Card */
.service-card {
  width: calc(25% - 30px); /* Fill space evenly across 4 cards */
  min-width: 200px; /* Ensure a minimum size */
  max-width: 283px; /* Matches Figma spec */
  min-height: 232px; /* Fixed height */
  padding: 24px 14px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer; /* Indicate interactivity */
  transition: background 0.3s, color 0.3s; /* Smooth background change */
}

/* Service Card Content */
.service-card .service-icon {
  object-fit: contain; /* Ensures proper scaling */
  transition: filter 0.3s; /* Smooth color change */
}

/* Services Title */
.services-title {
  font-family: 'Titillium Web', sans-serif; /* Correct font family */
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #0b122e; /* Text color */
  text-align: left; /* Align text to the left */
}

.service-card .service-text {
  font-family: 'Titillium Web', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  color: #0a122e; /* Dark background */
  transition: color 0.3s; /* Smooth text color change */
}

.service-text { 
	margin: 0px !important; /* Removes any default margin */
}

/* Selected Card State */
.service-card.selected {
  background: #0b122e; /* Active background color */
}

.service-card.selected .nrc-circle{
  background: transparent; /* Active circle background color */
}


.service-card.selected .service-text {
  color: #ffffff; /* White text for active state */
}

.service-card.selected .service-icon {
  filter: brightness(0) invert(1); /* Makes the icon white */
}

/*Trying to solve the popup too big issue
/* Allow Scrolling */
.popup-container {
  overflow-y: auto;
  max-height: 90vh;
  padding-right: 16px;
  scrollbar-width: none; /* Firefox-specific rule to hide scrollbar */
}

.popup-container::-webkit-scrollbar {
  display: none; /* Hide the scrollbar */
}

/* Adjust Gaps */
.services-frame {
  gap: 16px;
}

.services-cards-frame {
  gap: 24px;
}

/* Slightly Smaller Cards */
.service-card {
  height: 200px; /* Reduced height */
}


@media (max-width: 768px) {
  .details-frame {
    flex-direction: column; /* Stacks the two columns vertically */
    gap: 32px; /* Add space between the two columns */
  }

  .services-cards-frame {
    flex-direction: column;
    gap: 24px; /* Smaller gap for vertical layout */
  }

  .service-card {
    width: 100%; /* Full width for smaller screens */
  }
}
/* End Customizing Services popup */ 


/*Start Customizing the team cards and buttons in the about us page */
/* Making the buttons appear clickable */
#show-advisory {
	cursor: pointer;
}
#show-leadership {
	cursor: pointer;
}

.active-team-button {
	background-color: #DAA520 !important;
	color: #FFFFFF !important;
	border-color: #DAA520 !important;
}

/* By default, hide the advisory team */
.hide {
    display: none !important; /* Force hide elements */
}
/*End Customizing the team cards in the about us page */


/* Start Customizing the team popup*/
/* Popup Container */
.team-popup-container {
  position: fixed;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%);
  width: 1372px; /* Fixed width */
  max-width: 95%; /* Responsive design */
  max-height: 90vh; /* Prevent overflow */
  overflow-y: auto; /* Allow scrolling if needed */
  scrollbar-width: none; /* Firefox-specific rule to hide scrollbar */
  padding: 32px;
  background: #fafbfc;
  border-radius: 30px;
  box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  display: none; /* Hidden by default */
  flex-direction: column;
}

.team-popup-container::-webkit-scrollbar {
  display: none; /* Hide the scrollbar */
}

/* Getting rid of default margin */
.team-popup-container * {
  margin: 0 !important;
}

/* Member Details Container */
.member-details-container {
  display: flex;
  gap: 34px; /* Space between details and picture */
  width: 100%; /* Matches Fill behavior */
  height: auto; /* Hug the content */
}

/* Details Area */
.details-area {
  display: flex;
  flex-direction: column;
  gap: 32px; /* Space between close icon and text area */
  width: 856px; /* Fixed width */
  height: auto; /* Hug the content */
  position: relative;
}

/* Close Icon */
.team-close-icon img {
  cursor: pointer;
}

/* Text Area */
.text-area {
  display: flex;
  flex-direction: column;
  gap: 24px; /* Space between title and paragraph */
  width: 100%; /* Fill width */
  height: auto; /* Hug the content */
}

/* Title (Name of Person) */
.member-name {
  font-family: 'Lato', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 38.4px;
  text-align: left;
  color: #000000;
  margin: 0; /* Reset default margin */
}

/* Paragraph (Information about Person) */
.member-info {
  font-family: 'Titillium Web', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24.34px;
  text-align: left;
  color: #0b122e;
  margin: 0; /* Reset default margin */
}

/* Picture Area */
.picture-area {
  width: 418px; /* Fixed width */
  height: 406px; /* Fixed height */
  border-radius: 20px;
  box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.05); /* Shadow */
  overflow: hidden; /* Ensures rounded corners for the image */
}

.picture-area .member-photo {
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  object-fit: cover; /* Maintain aspect ratio while filling */
  object-position: 50% 18%; /* Moves the image 18% downwards from center BECAUSE THEIR FOREHEADS AIN'T SHOWING */	
}

/* All Members Container */
.all-members-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%; /* Matches Fill behavior */
  height: auto; /* Hug the content */
}

/* Section Title */
.section-title {
  font-family: 'Titillium Web', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  text-align: left;
  color: #0B122E;
  margin: 0; /* Reset default margin */
}

/* Horizontal List Frame */
.horizontal-list-frame {
  display: flex;
  gap: 24px;
  overflow-x: auto; /* Enables horizontal scrolling if needed */
  padding-bottom: 10px; /* Add padding for better spacing */
}

/* Team Member Card */
.team-member-card {
  width: 166.29px; /* Fixed width */
  height: 190px; /* Fixed height */
  padding: 10px;
  border-radius: 10px;
  background: #F3F3F4; /* Default background color */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer; /* Indicates interactivity */
  transition: background 0.3s, color 0.3s; /* Smooth transition for hover/active state */
}

/* Member Photo Container */
.team-member-card .member-photo {
  width: 146.29px; /* Matches Fill behavior */
  height: 139px; /* Fixed height */
  border-radius: 20px;
  box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.05);
  background: #FFFFFF;
  overflow: hidden; /* Ensures rounded corners */
}

.team-member-card .member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crops and centers the image */
  object-position: 50% 18%; /* Moves the image 18% downwards from center */
  border-radius: 12px; /* Optional: adds a bit of softness to the image corners */
}

/* Member Name */
.team-member-card .member-name {
  font-family: 'Titillium Web', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 21.29px;
  text-align: center;
  color: #0B122E; /* Default text color */
  margin: 0; /* Reset default margin */
}

/* Active State for Team Member Card */
.team-member-card.active {
  background: #0B122E; /* Active background color */
}

.team-member-card.active .member-name {
  color: #FFFFFF; /* White text for active state */
  font-weight: 700; /* Bold font for active state */
}

/* Start Media Queries for Responsiveness */
@media (max-width: 768px) {
	
	/*smaller padding around the popup */	
	.team-popup-container{
		padding: 20px;
	}
	
  /* Stack the picture and text on top of each other */
  .member-details-container {
    flex-direction: column; /* Stack the items vertically*/
    gap: 32px; /* Adjust the space between the items */
	margin-bottom: 48px !important;
  }

  /* Make sure the picture is responsive */
  .picture-area {
    width: 100%; /* Make the picture area fill the container */
    height: 320px; /* crop the image to a certain height */
  }

  .details-area {
    width: 100%; /* Fill the container width */
  }

  .member-name {
    font-size: 20px; /* Adjust font size for mobile */
  }

  .member-info {
    font-size: 16px; /* Adjust font size for mobile */
  }
}
/* End Media Queries for Responsiveness */

/* End Customizing the team popup*/


.bg-blur-four {
	backdrop-filter: blur(4px);
}

/* Editing mobile circles */
.mobile-nrc-circle {
    width: 32px;
    height: 32px;
    background-color: #EBEFF9; /* Light grey color */
    border-radius: 50%; /* Make it circular */
    position: relative; /* This is necessary for centering the icon */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.mobile-nrc-icon {
    width: 20px; /* Width of the icon */
    height: 20px; /* Height of the icon */
    object-fit: contain; /* Make sure the image fits inside the container */
}
/* End Editing mobile circles */

/* Start Editing mobile services */
.mobile-service-section{
	background: linear-gradient(144.39deg, #FFFFFF -278.56%, #6D6D6D -78.47%, #11101D 91.61%);
	backdrop-filter: blur(10px);
}
.mobile-view-all-services {
	font-size: 16px;
    color: #DAA520;
	line-height: 28px;
	text-align: right;
    text-decoration: none !important;
    display: flex;
    align-items: center;
	justify-content: flex-end;  /* Align to the right of the parent */
	gap: 10px; /* Creates a gap between the text and the image */
}
/* End Editing mobile services */

/* fixing links change to blue bug*/
/* Ensure the hover, visited, and active links inherit the normal color */
a:hover, a:visited, a:active {
    color: inherit;
}
/* Ensure button's hover, focus, and active states inherit normal color */
button:focus, button:active {
    color: inherit;  /* Inherit the color from the normal button */
    background-color: inherit;  /* Inherit the background color from the normal button */
    border-color: inherit;  /* Inherit the border color from the normal button */
}
/* End fixing links change to blue bug*/

/* Start Customizing mobile services scroll */

/* Container to hold horizontally scrollable cards */
.mobile-services-horizontal-scroll {
  display: flex;
  overflow-x: auto !important; 
  gap: 14px; /* Space between cards */
  padding: 10px 0; /* Optional padding for better spacing */
  width: 100%;  /* Ensure the container takes full width of the viewport */
  box-sizing: border-box; /* Prevent padding from affecting width calculation */
}

/* Cards inside the container */
.mobile-services-horizontal-scroll .card {  /* Adjust based on your card class */
  flex: 0 0 auto !important;  /* Prevent cards from shrinking */
  width: 167px; /* Set the width of your cards */
  scroll-snap-align: start; /* Snap the cards to the start when scrolling */
}

/* Optional: Hide scrollbars for a cleaner design */
.mobile-services-horizontal-scroll::-webkit-scrollbar {
  display: none;
}
.mobile-services-horizontal-scroll {
  -ms-overflow-style: none;  /* Hide scrollbars for IE */
  scrollbar-width: none;  /* Hide scrollbars for Firefox */
}

/* Mobile services control container */
.mobile-services-control {
  display: flex;
  flex-direction: row;
  align-items: center;  /* Vertically center the content */
  gap: 15px;
  width: 100%;
}

/* Container to hold both lines */
.line-container {
  display: flex;
  align-items: center;  /* Ensure vertical alignment */
  width: 220px;         /* Fixed width */
  height: 0;            /* No height, because height is defined by the borders of the lines */
}

/* Left line with border */
.line-left {
  width: 78px;
  height: 1px;
  border-top: 1px solid #CDCFD2; /* Border color */
  /*flex-shrink: 0;  Prevent shrinking */
}

/* Right line with border */
.line-right {
  width: 142px;
  height: 1px;
  border-top: 3px solid #DAA520; /* Border color */
  /*flex-shrink: 0;  Prevent shrinking */
  transform: rotate(0deg); /* Rotation of 0deg or -0deg */
}

/* Buttons container */
.mobile-services-buttons {
  display: flex;
  align-items: center;  /* Align buttons vertically */
  gap: 24px;  /* Space between buttons */
}

.mobile-nrc-nav-button{
	width: 32px; 
    height: 32px;
	padding: 0px;
    gap: 0px; /* No gap inside the button */
    border-radius: 50%; /* Make the buttons round */
    display: inline-flex; /* Flexbox to center the content (e.g., icons) inside */
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    cursor: pointer; /* Make the button clickable */
    box-shadow: 0px 4px 10px 0px #FFFFFF70; /* Add white shadow */
	transition: all 0.3s ease; /* Smooth transition for active effects */
}

.mobile-prev-button,
.mobile-prev-button:focus {
  background-color: transparent; /* Transparent background */
  border: 2px solid #DAA520; /* Golden border */
}


/* Arrow styling */
.mobile-prev-button svg {
  fill: none; /* Ensure the SVG has no fill */
  stroke: #DAA520; /* Gold-colored stroke */
  width: 10px; /* Set the width of the SVG */
  height: 10px; /* Set the height of the SVG */
}

.mobile-prev-button:active {
  transform: scale(0.95); /* Slightly scale down the button when pressed */
  border: 2px solid #DAA520 !important;  /* Make sure border stays the same when clicked */
  background-color: transparent; /* Maintain transparent background */
}

.mobile-next-button {
	background: linear-gradient(36.5deg, #DAA520 6.38%, #FFCD48 95.32%);
}

/* Arrow styling */
.mobile-next-button svg {
  fill: none; /* Ensure the SVG has no fill */
  stroke: white; /* White-colored stroke */
  width: 10px; /* Set the width of the SVG */
  height: 10px; /* Set the height of the SVG */
}

.mobile-next-button:active {
  transform: scale(0.95); /* Slightly scale down the button when pressed */
  background: linear-gradient(36.5deg, #DAA520 6.38%, #FFCD48 95.32%); /* Maintain background */
}
/* End Customizing mobile services scroll */

/*Start Customizing Mobile nice gradient BG Box*/
.mobile-gradient-bg {
	background: linear-gradient(144.39deg, #FFFFFF -278.56%, #6D6D6D -78.47%, #11101D 91.61%);
	backdrop-filter: blur(10px);
}
/*End Customizing Mobile nice gradient BG Box*/

/* Customizing The br in text */ 
/* Mobile view (Default) - no <br> */
@media (max-width: 768px) {
   /* Hide the <br> tag on mobile view */
   .web-only {
      display: none !important;
   }
}

/* Web view (larger screens) */
@media (min-width: 769px) {
   /* Show the <br> tag on web view */
   .web-only {
      display: block !important;
   }
}
/* End Customizing The br in text */ 

/* Start customizing the team memeber cards for mobile*/
/* For mobile view */
@media (max-width: 768px) {
	
	.team-container-wrapper {
		width: 100%; /* Ensure it takes the full width of the screen */
   		overflow-x: hidden !important; /* Ensure no horizontal scroll on the page itself */
	}
	
  .team-container {
    display: flex;
    overflow-x: auto !important; /* Enable horizontal scrolling */
    gap: 16px; /* Space between cards */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  .team-member-card {
    flex: 0 0 auto !important;  /* Prevent cards from shrinking */
    width: 260px; /* Keep the fixed width defined in Elementor */
  }
}
/* End customizing the team memeber cards for mobile*/

/* Start Customizing the Form */
/* General Form Container */
.form-container {
    width: 100%;
    height: 543px;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

/* Form Details Section */
.form-details {
	display: flex;
	flex-direction: column;
    width: 100%;
    height: auto; /* Adjusts based on content size */
    gap: 48px;
}

/* Personal Info Section */
.personal-info {
    width: 100%;
    height: auto;
	display: flex;
	flex-direction: column;
    gap: 32px;
}

/* Email & Phone Section */
.email-phone {
    display: flex;
	flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: auto;
    gap: 24px;
}

/* Individual Field (Email and Phone) */
.email, .phone {
    width: 100%;
    height: auto;
    gap: 10px;
}

.form-container .form-details label {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #8D8D8D;
}

/* Input Box Styling */
.form-container .form-details input[type="email"],
.form-container .form-details input[type="tel"],
.form-container .form-details input[type="text"] {
    width: 100%;
    flex: 1 1 100%; /* Allow input to grow and shrink */
    height: 40px;
    padding: 10px;
    gap: 10px;
    border-radius: 8px;
    border: 1px solid #00000026;
    background: #FFF;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #474747;
}

/* Name Fields (First Name & Last Name) */
.name-fields {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: auto;
    gap: 24px;
}

/* Individual Field (First Name and Last Name) */
.first-name, .last-name {
    width: 100%;
    height: auto;
    gap: 10px;
}

/* Message Section */
.message-section {
    width: 100%;
    height: auto;
    gap: 10px;
}

/* Message Input Box */
.form-container .form-details textarea {
    width: 100%;
    height: 141px;
    padding: 10px;
    gap: 10px;
    border-radius: 8px;
    border: 1px solid #00000026;
    background: #FFF;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #474747;
	resize: none; /* Prevent the user from resizing the textarea */
}

textarea::placeholder {
    color: #949393;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}

/* Adjustments for placeholder inside text area */
textarea:focus::placeholder {
    color: transparent; /* Hide placeholder text on focus */
}

/* Submit Button */
.submit-btn {
    width: 227px;
    height: 44px;
    padding: 10px 48px;
    border-radius: 5px;
    background: #DAA520;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Change cursor to pointer for interactivity */
	position: absolute; /* Use absolute positioning to place at bottom-right */
    bottom: 10px; /* Place 10px from the bottom */
    right: 0px; /* Place 0px from the right */
    transition: background 0.3s ease; /* Smooth hover effect */
}

/* Hover Effect for Submit Button */
.submit-btn:hover {
    color: #FFFFFF;
    background: #C99A16; /* Darker shade for hover */
}

/* Not changing btn color after clicking */
.submit-btn:focus {
    color: #FFFFFF;
    background: #C99A16; /* Darker shade for hover */
}

/* Media Query for Mobile Devices */
@media (max-width: 767px) {
	.form-container {
		height: 455px;
	}

	.form-details {
		gap: 24px;
	}

	.personal-info {
		gap: 24px;
	}

}
/* End Customzing the Form */

/* Start Customizing the Contact popup */
/* Initially hide the contact popup */
.contact-popup-container {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 9999; /* Set a high z-index value */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  justify-content: center;
  align-items: center;
}

.contact-popup-content {
  width: 657px;
  height: auto;
  padding: 32px;
  background-color: #FAFBFC;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  gap:32px;
}

.contact-popup-close {
  width: 24px; /* Adjust as per your image size */
  cursor: pointer;
}

.contact-popup-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.contact-popup-check {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-popup-check img {
  width: 80px; /* Adjust based on the size of the check icon */
  height: 80px;
}

.contact-popup-text {
  text-align: center;
  width: 100%;
}

.contact-popup-text h1 {
  font-family: Lato, sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #000000;
}

.contact-popup-text p {
  font-family: Lato, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #000000;
}

.contact-popup-button {
  width: 227px;
  height: 44px;
  padding: 10px 48px;
  background-color: #DAA520;
  border: none;
  border-radius: 5px;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  cursor: pointer;
}

/* Remove default anchor styling */
.contact-popup-button a {
  text-decoration: none !important;  /* Remove underline */
  color: inherit;         /* Inherit the color from the button */
  font-family: inherit;   /* Inherit the font family */
  font-size: inherit;     /* Inherit the font size */
  font-weight: inherit;   /* Inherit the font weight */
  line-height: inherit;   /* Inherit the line-height */
  text-align: center;     /* Ensure text is centered */
}

.contact-popup-button:focus {
  background-color: #DAA520;
  color: #FFFFFF;
}
/*Making sure btn text stays white */
.contact-popup-button:focus a,
.contact-popup-button:hover a{
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .contact-popup-container {
    width: 393px; /* Adjust the width for mobile view */
    top: 50px; /* Adjust position if needed for mobile */
    left: 0px; /* Center the popup horizontally */
	height: 100%;
  }

  /* Adjust content area inside the popup */
  .contact-popup-content {
    width: 100%; /* Make the content area fill the available width */
  }
}
/* End Customizing the Contact popup */

/* Mobile only br tag */
.mobile-only {
  display: none; /* Hide the line break by default (for desktop view) */
}

/* Show the <br> tag only on mobile screens */
@media (max-width: 768px) {
  .mobile-only {
    display: block; /* Show the line break on mobile screens */
  }
}
/* End Mobile only br tag */

/* Customzing Mobile Footer */
.footer-contact-icon-container {
	width: 20px;
	height: 20px;
}

.footer-contact-icon {
    max-width: 100%; /* Make sure the image is responsive */
    max-height: 100%; /* Ensure the image fits within the card */
    object-fit: contain; /* Maintain aspect ratio without stretching */
}
/* End Customzing Mobile Footer */

/* Expanding a container trick */
.parent-flex-container {
    display: flex; 
    width: 100% !important;   /* Make sure the container spans the entire width */
  }
  
  .parent-flex-container .expandable-left-container {
    flex-grow: 1 !important;  
	flex-shrink: 0 !important;
	flex-basis: 0 !important;
  }
  
  .parent-flex-container .fixed-right-container {
    flex-shrink: 0 !important; 
    white-space: nowrap;
	flex-basis: auto !important;
	max-width: 150px !important; /* This could be changed to whatever fixed width i want for the right container */
  }
/* End Expanding a container */

/* Customizing box sized containers */
/* removing default auto margins around box containers */
.box-margins-removed .e-con-inner { /*e-con-inner is an extra inner div added by elementor for absolutely no reason beware the name might change in future elementor updates*/
	margin-right: 0px !important;
	margin-left: 0px !important;
}
/* End Customizing box sized containers */