/*
 Theme Name:   Storefront Child
 Template:     storefront
 Author:       Your Name
 Description:  Child theme for Storefront
 Version:      1.0.0
 Text Domain:  storefront-child
*/



/* #### Generated By: http://font.download #### */

   
  

@font-face {
 	font-family: 'Telegraf-Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Telegraf Regular'), url('/wp-content/fonts/Telegraf/TelegrafRegular.woff') format('woff');
    }
@font-face {
    font-family: 'Telegraf-UltraLight';
    font-style: normal;
    font-weight: normal;
    src: local('Telegraf UltraLight'), url('/wp-content/fonts/Telegraf/Telegraf-UltraLight-200.woff') format('woff');
    }

  @font-face {
    font-family: 'Telegraf-UltraBold';
    font-style: normal;
    font-weight: normal;
    src: local('Telegraf UltraBold'), url('/wp-content/fonts/Telegraf/Telegraf-UltraBold-800.woff') format('woff');
    }

   












h1, h2, h3, h4, h5, h6 {
   font-family: 'Telegraf-UltraBold';
}
p, span, i, u, b, strong, input, label, select, div, section, button, textarea {
	  font-family: 'Telegraf-UltraLight';
}
a {
    font-family: 'Telegraf-Regular';
}
/* Header */
.header {
    /* width: 100%; */
    color: white;
    background-color: #141414;
    padding: 8px 0px;
    transition: all 0.3s ease-in-out;
}
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0px 20px;
    z-index: 999;
}
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
}
.logo {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
  text-decoration: none;
}
.call-btn {
    text-decoration: none;
    border: 1px solid #007BFF;
    padding: 8px 20px;
    transition: background-color 0.3s, color 0.3s;
    font-size: 20px;
    letter-spacing: 1px;
    color: #000000;
    min-width: 134px;
    height: 52px;
    border-radius: 9px;
    background-color: #1d99ff;
    text-align: center;
    border: solid 2px #1D99FF;
}

