* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
  line-height: 24px;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}
p {
  color: #3e3e3e;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #333;
  line-height: 1.4em;
}
.btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #001d5b; /* blue */
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-radius: 40px;
  transition: 
    background-color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Hover effect */
.btn:hover {
  background-color: #d4af37;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Active (click) */
.btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Focus (accessibility) */
.btn:focus {
  outline: 3px solid rgba(37, 99, 235, 0.4);
  outline-offset: 3px;
}


.container {
  width: 100%;
  max-width: 1400px;   
  margin: 0 auto;      
  padding: 0 16px;    
  box-sizing: border-box;
}

/* Grid layout */
.grid_4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Desktop: 4 columns */
  gap: 1rem;
}
.grid_3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Desktop: 4 columns */
  gap: 1rem;
}
.grid_2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Desktop: 4 columns */
  gap: 1rem;
}

/* Tablet: 3 columns */
@media (max-width: 1024px) {
  .grid_4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 2 columns */
@media (max-width: 768px) {
  .grid_4,.grid_3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small mobile: 1 column */
@media (max-width: 480px) {
  .grid_4 ,.grid_3,.grid_2{
    grid-template-columns: 1fr;
  }
}

/* Optional breakpoints */
@media (min-width: 768px) {
  .container {
    padding: 0 24px;
  }
}

@media (min-width: 1200px) {
  .container {
    padding: 0 32px;
  }
}

.button_3 {
  color: white;
  font-weight: bold;
  border: wheat 3px solid;
}

button {
  cursor: pointer;
  border: 1px #007bff solid;
  padding: 10px;
  border-radius: 30px;
}
button:hover {
  color: #007bff;
  background: white;
  border: 1px #007bff solid;

}
a img:hover {
  opacity: 0.5;
}

a {
  text-decoration: none;
  transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  outline: none;
  color: #333;
}
a:hover {
  text-decoration: none;
  color: #007bff;
}
/*Top Header */
header {
  position: relative;
  z-index: 20000;
  width: 100%;
  top: 0;
  margin: 0;
  padding: 0;
}
header #top_header {
  margin: 0;
  padding: 0;
  background: #032565;
  color: #d4af37;
  padding: 2px;
}
header .top_header1 {
  width: 100%;
  display: inline-block;
  line-height: 10px;
  padding: 5px 0px;
}

header .top_header1 .top_contact {
  float: right;
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  margin-top: 10px;

}
header .top_header1 .top_contact a {
  color: #d4af37;
  font-weight: 500;
  text-decoration: none;
}
header .top_header1 .top_contact a:hover {
  color: #d4af37;
  text-decoration: underline;
}
header .top_header1 .top_social a i:hover{
  color: #d4af37;  
}
header .top_header1 .top_contact span {
  padding: 5px;
  font-size: 16px;
  margin-left: 10px;
  margin-right: 10px;
  font-family: sans-serif;
  letter-spacing: 1px;
}
header .top_header1 .top_social {
  width: 20%;
  float: left;
  margin-top: 5px;
}

header .top_header1 .top_social a i {
  font-size: 18px;
  color: #fff;
}
header .top_header1 .top_social a {
  letter-spacing: 15px;
}

/*End Header */

/*Logo Header */

/*Sticky */
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #032565;
  border-bottom: 1px #d4af37 solid;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.sticky .navigation {
  background: none;
}
.sticky nav ul li a,
.sticky nav ul li a:visited,
.sticky nav ul li h5 {
  color: #fff;
}

/*Top Header */
.nav-list {
  margin-top: 6px;
}

.navigation {
  height: 80px;
  margin-top: 0;
  padding: 10px 0px;
  background: #fff;
}
.brand {
  width: 18%;
  position: absolute;
  padding-left: 20px;
  float: left;
  margin-top: -4px;
  z-index: 200;
}
.brand img {
  width: 100%;
  float: left;
}
.brand a,
.brand a:visited {
  color: #ffffff;
  text-decoration: none;
}
.nav-container {
  max-width: 100%;
  margin: 0 auto;
}
nav {
  float: right;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}
