/*====================================================================
   Custom CSS File for most of Desktop and Mobile look for Kipya Template
   Developed by Amazing LWEGATECH LTD team.
===================================================================**/

/*===========================================================
# FONTS & TYPOGRAPHY
===========================================================*/
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/redbugagencies/assets/fonts/CenturyGothic-Italic.woff2') format('woff2'),
        url('/redbugagencies/assets/fonts/CenturyGothic-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/redbugagencies/assets/fonts/CenturyGothic-Bold.woff2') format('woff2'),
        url('/redbugagencies/assets/fonts/CenturyGothic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    /*src: url('/redbugagencies/assets/fonts/CenturyGothic.woff2') format('woff2'),*/
    /*    url('/redbugagencies/assets/fonts/CenturyGothic.woff') format('woff');*/
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-weight: 300;line-height: 1.6;position: relative;}
body {overflow-x: hidden !important;font-family: "Plus Jakarta Sans", sans-serif!important; font-weight: normal; font-style: normal;}
h1,h2,h3,h4,h5,h6{border: 0px !important; font-family:'Plus Jakarta Sans',sans-serif;}
/***********************************
PRELOADER ANIMATION
***********************************/
#preloader { position: fixed; top: 0;left: 0;width: 100%;height: 100%; background-color: #ffffff; z-index: 9999; display: flex;justify-content: center;align-items: center;}
.preloader-content {color:#000 !important; text-align: center;}
.logo-container { margin-bottom: 50px !important; }
.spinner-container { position: relative;}
.loading-text {left: 50%; transform: translateX(-50%);margin: 0;}
@keyframes spin {0% { transform: translate(-50%, -50%) rotate(0deg); }100% { transform: translate(-50%, -50%) rotate(360deg); }}
.preloader-content p {color:#000 !important;}
.spinner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 5px solid black;border-top: 5px solid #eb1c22;border-radius: 50%;width: 100px;height: 100px;animation: spin 0.3s linear infinite;justify-content: center;align-items: center;}
#main-content {display: none; }

/**============================================================
* HEADER SECTION
*=============================================================*/
.header{background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  transition: height 1s ease, box-shadow 1s ease;  z-index: 1000;}
.sticky-header {position: fixed !important;top: 0;width: 100%;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 1000;}
.header .btn-info{background: #318EA0;border: 0px;color: #000;}
.email, .phone{border-right:1px solid #fff; color:#fff;}
.email i, .phone i, .location i{color: #eb1c22; padding-right: 10px;}
.email .list-inline-item,.phone .list-inline-item, .location .list-inline-item  {color: #fff;}
.email bi, .phone bi, .location bi{color:#000;}
.img-fluid {padding-top: 10px;max-width: 100%;height: 60%;}
.top-header{background: #000; color:#fff; padding-top:15px;  dispaly:none !important;}
.my-menu{ border-right:1px dotted #0000006e; justify-content: center;align-items: center;}
.account, .contact{padding: 0 25px; justify-content: center;align-items: center;}
.contact .account-button{padding: 15px;border-radius: 50px;background: #eb1c22;color: white;border: none; text-decoration: none; font-size:14px; }
.contact .contact-button{padding: 10px;border-radius: 20px;background: #eb1c22;color: white;border: none; text-decoration: none; }
.account-button i , .contact-button i { font-size: 16px; color:#fff; padding-right: 10px;}
.navbar .nav-item{padding-right:10px ;}
.logo{height: 100px; justify-content: center;align-items: center;}
.contact{
    margin-bottom: 50px; margin-top: 50px;
}

.header.scrolled .logo {
  height: 60px; /* Adjust to your desired smaller height */
}
.header.scrolled {
  height: 60px; /* New height when scrolled */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a slight shadow for effect */
}
/*trial for the drop-down menu*/
.navbar-nav .dropdown-menu {position: static;border: 0px solid white;border-radius: 0px;}
.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* Adjust as needed to fix any spacing issues */
}

.dropdown-toggle::after {
  display: none; /* Optional: Remove the caret icon */
}
.dropdown-item:hover { color: #fff !important;background-color: #eb1c22 !important;}
.navbar-expand-lg{float:right;}
.navbar-expand-lg .navbar-nav .dropdown-menu {column-count: 1;}
.navbar-expand-lg .navbar-nav .nav-link {font-weight: 400 !important; color: #000; font-size:16px;}
.navbar-expand-lg .navbar-nav .nav-link:hover{color:red;}
.align-items-center { align-items: center !important;}
.justify-content-center { justify-content: center !important;}

/**============================================================
* PAGE HEADER
*=============================================================*/
.page-header {
    padding:3rem;background: rgb(235,28,34);background: radial-gradient(circle, rgba(235,28,34,1) 50%, rgba(0,0,0,1) 100%);color: white;display: flex;align-items: center;justify-content: center;}
.page-header .container {text-align: center;}
.page-header h1 {font-size: 2.5em;font-weight: 700;font-style: normal;line-height: 1.15em;}
.breadcrumb {margin-top: 10px; align-items: center;justify-content: center;}
.breadcrumb a {color: white;text-decoration: none;margin: 0 5px;align-items: center;justify-content: center;}
.breadcrumb span {color: white;}

/**============================================================
* SERVICES PAGE
*=============================================================*/
.services-content{padding:5rem 0;}
.servicessidebar{  border:1px solid #e5e5e5;padding:10px; border-top:10px solid #eb1c22 ; }
.sticky-svc-sidebar{  position: sticky;top: 100px;}
.servicessidebar ul li {list-style:none; padding-bottom:10px;}
.servicessidebar li a{font-size:15px; color:#8b8f95;font-weight:600; text-decoration:none;}
.servicessidebar li a:hover{color:#eb1c22;}
.servicessidebar li a .bi-chevron-right {color:#eb1c22;font-weight:700; padding-right:5px; }
.servicessidebar h2 {padding-left: 30px; font-weight:700;padding-top: 30px;line-height: 1.26em;letter-spacing: 2px;font-size:40px;}

.svc-content img {width: 100%;height: 40%;}
.svc-content ul {padding-left: 0 !important; column-count: 2;}
.svc-content ul li{list-style:none;}
.svc-content ul li .bi{padding-right:20px; color:#eb1c22;}
.svc-content h2 {font-weight:700;margin-top: 20px;font-size:40px; color:#eb1c22;}
.svc-content h2 span {color:#000;font-weight:700; }
.svc-content .contact {padding: 25px;}
.svc-content .contact .account-button .bi{padding-left: 10px;}

/**============================================================
* CONTACT-US PAGE
*=============================================================*/
.contact-us{padding:5rem 5rem;background-image: url(/redbugagencies/assets/images/contact_bg.png);background-size: cover;}
.contact-info{padding:5rem;background:linear-gradient(to top, rgba(139,0,0,1) 0%, rgba(235,28,34,1) 100%);color: white;align-items: center;justify-content: center; z-index:1;}
.contact-form{background:#f4f6f9;padding:5rem 5rem; margin-left:-5rem; padding-left:120px;}
.contact-form .btn-lg{background:#eb1c22;}
.contact-info .footer-service .service-icon i {font-size:40px;background:none;}

/**============================================================
* FOOTER
*=============================================================*/
.footer{padding: 10px;background: #000;color:#fff !important;font-size: 15px; display:flex; background-size: contain;background-repeat: repeat; background-image: url(/redbugagencies/assets/images/footer-bg1.png);}
.footer p{color: white; display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;max-height: 8em;}
.footer h2{padding-top: 20px;color: white;}
.footer hr {color:#fff; border-top: 1px solid #fff;}
.footer li {list-style-type: none;line-height: 1.8;}
.footer li a{color: #fff;;text-decoration: none;}
.footer .social-icons li a{  font-size: 35px;color: #fff;}
.footer .social-icons li{padding:10px;}
.footer-quick-links{display:flex ;}
.footer-quick-links li{padding:10px;}
.footer-quick-links li a{text-transform: uppercase;}
.footer li a:hover{text-decoration: underline; color: #eb1c22;}
.footer ul {padding-left:0 !important;}
.footer .btn-danger {background: #eb1c22 !important; margin-top: 15px;}
.footer .copyright{;font-size: 12px;color: #fff;}
.footer .copyright a{color:#eb1c22;text-decoration: none;}
.footer-logo {height:90px;}
.footer-cta {left: 50%;background:#eb1c22; transform: translateX(-50%); width: 100%;}
.footer-cta .footer-contacts {  border-radius: 10px;}
.footer-service { padding: 8px;  display: inline-flex;}
.footer-service .service-icon { float: left;}
.footer-service .text-part { float: left; text-align: left;}
.footer-service .service-icon i { border-radius: 100%;width: 50px;height: 50px;font-size: 15px;color: #fff;text-align: center;padding: 10px 12px; background: #eb1c22;margin-right: 10px;}
.footer-service .text-part h3 { color: #ffffff;font-size:20px;}
.footer-service .text-part a {color: #ffffff; text-decoration:none;}
.footer-service .text-part p { margin: 0;color: #ffffff; font-size:16px;}

/**============================================================
* RESPONSIVENESS
*=============================================================*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){}

@media (max-width: 575px){
    .logo {height: 70px !important;}
    .contact .account-button{font-size:10px; padding:10px;}
    .account-button i{font-size:12px;padding-right: 5px;}
    .navbar-expand-lg .navbar-nav .nav-link {padding-left: 1em;}
    .navbar .nav-item {padding-right: 0px; }
    .navbar-nav .nav-item:hover{background:#fff !important; color:#eb1c22;}
    .navbar-nav .nav-link:hover {color:#fff;}
    .navbar-nav .dropdown-menu{background:#eb1c22 ;}
    .navbar-nav .dropdown-menu a{color: #fff;}
    .footer-service{padding: 10px 15px;display: block;}
    .footer-service .text-part {float: none;  }
    .servicessidebar,.breadcrumb {display:none !important;}
    .footer-logo {display:none;}
    .services-content {padding: 3rem 1rem !important;}
    /*.svc-content h2{margin-top: 10px !important; margin-bottom: 10px;}*/
    .svc-content ul {column-count: 1 !important;}
    .svc-content img{height: auto !important;}
    .footer .social-icons li a{font-size:25px;}
    .footer-service .service-icon i{font-size:15px;padding: 8px 10px;}
    .footer {padding: 10px 5px;}
    .contact-us{padding:3rem 1rem !important;}
    .contact-info{padding: 2rem 1rem!important;}
    .contact-info .footer-service .service-icon i{font-size:20px !important;}
    .contact-info.footer-service .text-part{text-align: none !important;}
    .contact-form{padding: 2rem 1rem !important;margin-top: 3rem !important;margin-right: 0 !important;padding-left: 1rem !important; margin-left: 0 !important;}
    
}
@media only screen and (min-device-width: 576px) and (max-device-width: 768px) and (orientation: portrait){
    h2{font-size:30px !important;}
    .navbar-expand-lg .navbar-nav .nav-link {padding-left: 1em;}
  .navbar .nav-item {padding-right: 0px; }
  .navbar .nav-item {padding-right: 0px; }
    .navbar-nav .nav-item:hover{background:#fff !important; color:#eb1c22;}
    .navbar-nav .nav-link:hover {color:#fff;}
    .navbar-nav .dropdown-menu{background:#eb1c22;}
    .navbar-nav .dropdown-menu a{color: #fff;}
    .services-content {padding: 3rem 0;}
    .servicessidebar{padding:10px;}
    .svc-content img {height: auto;}
    .footer-logo {height: 90px;}
    .servicessidebar ul {padding-left: 1rem;}
    .servicessidebar h2 {padding-left: 10px;padding-top: 20px;}
    .footer .social-icons li a{font-size:25px;}
    .footer-service .service-icon i{font-size:15px;padding: 8px 10px;}
    .footer {padding: 10px 5px;}
    .contact-form { padding: 5rem ! important;margin-right: 0 !important; margin-left: 0 !important;}
}
@media only screen and (min-device-width: 769px) and (max-device-width: 1023px) and (orientation: portrait){
  .contact-form { padding: 5rem ! important;margin-right: 0 !important; margin-left: 0 !important;} 
  .svc-content img {height: auto;}
   h2{font-size:30px !important;}
  .servicessidebar ul {padding-left: 1rem;}
  .servicessidebar h2 {padding-left: 10px;padding-top: 20px;}
  .services-content {padding: 3rem 0;}
  .footer-logo {height: 90px;}
  
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1240px) and (orientation: portrait){
.header .contact .account-button {padding:10px; font-size:11px;}
.header .navbar-expand-lg .navbar-nav .nav-link {font-size:14px;}
.footer-logo {height: 90px;}
.contact-us {padding: 3rem 2rem;}
.contact-info {padding: 2rem;}
.contact-form {padding: 3rem 2rem; padding-left:100px;margin-right: 0 !important;}
h2{font-size:30px !important;}
  .servicessidebar ul {padding-left: 1rem;}
  .servicessidebar h2 {margin-left: 10px;margin-top: 20px;}
  .services-content {padding: 3rem 0;}
  .dropdown-item :hover{background:#eb1c22;color:#fff;}

}