.call-btn:hover, input.wpcf7-form-control.wpcf7-submit:hover{
 color: #fff;
 background-color: transparent;
}
.call-icon-mobile {
    display: none;
}
.call-icon-mobile1 {
    width: 39px;
    height: 39px;
    border-radius: 100%;
    background-color: #141414;
    border: 2px solid #1D99FF;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
.call-icon-mobile svg {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Navigation Links (Desktop) */
.header nav.nav {
    width: 60%;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 35px;
  margin: 0;
  padding: 0;
}
.nav-links li a {
    text-decoration: none;
    transition: color 0.3s;
    font-size: 18px;
    letter-spacing: 1px;
    color: #ffffff;
}
.nav-links .active a {
    color: #1d99ff;
}
.nav-links li a:hover {
  color: #1D99FF;
}
a:focus {
	outline: 2px solid transparent !important;
}
/* Hamburger Menu Icon */
.menu-icon {
  display: none; /* Hidden by default on desktop */
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}

/* Mobile Styles */
@media (max-width: 767px) {
body {
    background-color: #141414;
}
header.header .container {
    position: static;
}
.call-icon-mobile, .logo, .menu-icon {
    width: 100%;
}
.nav-links {
    gap: 0px;
}
.header nav.nav {
    width: auto;
}
.call-btn-desktop {
    display: none;
}
.call-icon-mobile {
    display: block;
}
  .menu-icon {
    display: block; /* Show menu icon on mobile */
  }
.header {
    padding: 8px 20px;
}
.nav-links {
    width: 100%;
    display: flex;
    gap: 10px;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    top: 57px;
    padding-top: 19px;
    flex-direction: column;
    background: #141414;
    padding: 20px;
    left: -100%;
    transition: all 0.5s ease-in-out;
    z-index: -1;
}
.footer-right, .footer-left {
    width: 100%!important;
}
.nav-links li {
    margin: 5px 0;
    text-align: left;
}
.logo {
    text-align: center;
    width: 50% !important;
    margin: 0 auto;
    padding-top: 20px;
}
  .nav-links.active {
    display: flex; /* Show nav links when active */
  }

  .call-btn {
    position: absolute;
    right: 18px;
    top: 15px;
    border: none;
    padding: 0;
  }
.logodesktop {
    width: 100% !important;
}
.logodesktop img {
    width: 160px !important;
    margin: 0 auto;
}
}

.logodesktop {
    width: 20%;
}
.logodesktop img {
    width: 70%;
}

header.header.show_nav  ul.nav-links {
    left: 0;
}

	.header {
   position: sticky;
    top: 0px;
	    z-index: 1;
}



/*    footer   */


.footer {
  background-color: #1e90ff; /* Blue background */
  padding: 0px 30px;
  color: #fff;
  position: relative;
  bottom: 0;
  width: 100%;
}
/* .footer-left {
  display: flex;
  align-items: center;
  gap: 30px;
} */
.footer-left {
    display: flex;
    align-items: center;
    width: 64%;
}
.logo {
    font-size: 45px;
    font-weight: bold;
    letter-spacing: 2px;
    font-family: 'Telegraf-UltraBold';
    width: 25%;
    padding-left: 0px;
    padding-right: 20px;
}
.footer-nav a {
    text-decoration: none;
    margin-right: 20px;
    font-size: 18px;
    letter-spacing: 1px;
    color: #ffffff;
}

.footer-nav a:hover {
  text-decoration: underline;
}
.footer-right {
    font-size: 16px;
    letter-spacing: 1px;
    color: #ffffff;
    width: 36%;
}
@media (max-width: 767px) {
footer.footer .container {
    flex-wrap: wrap;
    justify-content: center;
}
.footer-left {
    gap: 0px;
    flex-wrap: wrap;
    text-align: center;
}
.footer-right {
    text-align: center;
}
nav.footer-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}
.footer-nav a {
    margin: 0;
}
}



/* banner */
.banner {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.banner img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0px;
}

/*banner text section first */
.banner-section {
    background-color: #141414;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    padding: 40px 20px;
    box-sizing: border-box;
}
.banner-section h2 {
    margin-bottom: 15px;
    font-size: 30px;
    letter-spacing: 2px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    font-family: 'Telegraf-UltraBold';
}
.banner-section p {
    width: 100%;
    max-width: 811px;
    font-size: 20px;
    letter-spacing: 1px;
    color: #ffffff;
    text-align: center;
    line-height: 1.3;
}
.banner-button {
    padding: 12px 40px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    /* width: 328px; */
    border-radius: 9px;
    background-color: #1D99FF;
    font-size: 20px;
    letter-spacing: 1px;
    color: #000000;
}
.banner-button:hover {
    background-color: #0056b3;
    color: #fff;
}
@media (max-width: 767px) {
.banner img {
    height: 300px;
}
.banner-section h2 {
    font-size: 20px;
    letter-spacing: 1px;
}
.banner-section p {
    max-width: 100%;
    font-size: 18px;
    letter-spacing: 1px;
}
}
/*   second section  why choose us */
.why-choose-us {
    text-align: center;
    padding: 50px 20px;
    background-color: #141414;
}
.why-choose-us h2 {
    font-size: 30px;
    letter-spacing: 2px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    font-family: 'Telegraf-UltraBold';
}
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
}
.feature-box {
    padding: 20px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    border-radius: 9px;
    filter: drop-shadow(0px 3px 1.5px rgba(0,0,0,0.16));
    background-color: #141414;
    border: 2px solid #1D99FF;
    z-index: 0;
}
.feature-box img {
    width: 145px;
    height: 130px;
    object-fit: contain;
    display: flex;
    flex-direction: column;
    margin: auto;
}
.feature-box h3 {
    margin-bottom: 10px !important;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    width: 264px;
    margin: 0 auto;
    font-size: 20px;
    font-family: 'Telegraf-UltraBold';
    letter-spacing: 2px;
}
.feature-box p {
    line-height: 1.3;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    margin: 0;
}
@media (max-width: 499px) {
	.features {
    grid-template-columns: 1fr !important;
}
.btn {
    font-size: 18px !important;
}
.banner-button {
    padding: 12px 27px;
    font-size: 18px;
}
}
@media (max-width: 767px) {
.why-choose-us h2 {
    font-size: 20px;
    letter-spacing: 1px;
}
.feature-box {
    display: block;
}
.feature-box img {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-bottom: 10px;
}
.why-choose-us {
    padding-top: 20px;
}
.feature-box h3, .feature-box p {
    font-size: 16px;
    margin: 0;
}
.features {
    gap: 10px;
}
.feature-box h3 {
    width: 100%;
    letter-spacing: 1px;
}
}
/* commitment section   ------*/
.commitment-section {
    display: flex;
    flex-direction: column;
    padding: 50px 20px;
    gap: 40px;
    background-color: #141414;
}
.commitment-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    max-width: 1140px;
    margin: 0 auto;
}
.left-text .text-content {
    order: 1;
    width: 50%;
}
.left-text .image-content {
  order: 2;
}

.right-text .image-content {
    order: 1;
    width: 50%;
}

.right-text .text-content {
  order: 2;
}