nav ul li {
  float: left;
  position: relative;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  padding: 5px 10px;
}
nav ul li a,
nav ul li h5 {
  display: block;
  padding: 18px 10px;
  font-size: 16px;
  line-height: 5px;
  font-weight: 500;
  margin: 0;
  color: #032565;
  text-decoration: none;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
nav ul li a {
  background: transparent;
  color: #032565;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
nav ul li a:hover,nav ul li h5:hover {
  color: #d4af37;
}

nav ul li:hover,
nav ul li:visited:hover {
  border-bottom: 3px #d4af37 solid;
  cursor: pointer;
  -webkit-transform: translateX(5px);
  -moz-transform: translateX(5px);
  -ms-transform: translateX(5px);
  -o-transform: translateX(5px);
  transform: translateX(5px);
}

ul .navbar-dropdown {
  background: #032565;
  padding: 5px;
  margin-top: 10px;
  margin-left: -20px;
}
ul .navbar-dropdown li a{
  color: #fff;
}
nav ul li a:visited:not(:only-child):after,
nav ul li h5:not(:only-child):after {
  padding-left: 4px;
  content: ' \025BE';
  font-size: 20px;
  float: right;
}
nav ul li ul li {
  min-width: 360px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.navbar-dropdown {
  position: absolute;
  display: none;
  padding-top: 50px;
  z-index: 1;
  box-shadow: 0 0 35px 0 rgba(0,0,0,0.25);
}
nav ul li.current{
	border-bottom: 3px #d4af37 solid;
  }
  nav ul li.current a{
    color: #d4af37;
  }
.navbar-dropdown li a {
  padding: 10px;
}
.navbar-dropdown li a:hover {
  border-bottom: none;
}
/* Mobile navigation */
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  height: 55px;
  width: 70px;
}
#navbar-toggle {
  position: absolute;
  left: 18px;
  top: 15px;
  cursor: pointer;
  padding: 10px 35px 16px 0;
}
#navbar-toggle .active {
  background: #fff;
}
#navbar-toggle span,
#navbar-toggle span:after,
#navbar-toggle span:before {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 30px;
  background: #fff;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
#navbar-toggle span:before {
  top: -10px;
}
#navbar-toggle span:after {
  bottom: -10px;
}
#navbar-toggle.active span {
  background-color: transparent;
}
#navbar-toggle.active span:after,
#navbar-toggle.active span:before {
  top: 0;
}
#navbar-toggle.active span:before {
  transform: rotate(45deg);
}
#navbar-toggle.active span:after {
  transform: rotate(-45deg);
}

/*showcase*/

/*FlexSlider */
#FlexSlider {
  margin: 0;
  padding: 0;
  top: 0;
}
.slider1 {
  float: left;
  width: 100%;
  position: relative;
  z-index: 5000;
}
.slider1:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgb(0,0,0);
  background: linear-gradient(360deg, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0.669) 100%);
  opacity: 0.4;
  z-index: -10;
}
.slider1 .flex-caption {
  width: 100%;
  float: left;
  text-align: center;
  margin-top: -25%;
  padding: 0 100px;
}
.slider1 .flex-caption h2 {
  color: #f3f3f3f3;
  font-size: 80px;
  font-weight: 700;
  margin: 0 0 0px;
  line-height: 1;
  text-transform: capitalize;
}
.slider1 .flex-caption h3 {
  color: #f3f3f3f3;
  font-size: 40px;
  font-weight: 500;
  margin: 0;
}
.slider1 .flex-caption p {
  color: #f3f3f3f3;
  font-size: 30px;
  font-weight: 500;
  margin: 0 0 20px;

}

.slider1 .flex-caption button{
  background: none;
  outline: none;
  border: none;
  margin-top: 20px;
}
.slider1 .flex-caption button a {
  font-size: 20px;
  font-weight: 500;
  background: #032565;
  border-radius: 30px;
  padding: 15px 30px;
  color: #d4af37;
  border: 1px white solid;
}
.slider1 .flex-caption button a:hover {
  background: #fff;
  color: #032565;
}

/*==================
breadcrumb
====================*/
#mu-page-breadcrumb {
  background: url('../img/slider/slider.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  padding: 20px 0;
  color: white;
  float: left;
  height: 400px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 9;
}
#mu-page-breadcrumb:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  z-index: -10;
}

/*About*/
#about_banner {
  background: url('../img/slider/slider4.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  padding: 20px 0;
  color: white;
  float: left;
  height: 400px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 9;
}
#about_banner:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  z-index: -10;
}

/*Service*/
#services_banner1 {
  padding: 20px 0;
  color: white;
  float: left;
  width: 100%;
}
#services_banner {
  background: url('../img/slider/background.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  padding: 20px 0;
  color: white;
  float: left;
  height: 400px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 9;
}
#services_banner:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity: 0.7;
  z-index: -10;
}

