:root {
  --flourescent-blue: hsl(13, 91%, 45%);
  --blue-ryb: hsla(23, 100%, 58%, 0.912);
  --gradient: linear-gradient(to right, var(--flourescent-blue), var(--blue-ryb));
  --transition: 0.25s ease-in-out;
}
:root {
  /* fonts */
  --font-radley: Radley;
  --font-raleway: Raleway;
  --font-font-awesome-6-brands: "Font Awesome 6 Brands";

  /* font sizes */
  --font-size-5xl: 24px;
  --font-size-base: 16px;
  --font-size-xl: 20px;

  /* Colors */
  --dark-blue: #0e1f51;
  --white: #fff;
  --color-whitesmoke: #f7f7f7;
  --color-crimson: #ff3e54;

  /* border radiuses */
  --br-3xs: 10px;
}

.nav-link {
  color: #7c7c7d;
  font-size: var(--fs-4);
  padding: 10px;
  border-radius: 4px;
}

.nav-link:is(:hover, :focus) {
  background: hsla(0, 0%, 100%, 0.1);
}

.nav-link {
  position: relative;
  /* padding-top: 50px; */
}
/* .nav-link  {
  padding-left: 10px;
} */

.nav-link::after {
  --scale: 0;
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(var(--scale));
  transform-origin: left;
  width: calc(100% - 20px);
  height: 2px;
  background: var(--gradient);
  transition: var(--transition);
}