.text-content {
  flex: 1;
  padding: 20px;
}
.text-content h2 {
    font-size: 30px;
    letter-spacing: 2px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}
.text-content p {
    line-height: 1.3;
    font-size: 20px;
    letter-spacing: 1px;
    color: #ffffff;
    text-align: center;
}
.image-content img {
  max-width: 100%;
  border-radius: 8px;
}
.commitment-section .commitment-box.left-text .button_mobile_view, .commitment-section .commitment-box.right-text .button_mobile_view, .content-section .content-box.left-text .button_mobile_view, .content-section .content-box.right-text .button_mobile_view {
    display: none;
}
.content-section .content-box.left-text .text-content {
    /* padding-left: 105px; */
    max-width: 540px;
    margin-left: auto;
}
.content-section .content-box.right-text .text-content {
/*     padding-right: 105px; */
	 max-width: 540px;
    margin-right: auto;
}
@media (max-width: 767px) {
.commitment-section .commitment-box.left-text .button_mobile_view, .commitment-section .commitment-box.right-text .button_mobile_view, .content-section .content-box.left-text .button_mobile_view, .content-section .content-box.right-text .button_mobile_view {
    display: block;
}
.commitment-section .commitment-box.left-text .text-content .btn, .commitment-section .commitment-box.right-text .text-content .btn, .content-section .content-box.left-text .text-content .btn, .content-section .content-box.right-text .text-content .btn {
    display: none;
}
.commitment-section {
    padding-top: 0px;
    gap: 20px;
    padding-bottom: 20px;
}	
  .commitment-box {
    flex-direction: column;
    text-align: center;
	  gap: 20px;
  }
.button_mobile_view {
    order: 1;
}
.left-text .text-content, .left-text .image-content, .right-text .text-content, .right-text .image-content {
    order: initial;
    width: 100%;
}	
.text-content p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 0px;
}
.left-text .image-content {
    order: 2;
    width: 100%;
}
.right-text .image-content {
    order: 1 !important;
}
.commitment-box .text-content a.btn {
    display: none;
}
}

/* content section ------------------*/
.content-section {
    display: flex;
    flex-direction: column;
    padding: 0px 20px;
    gap: 30px;
    background-color: #141414;
    padding-left: 0px;
    padding-right: 0px;
}
.content-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
/*     max-width: 1140px; */
/*     margin: 0 auto; */
}
.left-text .text-content {
  order: 1;
}

.left-text .image-content {
    order: 2;
    width: 50%;
}

.right-text .image-content {
  order: 1;
}

.right-text .text-content {
  order: 2;
}

.text-content {
  flex: 1;
  padding: 0px;
  text-align: center;
}
.btn {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border-radius: 9px;
    background-color: #1D99FF;
    font-size: 20px;
    letter-spacing: 1px;
    color: #000000;
    width: 328px;
    border: solid 2px #1D99FF;
}
.btn:hover {
    color: #fff;
    background-color: transparent;
}
.image-content img {
    max-width: 100%;
    height: auto;
    width: 100%;
}

@media (max-width: 767px) {
.content-section .content-box.right-text .text-content, .content-section .content-box.left-text .text-content {
    padding: 20px;
	 max-width: 100%;
}
.content-section {
    gap: 0;
    padding-top: 20px;
    padding-bottom: 0px;
}
.content-section .content-box.left-text {
    margin-bottom: 20px;
}
  .content-box {
    flex-direction: column;
    text-align: center;
  }
.left-text .text-content, .left-text .image-content, .right-text .text-content, .right-text .image-content {
    order: initial;
    width: 100%;
}
.text-content h2 {
    margin-bottom: 10px;
    font-size: 20px ;
    letter-spacing: 1px;
}
.btn {
    /* display: none; */
    margin-bottom: 10px !important;
    width: 280px;
    margin: 0 auto;
    font-size: 18px;
}
}





/*  offeer section --------*/
.offer-section {
    text-align: center;
    padding: 50px 20px;
    background-color: #141414;
}
.offer-section h2 {
    margin-bottom: 30px;
    font-size: 30px;
    letter-spacing: 2px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}
.offer-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 1140px;
    margin: 0 auto;
}
.offer-section a.btn {
    margin-top: 50px;
}
.offer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    transition: transform 0.3s ease;
    width: 24%;
    gap: 10px;
    margin: 0 auto;
}

.offer-box:hover {
  transform: scale(1.05);
}
.offer-box img {
    width: 100%;
    object-fit: cover;
    height: 190px;
    border-radius: 9px;
}
.offer-button {
    width: 100%;
    padding: 8px 0;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    border-radius: 9px;
    background-color: #000000;
    border: 2px solid #1d99ff;
    font-size: 20px;
    letter-spacing: 1px;
    color: #1d99ff;
}