.about-area h1,.services-area h1{
  color: #fff;
  font-size: 50px;
  font-weight: 600;
  text-align: center;
  margin-top: 12%;
}

.breadcrumb {
 background: #eee;
 padding: 10px 40px;

}
.breadcrumb li,.breadcrumb span {
  display: inline-block;
  color: #303030;
  font-size: 20px;
  padding: 5px;
}
.breadcrumb li a{
  color: #000;
}
.breadcrumb li a:hover,
.mu-page-breadcrumb-area li a:hover {
  color: #032565;
}
@media(max-width: 320px) {
  }

/*==================
breadcrumb  END
====================*/

#about-home {
  padding: 50px 0px;
  float: left;
  width: 100%;
}
#about-home .abh_sec {
  background: #012564;
  float: left;
  width: 100%;
  position: relative;
  z-index: 300;
  box-shadow: rgba(0, 0, 0, 0.45) 0 25px 20px -20px;
}
#about-home .about-1{
  overflow: hidden;
  width: 40%;
  float: left;
}
#about-home .about-1 img {
  height: 500px;
  object-fit: cover;
  background: #eee;
  float: left;
}

#about-home .about_home h2 {
  margin-top: 10px;
  font-size: 40px;
  line-height: 52px;
  color: #fff;
  font-weight: 600;
}

#about-home .about_home {
  width: 55%;
  padding: 30px;
  height: auto;
  float: right;
  line-height: 2;
}
#about-home .about_home p {
  margin-top: -0px;
  color: #fff;
  font-size: 1
  
  
  7
  
  px;
}

#about-home .about_home a {
  font-size: 20px;
  color: #032565;
  background: #d4af37;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: capitalize;
}
#about-home .about_home a:hover{
  border: 1px #d4af37 solid;
  color: #d4af37;
  background: none;
}
#about-home .about-2{
  padding: 20px;
}
#about-home .about-2 h2 {
  margin: 0;
  font-size: 40px;
  line-height: 60px;
  color: #032565;
  font-weight: 600;
}
#about-home .mission {
  background: #e7f2ff87;
  margin: 10px;
  padding: 20px;
  border-radius: 30px;
  display: inline-grid;
}
#about-home .mission h2 {
  font-size: 40px;
  margin: 0;
  font-weight: 600;
  color: #032565;
}


#about-home .mission p {
  text-align: justify;
}
/*Features*/
#features {
  float: left;
  width: 100%;
  padding: 50px;
}

#features .feat h2 {
  text-align: center;
  font-size: 35px;
  font-weight: 300;
}
#features .feat {
  margin-left: 0;
  text-align: center;
}
#features .feat .feats {
  width: 23%;
  margin-left: 5px;
  box-shadow: 1px 1px 5px grey;
  padding: 20px 5px 50px;
  display: inline-grid;
}
#features .feat .feats h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: -10px;
}
#features .feat .feats i {
  font-size: 35px;
}
/*Home Banner*/
#banners{
  width: 100%;
  float:left;
  padding: 30px 0px;
  background: url('../img/slider/background.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% 100%;
  position: relative;
  z-index: 9;
  }
  #banners:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: 0.7;
    z-index: -10;
  }

#banners .banner-img{
  width: 55%;
  padding: 20px;
  float: left;
}
#banners .banner-img img{
  width: 100%;
  border-radius: 15px;
}
#banners .banner-conte {
  width: 45%;
  float: right;
  margin-top: 60px;
}
#banners .banner-conte h3{
  font-size: 40px;
  color: #fff;
  margin: 30px 0px;
  line-height: 1;
}
#banners .banner-conte a{
  background: #d4af37;
  transition: 0.3s ease;
  font-size: 20px;
  padding: 15px 30px;
  font-weight: 600;
  margin-left: 10px;
  color: #fff;
  border-radius: 5px;
  margin-top: 20px;
}
#banners .banner-conte a:hover{
  background: none;
  border: 2px #d4af37 solid;
  color: #d4af37;
}
/*==================
Service
====================*/
#services_banner,#services_banner1 {
  padding: 20px 120px;
  width: 100%;
  float: left;
}

#services_banner1 img {
  width: 50%;
  float: right;
  border-radius: 20px;
  margin-top: 50px;
}
#services_banner1 .service_b_cont {
  width: 45%;
  float: left;
  margin-top: 70px;
}
#services_banner1 .service_b_cont h1 {
  font-size: 50px;
  font-weight: 600;
  color: #000;
  margin: 0;
}
#services_banner1 .service_b_cont p {
  font-size: 17px;
}
#services {
  float: left;
  padding: 10px 50px;
  width: 100%;
  background: #eeeeee;
}