.nav-link:is(:hover, :focus) {
  background: var(--gradient);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.nav-link:is(:hover, :focus)::after {
  --scale: 1;
}
/* contactbutton2 for link mobile */


.contact-button2 {
  color: #7c7c7d;
  font-size: var(--fs-4);
  padding: 0px;
  /* border-radius: 4px; */
}

.contact-button2:is(:hover, :focus) {
  background: hsla(0, 0%, 100%, 0.1);
}

.contact-button2 {
  position: relative;
  /* padding-top: 50px; */
}
 

.contact-button2::after {
  --scale: 0;
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(var(--scale));
  transform-origin: left;
  width: calc(100% - 20px);
  height: 2px;
  background: var(--gradient);
  transition: var(--transition);
}

.contact-button2:is(:hover, :focus) {
  background: var(--gradient);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.contact-button2:is(:hover, :focus)::after {
  --scale: 1;
}



.home-link {
    background: var(--gradient);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
  
  .home-link::after {
    --scale: 1;
  }








/* Dropdown */
.dropdown {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Added transition for opacity */
  list-style-type: none;
  padding: 0;
  opacity: 0; /* Initialize with opacity 0 */  border-radius: 15px;

}

.dropdown:hover .dropdown-content {
  display: inline;
  opacity: 1; /* On hover, change opacity to 1 */   

}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: background-color var(--transition);
}

.dropdown-content a:hover {  border-radius: 15px;

  background-color: #ddd;
}

/* button*/


.containeremp {
    text-align: center;
}

.centered-contentemp {
    width: 100%;
}

.image-containeremp {
    position: relative;
    display: inline-block;
    max-width: 100%;
    width: 100%;
}

.image-containeremp img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.image-textemp {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    padding: 0 20px;
    margin-top: 5%;
}

.image-textemp h3 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 39px;
    color: #fff;
}

.contact-button1 {
  height: 30px;
  
  padding: 0px 10px;
  padding-top: 4.5px;

  text-align: center;
    background-color: #FF3E54;
    color: #ffffff;
    /* padding-left: 100px; */
    /* padding: 8px 20px; */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: inline-block;
    margin-left: 15px;
    margin-top: 10px;
    font-size: 12px;
}

.contact-button1:hover {
    background-color: #000000;
    color: #fff;
    text-decoration: none;    
}

.contact-button {
  height: 30px;
  padding: 8px 24px;
  padding-top: 4px;
  text-align: center;
    background-color: #FF3E54;
    color: #ffffff;
    /* padding-left: 100px; */
    /* padding: 8px 20px; */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: inline-block;
    margin-left: 15px;
    /* margin-top: 1px; */
    font-size: 12px;
    margin-bottom: 50px;
}

.contact-button:hover {
    background-color: #0E1F51;
    color: #fff;
    text-decoration: none;    
}

/* Media Queries */
/* BUTTON1 */
@media (max-width: 480px) {
    .contact-button1 {
        display: none;
    }
   
}
 



@media (min-width: 481px) and (max-width: 768px) {
   
     .contact-button1 {
               display: none;

    }
}
/* 990 break if  */
@media (min-width: 769px) and (max-width: 991px) {
    .contact-button1 {display: none;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
    .contact-button2 {display: none;}

}

@media (min-width: 1025px)  {
    
    .contact-button2 {
               display: none;
    }
}
 
/* BUTTON  */
@media (max-width: 480px) {
    .image-textemp h3 {
        font-size: 13px;
        margin-bottom: 12px;
    }
   .contact-button {
        margin-bottom:0px;
        padding:8px 10px ; 
          font-size:9px;
          /* padding: auto; */
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .image-textemp h3 {
        font-size: 14px;
        /* margin-top:100px; */
    }
    .contact-button {
        font-size: 12px;
        /* padding: 7px 18px; */    margin-bottom: 0px;

    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .image-textemp h3 {
        font-size: 28px;
    }
    /* .contact-button {
        font-size: 14px;
        padding: 8px 20px;
    } */
}

/* @media (min-width: 1025px) and (max-width: 1200px) {
    .image-textemp h3 {
        font-size: 38 px;
    }
    .contact-button {
        font-size: 16px;
        padding: 10px 22px;
    }
} */

/* banners top */
.banners {
  background-color: #0E1F51   ;
  color: white;
  padding: 30px 0;
  text-align: center;
  position: relative;
}

.banners h2 {
  margin-bottom: 10px;
  color: #FF3E54 ;
}
/* .banners h2 {
color: #fff;
} */

.text-center {
  text-align: center;
}

.container-top {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .banners {
    padding: 15px 0;
  }
  
  .banners h2 {
    font-size: 24px;
  }
}






/*==================== 
  Footer 
====================== */

/* Main Footer */
footer .main-footer{  padding: 20px 0;  background: #0E1F51;}
footer ul{  padding-left: 0;  list-style: none;}

/* Copy Right Footer */
.footer-copyright { background: #222; padding: 5px 0;}
.footer-copyright .logo {    display: inherit;}
.footer-copyright nav {    float: right;    margin-top: 5px;}
.footer-copyright nav ul {  list-style: none; margin: 0;  padding: 0;}
.footer-copyright nav ul li { border-left: 1px solid #505050; display: inline-block;  line-height: 12px;  margin: 0;  padding: 0 8px;}
.footer-copyright nav ul li a{  color: #969696;}
.footer-copyright nav ul li:first-child { border: medium none;  padding-left: 0;}
.footer-copyright p { color: #969696; margin: 2px 0 0;}

/* Footer Top */
.footer-top{  background: #0E1F51;  padding-bottom: 30px; margin-bottom: 30px;  border-bottom: 3px solid #222;}

/* Footer transparent */
footer.transparent .footer-top, footer.transparent .main-footer{  background: transparent;}
footer.transparent .footer-copyright{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3) ;}

/* Footer light */
footer.light .footer-top{ background: #f9f9f9;}
footer.light .main-footer{  background: #f9f9f9;}
footer.light .footer-copyright{ background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3) ;}

/* Footer 4 */
.footer- .logo {    display: inline-block;}

/*==================== 
  Widgets 
====================== */
.widget{  padding: 20px;  margin-bottom: 40px;}
.widget-last{  margin-bottom: 0px;}
.widget.no-box{ padding: 0; background-color: transparent;  margin-bottom: 40px;
  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none;}
.widget.subscribe p{  margin-bottom: 18px;}
.widget li a{ color: #fff;}
.widget li a:hover{ color: #aaa;text-decoration: none;}
.widget-title {margin-bottom: 20px;}
.widget-title span {background: #839FAD none repeat scroll 0 0;display: block; height: 1px;margin-top: 25px;position: relative;width: 20%;}
.widget-title span::after {background: inherit;content: "";height: inherit;    position: absolute;top: -4px;width: 50%;}
.widget-title.text-center span,.widget-title.text-center span::after {margin-left: auto;margin-right:auto;left: 0;right: 0;}
.widget .badge{ float: right; background: #7f7f7f;}

.typo-light h1, 
.typo-light h2, 
.typo-light h3, 
.typo-light h4, 
.typo-light h5, 
.typo-light h6,
.typo-light p,
.typo-light div,
.typo-light span,
.typo-light small{  color: #fff;}

ul.social-footer2 { margin: 0;padding: 0; width: auto;}
ul.social-footer2 li {display: inline-block;padding: 0;}
ul.social-footer2 li a:hover {background-color:#ff8d1e;}
ul.social-footer2 li a {display: block; height:30px;width: 30px;text-align: center;}
.btn{background-color: #ff8d1e; color:#fff;}
.btn:hover, .btn:focus, .btn.active {background: #4b92dc;color: #fff;
-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-webkit-transition: all 500ms ease-in-out 0s;
-moz-transition: all 500ms ease-in-out 0s;
-ms-transition: all 500ms ease-in-out 0s;
-o-transition: all 500ms ease-in-out 0s;
transition: all 500ms ease-in-out 0s;
}

#subscribe-box .emailfield {
    margin: auto;
    /* color: #fff; */
}

input[type="text"] {
    /* background: rgba(255,255,255,0.075); */
    padding: 10px 15px;
    color: #aaa;
    border: 3px solid rgba(0,0,0,0.1);
    font-size: 14px;
    margin-bottom: 16px;
    border-radius: 5px;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    transition-delay: 0.2s;
    text-align: center;
    width: 100%;
} 

input.submitbutton.ripplelink {
    background: #FF3E54;
    border: 3px solid rgba(0,0,0,0.1);
    color: #fff;
    border-color: #e67e22;
    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2);
    transition-delay: 0s;
    width: 100%;
    font-size: 14px;
    /* font-weight: 700;   */
    border: 0px solid;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    padding: 10px 15px;
    margin-bottom: 16px;
    border-radius: 5px;
}
input.submitbutton.ripplelink:hover {
    /* background: #0E1F51; */
    border: 3px solid rgba(0,0,0,0.1);
    color: #fff;
    border-color: #e67e22;
    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2);
    transition-delay: 0s;
    width: 100%;
    font-size: 14px;
    /* font-weight: 700;   */
    border: 0px solid;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    padding: 10px 15px;
    margin-bottom: 16px;
    border-radius: 5px;
}

.thumb-content ::before {
    content: "\f190";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    margin-left: 5px;
    color: #ffffff;
}

/* icon anim */
.single-box    li div:hover {
  transform: rotate(360deg);
  border-radius: 100px;
}
.single-box ul li a {
	/* text-decoration: none; */
	color: #fff;
	/* line-height: 2.5; */
	/* font-weight: 100; */
    font-size: 16px;
}
.single-box ul li a:hover {
	color: pink;
	padding-left: 8px;

}

/* Apply styles to the social icons */
.social-icon {
    display: inline-block;
    margin: 5px; /* Adjust the margin as needed */
    overflow: hidden;
    transition: transform 0.3s ease;
}

.social-icon img {
    width: 50px; /* Set the width of your images */
    height: auto;
}

/* Add zoom-in effect on hover */
.social-icon:hover {
    transform: scale(1.2);
}