#header { box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; height: 100px;  position: fixed;  left: 0;  top: 0;  right: 0;  transition: all 0.5s;  z-index: 997; background-color: #fff}
/*#hero::before {  content: "";  background: rgba(6, 12, 34, 0.7);  position: absolute; bottom: 0;  top: 0;  left: 0; right: 0;}*/
#hero .hero-container { position: absolute;  bottom: 0;  left: 0; top: 90px; right: 0;  display: flex;  justify-content: center; align-items: center;  flex-direction: column;  text-align: center;  padding: 0 15px;}
#hero h1 { color: #fff; font-family: "Raleway",sans-serif; font-size: 56px;font-weight: 600;text-transform: uppercase;  line-height: 1.2;} 
#hero p { color: #ebebeb;  font-weight: 600;  font-size: 18px;}
#hero .play-btn::after { content: ""; position: absolute;  left: 50%;  top: 50%;  transform: translateX(-40%) translateY(-50%);  width: 0;  height: 0; border-top: 10px solid transparent;  border-bottom: 10px solid transparent;  border-left: 15px solid #fff;  z-index: 100;  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);}
#hero .about-btn { font-family: "Raleway", sans-serif; font-weight: 500;font-size: 14px;letter-spacing: 1px;  display: inline-block;  padding: 12px 32px;  border-radius: 50px;transition: 0.5s;line-height: 1;margin: 10px;color: #fff; animation-delay: 0.8s;  border: 2px solid #f2cb13;}
.align-items-center { align-items: center !important;}
.d-flex {  display: flex !important;}
.me-auto {  margin-right: auto !important;}
@media (min-width: 1400px) {.container,.container-lg,.container-md,.container-sm, .container-xl, .container-xxl { max-width: 1320px; }}
#header #logo img { padding: 0;  margin: 0;  max-height: 100px;}
#hero .play-btn::before {  content: ""; position: absolute;  width: 120px;  height: 120px;  animation-delay: 0s;  animation: pulsate-btn 2s; animation-iteration-count: 1; animation-direction: forwards;  animation-iteration-count: infinite;  animation-timing-function: steps; opacity: 1;border-radius: 50%; border: 2px solid rgba(163, 163, 163, 0.4); top: -15%;  left: -15%; background: rgba(198, 16, 0, 0);}
#hero .play-btn::after { content: "";  position: absolute;  left: 50%;  top: 50%;  transform: translateX(-40%) translateY(-50%);  width: 0;  height: 0;  border-top: 10px solid transparent;  border-bottom: 10px solid transparent;  border-left: 15px solid #fff;  z-index: 100;  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);}
#hero .play-btn { width: 94px;  height: 94px;  background: radial-gradient(#f2cb13 50%, rgba(101, 111, 150, 0.15) 52%);  border-radius: 50%;  display: block;  position: relative;  overflow: hidden;}
.navbar ul { margin: 0;  padding: 0;  display: flex;  list-style: none;  align-items: center;}
.navbar > ul > li { white-space: nowrap;  padding: 10px 0 10px 12px;}
.navbar li {  position: relative;}
.navbar a:hover::before, .navbar li:hover > a::before, .navbar .active::before { visibility: visible;  width: 100%;}
.navbar > ul > li > a::before { content: "";  position: absolute;  width: 0;  height: 2px;  bottom: -6px;  left: 0;  background-color: #f2cb13;  visibility: hidden;  transition: all 0.3s ease-in-out 0s;}
.navbar > ul > li > a::before { content: "";  position: absolute;  width: 0;  height: 2px;  bottom: -6px;  left: 0;  background-color: #f2cb13;  visibility: hidden;  transition: all 0.3s ease-in-out 0s;}
.navbar a, .navbar a:focus { display: flex;  align-items: center;  justify-content: space-between;  color: #333;  font-family: "Raleway", sans-serif;  font-weight: 600;  font-size: 14px;  white-space: nowrap;  transition: 0.3s;  position: relative;  padding: 6px 10px;}
img, svg {  vertical-align: middle;}
section, .section-padding {  padding: 0px 0;  position: relative;}
#hero .hero-container {  position: absolute;  bottom: 0;  left: 0;  top: 0px;  right: 0;  display: flex; justify-content: center;  align-items: center;  flex-direction: column;  text-align: center;  padding: 0 15px;}
#hero h1 span {  color: #f2cb13;}
 
.dropdown:hover .dropdown-menu {
  display: block;
}
.hero .content {
  margin-top: 40px;
}

#hero .content .icon-box p{ color:#444; font-size:15px; font-weight:500 }
#hero .content .icon-box h4{ color:var(--heading-color);   }
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-control-prev-icon,.carousel-control-next-icon {
 
  width: 50px;
  height: 50px;
 
}
.carousel-caption {
  position: absolute;
  right: 0%;
  height:100%;
  top: 0%;
  left: 0%;
  width:100%;
  z-index: 0;
  padding-top: 15%;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  background-color: rgba(0, 0, 0, .5);
}

.carousel-caption h5{
    color:#fff;
    font-size: 35px;
    text-transform: uppercase;
    line-height: 38px;
}
.carousel-caption div{
  color: #ebebeb;
  font-weight: 600;
  font-size: 18px;
  margin-top:30px; 
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center;
  display: inline-grid;  
} 
@media screen and (max-width: 768px) {
 .carousel-caption h5{
    color:#fff;
    font-size: 20px;
    text-transform: uppercase;
    line-height: 25px;
 }
 .carousel-caption div{
  color: #ebebeb;
  font-weight: 600;
  font-size: 16px;
  margin-top:20px;
  line-height: 16px; 
 
} 

}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
 
 
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #2c4964; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #1977cc; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #2c4964;  /* The default color of the main navmenu links */
  --nav-hover-color: #1977cc; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #2c4964; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #1977cc; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}
 

#hero .content .why-box {
  color: var(--contrast-color);
  background: var(--accent-color);
  padding: 30px;
  border-radius: 4px;
  margin-bottom:20px;
}
.post-meta {
  padding-bottom: 0px;
  font-size: 13px;
  font-family: 'Montserrat';
}
#hero .content .why-box h3 {
  color: var(--contrast-color);
  font-weight: 600;
  font-size: 30px;
  margin-bottom: 30px;
}

#hero .content .why-box p {
  margin-bottom: 30px;
}

#hero .content .why-box .more-btn {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--contrast-color), transparent 80%);
  display: inline-block;
  padding: 6px 30px 8px 30px;
  border-radius: 50px;
  transition: all ease-in-out 0.4s;
}
#hero .content .why-box .more-btn i {  font-size: 14px;}
#hero .content .why-box .more-btn:hover {  background: var(--surface-color);  color: var(--accent-color);}
#hero .content .icon-box { text-align: center;  border-radius: 10px;  background: color-mix(in srgb, var(--surface-color), transparent 20%);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);  padding: 40px 30px; width: 100%;  margin-bottom:20px;}
.hero .content .icon-box i { font-size: 40px;  color: var(--accent-color);}
.hero .content .icon-box h4 { font-size: 20px;  font-weight: 700;  margin: 10px 0 20px 0;}
#hero .content .icon-box p { font-size: 15px;  color: color-mix(in srgb, var(--default-color), transparent 30%);}
#hero .welcome h2 { margin:0;  font-size: 48px; font-weight: 700; color: var(--default-color);}
#hero .welcome p {  font-size: 24px;  margin:20px 0 ;}