.service_fdq{
  overflow: hidden;
}
.services_ab {
  float: left;
  padding: 80px;
  width: 100%;
}
.service-container {
  width: auto;
  position: relative;
  display: contents;
}

#services .services {
  float: left;
  width: 30%;
  margin-top: 90px;
  overflow: hidden;
  position: relative;
}


#services .services h2 {
  text-align: center;
  margin-bottom: 10px;
  margin-left: 0px;
  font-size: 70px;
  font-weight: 600;
  color: #032565;
  letter-spacing: 3;
  border-bottom: 10px #032565 solid;
  text-align: left;
}
#services .services p{
  text-align: left;
}
#services .service-home-a {
  margin-top: 0px;
  width: 65%;
  margin-bottom: 50px;
  float: right;
  margin-right: 10px;
}
#services .service_fdq {
  margin-top: 30px;
  width: 100%;
  margin-right: 0px;
}
.service {
  height: 300px;
  border-radius: 30px;
  background-repeat: no-repeat;
  margin-top: 50px;
  background-size: 100%;
  background-position: center;
  background-size: cover;
  padding: 80px 0;
  color: white;
  margin-left: 20px;
  border: 3px #fff solid;
  text-align: center;
  position: relative;
  z-index: 9;
}
.service:nth-child(1) {
  background: url('../img/slider/slider1.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: cover;
}
.service:nth-child(2) {
  background: url('../img/gallery/event.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: cover;
}
.service:nth-child(3) {
  background: url('../img/services/debelz3.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: cover;
}
.service:nth-child(4) {
  background: url('../img/services/debelz4.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: cover;
}
.service:nth-child(5) {
  background: url('../img/services/debelz2.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: cover;
}

.service:nth-child(6) {
  background: url('../img/services/debelz6.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: cover;
}
.service:nth-child(7) {
  background: url('../img/gallery/activation.jpeg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: cover;
}
.service:nth-child(8) {
  background: url('../img/gallery/media-coverage.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: cover;
}
.service:nth-child(9) {
  background: url('../img/gallery/camera.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: cover;
}
.service:nth-child(10) {
  background: url('../img/gallery/tv-radio.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: cover;
}
.service:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  border-radius: 30px;
  z-index: -10;
}
.service .service img {
  width: 100%;
  height: 100%;
  border: 2px #032565 solid;
  padding: 5px;
  height: auto;
  display: inline-grid;
  margin-top: 60px;
}

.service2 img {
  width: 100%;
  height: 200px;
  padding: 5px;
  display: inline-grid;
  margin-top: 0;
}
.service2 h4 {
  text-align: center;
  font-size: 20px;
  margin-top: 0;
  font-weight: lighter;
  padding: 10px;
  margin: 0;
}
.service h4 {
  font-family: sans-serif;
  text-align: center;
  font-size: 25px;
  line-height: 1;
  top: 85%;
  color: #fff;
  border-radius: 20px;
  background-color: #0000007c;
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
  margin: 0px 13px;
  padding: 10px;
}
.services p {
  font-size: 19px;
  line-height: 1.5;
  text-align: center;
}
.service {
  overflow: hidden;
  position: relative; /* Ensures absolute positioning of child elements */
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  transition: all 300ms;
}

.service:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
}

.service a {
  display: block; /* Makes the entire div clickable */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center; /* Center the text */
  margin-top: -43px;
}

/* Services Page*/
#serv-section{
  width: 100%;
  float: left;
}
#serv-section .serv-sec-img{
  width: 50%;
  float: left;
  margin-top: 70px;
}
#serv-section .serv-sec-img img{
  width: 100%;
  border-radius: 20px;
}
#serv-section .page-cont{
 width: 50%;
 float: right;
 padding: 50px;
}
#serv-section .page-cont h2{
  font-size: 35px;
}
#serv-section .page-cont p{
  font-size: 17px;
}
#serv-section .serv-pages{
  width: 100%;
  float: left;
  padding: 50px;
  background: #eee;
}
#serv-section .serv-page{
  width: 48%;
  float: left;
  display: inline-grid;
}
#serv-section .serv-page h3{
  font-size: 30px; 
  margin: 0;
}
#serv-section .serv-page ul{
  padding: 20px;
}
#serv-section .serv-page ul li{
  list-style:disc;
  font-size: 17px;
  line-height: 2;
  color: #2c2c2c;
}
#serv-section .serv-page ul li span{
  color: #000;
  font-weight: 600;
}
#serv-section p{
  width: 100%;
  float: left;
  font-size: 17px;
}