.offer-button:hover {
  background-color: #00bfff;
  color: #121212;
}

@media (max-width: 767px) {
.offer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.offer-box {
    width: 100%;
}
.offer-section h2 {
    font-size: 20px;
    letter-spacing: 1px;
    margin: 20px;
}
.offer-section {
    padding-top: 20px;
    padding-bottom: 0px;
}
.offer-box img {
    width: 100%;
    height: 182px;
    border-radius: 9px;
}
}



/*  4th section --------*/
.contact-section {
    background-color: #141414;
    color: #fff;
    padding: 50px 80px;
    text-align: center;
}
.contact-text h2 {
    margin-bottom: 10px;
    font-size: 30px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
}
.contact-text p {
    margin-bottom: 10px !important;
    line-height: 1.3;
    width: 479px;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
}
.highlighted-text {
    margin-bottom: 20px;
    font-size: 60px;
    color: #1d99ff;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
}
.contact-form-container {
    display: flex;
    justify-content: space-between;
    margin-top: 50px !important;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1140px;
    margin: 0 auto;
    align-items: center;
}
.form-left {
    flex: 1;
    max-width: 60%;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.input-group {
  display: flex;
  gap: 10px;
}
.contact_forms p {
    display: flex;
    gap: 10px;
/*     align-items: center; */
    width: 100%;
    margin: 15px 0px;
}
input::placeholder, textarea::placeholder {
    font-size: 20px;
    letter-spacing: 1px;
    color: #ffffff;
    line-height: 1.3;
/*     padding-left: 15px; */
}
.wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 1em;
    font-weight: normal;
    display: block;
    text-align: left;
    padding-top: 5px;
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
    width: 100%;
    padding: 12px;
    color: #fff;
    outline: none;
    height: 52px;
    border-radius: 9px;
    background-color: #00000000;
    border: 2px solid #ffffff;
}

textarea {
  height: 100px;
  resize: none;
}

.form-button {
  background-color: transparent;
  color: #50aaff;
  border: 2px solid #007bff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.form-button:hover {
  background-color: #007bff;
  color: #fff;
}
.form-right {
    flex: 1;
    max-width: 40%;
    text-align: left;
    padding-left: 30px;
}
.contact_forms_sms textarea {
    height: 141px;
    border-radius: 9px;
    border: 2px solid #ffffff;
}
input.wpcf7-form-control.wpcf7-submit {
    font-size: 20px;
    letter-spacing: 1px;
    color: #000000;
    height: 52px;
    border-radius: 9px;
    background-color: #1d99ff;
    font-weight: 400;
    line-height: 20px;
    border: solid 2px #1D99FF;
    font-family: 'Telegraf-Regular';
    width: 100%;
}
.form-right h3 {
    margin-bottom: 10px;
    font-size: 30px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
}
.form-right p {
    line-height: 1.3;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
}
.contact_forms p br {
    display: none;
}
input:focus, textarea:focus {
    background-color: transparent !important;
    color: white !important;
	outline-color: #ffffff !important;
}
@media(max-width:767px) {
.contact-section {
    padding: 50px 20px;
}
.contact-text h2 {
    font-size: 20px;
    letter-spacing: 1px;
}
.contact-text p {
    font-size: 18px;
    letter-spacing: 1px;
}
.highlighted-text {
    margin-bottom: 10px;
    font-size: 30px;
}
.contact-form-container {
    flex-direction: column-reverse;
}
.form-left, .form-right {
    max-width: 100%;
    padding-left: initial;
}
.wpcf7-spinner {
    display: none;
}
.contact_forms p {
    margin: 10px 0px;
    flex-wrap: wrap;
}
input::placeholder, textarea::placeholder {
    font-size: 18px;
    letter-spacing: 1px;
}
.form-right h3 {
    margin-bottom: 5px;
    font-size: 20px;
    letter-spacing: 1px;
}
.wpcf7-form-control-wrap {
    width: 100%;
}
}
@media(min-width:767px) and (max-width:1024px) {
.nav-links {
    gap: 18px;
}
.feature-box {
    gap: 20px;
    flex-wrap: wrap;
}
.offer-box {
    width: 23%;
    gap: 15px;
}
.content-section .content-box.left-text .text-content, .content-section .content-box.right-text .text-content {
    padding: 20px;
}
}


.call-icon-mobile1 {
    border: 2px solid transparent;
    padding: 0;
}
.call-icon-mobile svg {
    width: 39px;
    height: 39px;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner {
    margin-top: 1rem;
}