/* ======================================================
   PORTFOLIO / GALLERY SECTION
====================================================== */

#gallery {
  padding: 30px 0;
  background: #fafafa;
  width: 100%;
  float: left;
}


#gallery h4 {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #111;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#gallery hr {
  width: 80px;
  height: 4px;
  background: #032565;
  border: none;
  margin: 0 auto 50px;
}

/* ======================================================
   GRID LAYOUT
====================================================== */

.photo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

/* ======================================================
   GRID ITEM
====================================================== */

.photo-grid {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.photo-grid:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

/* ======================================================
   IMAGE
====================================================== */

.photo-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.photo-grid:hover img {
  transform: scale(1.08);
}

/* ======================================================
   CLICK-TO-VIEW OVERLAY
====================================================== */

.photo-grid a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

/* Text overlay */
.photo-grid a::before {
  content: "Click to View";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 2;
}

/* Zoom icon */
.photo-grid a::after {
  content: "🔍";
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 26px;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  transition: all 0.35s ease;
  z-index: 3;
}

.photo-grid:hover a::before,
.photo-grid:hover a::after {
  opacity: 1;
}

.photo-grid:hover a::after {
  transform: translate(-50%, -50%) scale(1);
}

/* ======================================================
   SUBTLE GRADIENT OVERLAY
====================================================== */

.photo-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0)
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.photo-grid:hover::after {
  opacity: 1;
}

/* ======================================================
   CALL-TO-ACTION BUTTON
====================================================== */

#gallery .btn {
  display: inline-block;
  margin: 60px auto 0;
  padding: 14px 40px;
  background: #012564;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 40px;
  transition: background 0.3s ease, transform 0.3s ease;
}

#gallery .btn:hover {
  background: #d4af37;
  transform: translateY(-2px);
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 768px) {
  #gallery h4 {
    font-size: 26px;
  }

  .photo {
    gap: 18px;
  }
}


.address {
  width: 30%;
  float: left;
  margin-top: 30px;
  padding: 60px 30px;
  background: #eee;
}
.address h2 {
  font-size: 30px;
  font-family: 'Raleway', sans-serif;
  color: #000;
}
.address ul{
  padding: 0;
}
#appointment  .address ul span, .address ul h3 {
  font-size: 25px;
  font-weight: 600;
  color: #000124;
  margin-bottom: 10px;
}
.address ul li {
  margin-left: 0px;
  line-height: 2;
  list-style-type: none;
  font-size: 16px;
  color: #000;
  text-align: left;
  display: flex;

}

.address ul li a {
  font-size: 17px;
  color: #000;
}
.address ul li i {
  letter-spacing: 5px;
  color: #000;
  font-size: 19px;
  text-align: left;
}
.address a i:hover,
.address ul li a:hover {
  text-decoration: underline;
}
.address h3 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: bold;
  color: #ffffff;
}
.address a i {
  letter-spacing: 20px;
  font-size: 25px;
  color: #ffffff;
}

#sent {
  text-align: center;
  top: 0;
  float: left;
  width: 100%;
  margin: 0;
  padding: 20px;
}
.sent1 h2 {
  color: #325;
  text-transform: capitalize;
  font-size: 40px;
  margin-top: 30px;
}
.sent1 p {
  font-size: 20px;
  color: #000000;
}
.Social {
  margin-bottom: 30px;
}
.Social h3 {
  color: #325;
  font-weight: lighter;
  text-transform: capitalize;
  font-size: 40px;
}
.Social a i {
  letter-spacing: 20px;
  font-size: 25px;
  color: #032565;
}
.Social a i:hover {
  color: red;
}

/**End Contact **/

#appointment {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  float: left;
  width: 100%;
  padding: 20px;
}
#appointment .app-con{
  padding: 30px;
  margin-top: 80px;
  width: 100%;
  float: left;
  text-align: center;
}
#appointment .app-con h1{
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  color: #032565;
  margin: 0;
}
#appointment .app-con p{
font-size: 25px;
margin: 0;
} 

#appointment .form-btn span, .contact .form-btn2 span{
	display: none;
	margin-top: 30px;
	margin-left: 40px;
}

#appointment span{
  color: red;
}
#appointment .app-con h3{
  font-size: 35px;
  margin: 0;
  }

#appointment .contact-2 {
  float: left;
  width: 65%;
  padding: 30px;
  margin-top: 0px;
}
#appointment .contact-2 input,
#appointment .contact-2 textarea, #select{
  border: 1px #2c2c2c solid;
  background: #eee;
  width: 100%;
}
#appointment .contact-2 h3 {
  font-size: 40px;
  color: #303030;
  margin: 20px 0;
}
#appointment .contact-2 p {
  font-size: 32px;
  line-height: 1.3;
  color: #303030;
}
#appointment_sent {
  margin: 30px;
  text-align: center;
}
.appointment_sent1 h2 {
  color: #325;
  font-size: 30px;
}
.Social h3 {
  color: #325;
  font-weight: lighter;
  font-size: 30px;
}
.Social a i {
  letter-spacing: 20px;
  font-size: 30px;
  color: #032565;
}
.Social a i:hover {
  color: #325;
}

.column_1 button {
  cursor: pointer;
  border: 2px #032565 solid;
  background-color: #032565;
  padding: 15px 20px;
  font-size: 18px;
  color: white;
  margin-top: 10px;
  width: 35%;
  border-radius: 30px;
  -webkit-transition: all 2000ms cubic-bezier(.19,1,.22,1) 0;
  -moz-transition: all 2000ms cubic-bezier(.19,1,.22,1) 0;
  transition: all 2000ms cubic-bezier(.19,1,.22,1) 0;

}
.column_1 button:hover {
  color: #032565;
  background-color: white;
  border: 1px #032565 solid;
}
@media(max-width: 425px) {
  .column_1 button {
      font-size: 20px;
      width: 100%;
  }
}
/* Form Inputs */

/**End Contact **/

/*Contact-Mobile*/
#contact-mobile{
	width: 100%;
	float: left;
	margin-bottom: 50px;
}

#contact-mobile .call-mobile .call-img img{
	width: 100%;
}
#contact-mobile .call-mobile .call-img{
	margin-top: 140px;
	width: 50%;
	float: left;
}
#contact-mobile .contact-info{
	width: 49%;
	margin-top: 130px;
	float: right;
	padding: 50px;
}
#contact-mobile .contact-info h2{
	font-size: 30px;
}
#contact-mobile .contact-info p{
	font-size: 22px;
	line-height: 1;
}
 
#contact-mobile .contact-info a{
	font-size: 20px;
	background: #d4af37;
	padding: 0px 30px;
	border-radius: 20px;
  text-transform: capitalize;
	line-height: 2.5;
	color: #000;
  display: block;
  width: 80%;
}
#contact-mobile .contact-info a:hover{
	background: #fff;
	color: #000124;
	border: #000124 2px solid;
}
#contact-mobile .learn a{
 background: #d4af37;
 text-align: center;
}


/** testimonials **/
#testimonial-area {
  width: 100%;
  float:left;
  padding: 30px 0px;
  background: url('../img/slider/slider1.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% 100%;
  position: relative;
  z-index: 9;
  }
  #testimonial-area:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: 0.7;
    z-index: -10;
  }
#testimonail-area .active,
.accordion:hover {
  background: none;
  color: rgb(0, 0, 0);
}

#testimonial-area h3 {
  font-size: 45px;
  text-align: center;
  color: #fff;
  font-weight: 500;
  margin-bottom: -20px;
}

#testimonial-area h4 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

#testimonial-area h5 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

#testimonail-area .item p {
  color: #000;
}
.shadow-effect {
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid #ECECEC;
  box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02);
}
#customers-testimonials .shadow-effect a {
  font-family: inherit;
  color: #fff;
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 17px;
  font-weight: 300;
}
.testimonial-name {
  margin: -17px auto 0;
  display: table;
  width: auto;
  background: #000;
  padding: 9px 35px;
  border-radius: 12px;
  text-align: center;
  color: #fff;
  box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05);
}

#partners .item {
  margin: 10px;
}
#partners .shadow-effect {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Images */
#partners .shadow-effect img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* keep full logo visible */
  padding: 0px;
}

.testimonial-area {
  margin-bottom: 40px;
}

#customers-testimonials .item {
  text-align: center;
  padding: 50px 0;
  margin-bottom: 20px;
  -webkit-transform: scale3d(0.8, 0.8, 1);
  transform: scale3d(0.8, 0.8, 1);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#customers-testimonials .owl-item.active.center .item {
  opacity: 1;
  -webkit-transform: scale3d(1.0, 1.0, 1);
  transform: scale3d(1.0, 1.0, 1);
}


/** testimonial2 **/
#testimonial-area2 {
  float: left;
  width: 100%;
  padding: 50px 0px;
}
#testimonial-area2 .active,
.accordion:hover {
  background: none;
  color: #007bff;
  height: 2px;

}

#testimonial-area2  h3 {
  font-size: 40px;
  text-align: center;
  font-weight: 600;
  color: #032565;
  line-height: 1;
  margin: 0;
}
#testimonial-area2 p{
  text-align: center;
  font-size: 18px;
}

#testimonial-area2  h4 {
  font-size: 30px;
  text-align: center;
  font-weight: 600;
  color: #032565;
  line-height: 1;
  margin: 20px 0px;
}

#testimonail-area .item p {
  color: #000;
}
#testimonial-area2 .shadow-effect {
  background: #fff;
  padding: 5px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid #ECECEC;
  box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02);
}
#customers-testimonials .shadow-effect a {
  font-family: inherit;
  color: #fff;
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 17px;
  font-weight: 300;
}
.testimonial-name {
  margin: -17px auto 0;
  display: table;
  width: auto;
  background: #000;
  padding: 9px 35px;
  border-radius: 12px;
  text-align: center;
  color: #fff;
  box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05);
}

#customers-testimonial2 .item {
  text-align: center;
  padding: 10px 0;
  margin-bottom: 20px;
  -webkit-transform: scale3d(0.8, 0.8, 1);
  transform: scale3d(0.8, 0.8, 1);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#customers-testimonial2 .owl-item.active.center .item {
  opacity: 1;
  -webkit-transform: scale3d(1.0, 1.0, 1);
  transform: scale3d(1.0, 1.0, 1);
}
#testimonial-area2  .owl-carousel .owl-item img {
  height: auto;
  border-radius: 10px;
  padding: 3px;
  border: 0px #000 solid;
  transform-style: preserve-3d;
}


/**Start of Blog **/
#blog {
  margin-top: 10px;
  float: left;
  width: 100%;
  padding: 30px 0px;
  background-color: #ffffff;
}

#blog h2 {
  text-align: center;
  margin-bottom: 50px;
  margin: 0;
  color: #032565;
  font-size: 50px;
  font-weight: 600;

}
.blog_news {
  overflow: hidden;
  display: inline-grid;
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: 5px 5px 10px grey;

}
.blog_news .blog-content {
  padding: 10px;
}
.blog_news .blog-content h3 {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
  color: #303030;
  text-transform: uppercase;
}
.blog_news .blog-content h3:hover {
  text-decoration: underline;
}
.blog_news img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  padding: 10px;
  border-radius: 20px;
  margin-left: 0;
}

.blog_news p {
  font-size: 15px;
}

#blog span a {
  display: inline-block;
  text-align: center;
  font-size: 18px;
  color: #fff;
  padding: 10px 20px;
  background: #032565;
}
#blog span a:hover {
  background: #fff;
  color: #032565;
  border: 1px #032565 solid;
}
.blog_news a:hover {
  color: #3face4;
}

.blog_news h3 a {
  font-size: 18px;
  color: #000;
  text-align: left;
}

.blog_news a p {
  font-size: 16px;
}
/**End of Blog **/

/*scrollToTop*/
.scrollToTop {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #032565;
  color: #fff;
  z-index: 60000;
  display: none;
}
/*==================
 REQUEST  Start
====================*/

  /* WhatsApp icon *//* Container for the widget */
  .whatsapp-widget {
    position: fixed;
    bottom: 24%;
    right: 20px;
    z-index: 9999;
    }
    span.chat-text{
    color: #000;
    font-size: 11px;
    background: #fff;
    left: -9px;
    line-height: 1;
      position: relative;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    /* Toggle button styling */
    .whatsapp-toggle {
    position: relative;
    background-color: #25d366;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    }
    .whatsapp-toggle i {
    font-size: 28px;
    }
    
    /* Online dot indicator */
    .online-dot {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    background-color: #44b700;
    border: 2px solid #fff;
    border-radius: 50%;
    }
    /* Chat box styling (hidden by default) */
  .whatsapp-chat {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 320px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    }
    
    /* Chat box visible state */
    .whatsapp-chat.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    margin-bottom: -16px;
    right: 81px;
    }
    
    /* Keyframes for fadeDown animation */
    @keyframes fadeDown {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(20px);
    }
    }
    
    /* Chat box closing state uses fadeDown animation */
    .whatsapp-chat.closing {
    animation: fadeDown 0.3s forwards;
    }
    
    /* Chat header styling */
    .whatsapp-header {
    background-color: #25d366;
    color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    }
    .header-left {
    margin-right: 10px;
    }
    
    /* Company logo styling */
    .company-logo {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    padding: 5px;
    object-fit: contain;
    }
    
    /* Header text styling */
    .header-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    margin-right: 10px;
    }
    .header-text .company-name {
    font-weight: bold;
    }
    .header-text .chat-prompt {
    font-size: 12px;
    }
    
    /* Close button styling */
    .close-chat {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    }
    
    /* Welcome message styling */
    .welcome-message {
      padding: 30px 20px;
      background-color: #f2f2f2;
      color: #333;
      font-size: 14px;
      text-align: center;
      border-bottom: 1px solid #ddd;
  }
    /* Input container for inline message input and send icon */
    .input-container {
    display: flex;
    align-items: center;
    padding: 10px;
    }
    .input-container .whatsapp-message {
    flex: 1;
    border: 1px solid rgba(221, 221, 221, 0.62);
    border-radius: 5px;
    padding: 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    }
    .input-container .whatsapp-send {
    background-color: #25d366;
    border: none;
    margin-left: 10px;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .input-container .whatsapp-send:hover {
    background-color: #1ebe5d;
    }
    .input-container .whatsapp-send i {
    font-size: 16px;
    }
  /**Start of Media **/
  
/*==================
 REQUEST  END
====================*/


/*Footer*/

#foote {
  background: #032565;
  float: left;
  width: 100%;
}

body,
html {
  height: 100%;
}

ul {
  list-style: none;
}
a {
  text-decoration: none;
}


#foote{
  border-radius: 60px 0px 0px 0px;
  float: left;
  background: #032565;
  width: 100%;
  padding: 0px 0px;
  }
 
.flex-rw {
  display: flex;
  flex-flow: row wrap;
}

footer {
  width: 100%;
}
.footer-list-top {
  margin: 10px 10px 10px 20px;
  width: 25%;
}
ul.footer-list-top{
  padding: 0px;
}
.footer-list-top h4 {
  font-family: sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 700;
  padding-bottom: 20px;
  margin: 0;
  color: #fff;
  margin-left: -10px;
  margin-top: 30px;

}
.footer-list-top:nth-child(1){
  width: 38%;
}

.foot2 {
  width: 100%;
  float: left;
  text-align: left;
  margin-top: 20px;
  line-height: 50px;
}
.foot2 a i {
  letter-spacing: 30px;
  font-size: 25px;
  color: #fff;
}
.foot2 a i:hover {
  color: #d4af37;
}
.footer-list-top > li a {
  font-family: sans-serif;
  width: 100%;
  font-size: 16px;
  color: #fff;
  line-height: 30px;
  text-decoration: none;
  outline: none;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  display: block;
}
.footer-list-top a:hover {
  -webkit-transform: translateX(5px);
  -moz-transform: translateX(5px);
  -ms-transform: translateX(5px);
  -o-transform: translateX(5px);
  transform: translateX(5px);
  color: #d4af37;
  text-decoration: underline;
}
.footer-list-top p {
  font-family: sans-serif;
  font-size: 16px;
  color: #fff;
  width: 100%;
  line-height: 25px;
}
.footer-list-top p i {
  margin-right: 10px;
  color: #fff;
}
.footer-list-top p i a {
  font-size: 12px;
}
.footer-list-anchor {
  font: 1.3em "Open Sans", sans-serif;
}
.footer-list-top .social {
  font-size: 16px;
}
.footer-list-top .social span {
  line-height: 2;
  letter-spacing: 20px;
}

.footer-list-top .social li a {
  color: #fff;
}
.footer-list-top .social li a:hover {
  color: #032565;
}

.footable {
  width: 100%;
  float: left;
  padding: 0 0px;
  text-align: center;
  border-top: 1px #777777 solid;
}
.foot1 {
  width: 100%;
  float: left;
  padding: 10px;
}
.foot1 p{
  color: #fff;
  float: left;
  margin: 0px;
}
.foot1 a{
 color: #fff;
 float: right;
}
.foot1 a:hover{
  color: #d4af37;
  text-decoration: underline;
}