/* Import fonts  */
 @font-face {
  font-family: "varienoutline";
  src: url("../../fonts/varien_outline-webfont.woff2") format("woff2"),
    url("../../fonts/varien_outline-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "varienregular";
  src: url("../../fonts/varien-webfont.woff2") format("woff2"),
    url("../../fonts/varien-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "varienitalic_outline";
  src: url("../../fonts/varien-italic_outline-webfont.woff2") format("woff2"),
    url("../../fonts/varien-italic_outline-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "varienitalic";
  src: url("../../fonts/varien-italic-webfont.woff2") format("woff2"),
    url("../../fonts/varien-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Import root elements */
:root {
  /* --primary-color: #cc0000; */ 
  --primary-color: #cc0000;
  --secondary-color: #ffd200;
  --ternary-color: #eeeeee;

  --primary-font: "varienregular";
  --secondary-font: "Montserrat", sans-serif;
  --base-font-size: 25px;
  --small-font-size: 22px;
  --large-font-size: 30px;
  --heading-font-size: 38px;
  --text-line-height: 1.4;

  --box-shadow: 2px 2px 8px 2px rgba(58, 58, 58, 0.1);
  --button-shadow: 2px 2px 8px 2px rgba(58, 58, 58, 0.1);
  --button-radius: 1em;
  --border-radius: 15px;
  --box-border-radius: 3em;
  --large-border-radius: 100px;
}

html{
    font-size: 62.5% !important; /* 1em = 10px */
}

 html, body {
      position: relative;
      height: 100%;
      background: #eeeeee;
      font-family: var(--secondary-font);
      font-size: inherit;
      color: #000000;
      margin: 0;
      padding: 0;
    }

	.header {
		background-color: #eeeeee;
    max-width: 480px;
    margin: 0px auto;
	}

  .header.sticky-header{max-width: 480px;}

.page-container {
  max-width: 480px;
  margin: 0px auto;
	background-color: #eeeeee;
	min-height: 80%;
	display: flex;
	flex-direction: column;
}

.page-content {
	flex: 1;
	position: relative;
}

.footer {
	text-align: center;
	padding: 1em 0;
}





    .swiper {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      /* font-size: 18px; */
      background: #eee;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .mySwiper2 {
      width: 100%;
      height: auto;
      margin-left: auto;
      margin-right: auto;
    }
    .mySwiper2 .swiper-slide {
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
       background-color: #eeeeee;
    }
    .swiper {
      width: 100%;
      height: auto;
      margin-left: auto;
      margin-right: auto;
    }
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }
    .mySwiper {
      /* height: 5%;
      box-sizing: border-box;
      padding: 10px 0; */
    
    }
    .mySwiper .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 1;
    }
    .mySwiper .swiper-slide-thumb-active {
      opacity: 1;
    }
    .swiper-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
    }
    .image-grid {
		background-color: #eeeeee;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1px;
    }
    .image-grid img {
      width: 100%;
      height: 100%;
      border-radius: var(--border-radius);
    }

    h4.headig-issue {
        font: 600 normal 1.2em/2.5em var(--secondary-font);
        cursor: pointer;
		text-transform: capitalize;
    color: #000;
    }

    .swiper-slide-thumb-active h4,
    .swiper-slide h4:hover{
        color: var(--primary-color);
    }

    .next-prev-button-wrap {
        position: fixed;
        bottom: 25px;
        right: 0px;
        z-index: 3;
        width: 100px;
        height: 5px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        background-color: var(--primary-color);
        width: 40px;
        height: 40px;
        z-index: 2;
        top: 0px;
    }
    
    .swiper-button-prev{
        left: var(--swiper-navigation-sides-offset,0);
    }

    .swiper-button-next:after, 
    .swiper-button-prev:after {
        font-size: 2em;
        color: #fff;    
    }

    
    .mySwiper .swiper-slide {
        position: relative;
    }

    /* .mySwiper .swiper-slide-thumb-active:after {
        position: absolute;
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        left: 0px;
        bottom: 0px;
        background-color: var(--primary-color);
    } */
    
    .page-heading {
        font: 600 normal 2em/1em var(--primary-font);
    }

    .contact-page {
        font-size: 1.6rem;
    }

    .contact-page .contact-main-row {
        width: 100%;
        max-width: 992px;
        margin: 0px auto;
        padding: 8em 1.5em;
        font-size: 62.5%;
    }

        .contact-page .contact-main-row * {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }

    .contact-page .contact-main-row h4 {
        color: #000;
        font-size: 3.5em;
        margin-bottom: 2em;
    }

    .contact-page .image-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 0px;
        width: 100%;
    }

    .contact-infor-col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-page .wpcf7-form {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; /* Pehli row ke liye 3 columns */
        gap: 20px; /* Columns ke beech mein gap */
		padding: 4em 0em;
    }

	.contact-page .wpcf7-form p {
		text-align: left;
	}

    .contact-page .wpcf7-form .name-field,
    .contact-page .wpcf7-form .email-field,
    .contact-page .wpcf7-form .phone-field,
    .contact-page .wpcf7-form .message-field {
        padding: 0px;  
    }

    .contact-page .wpcf7-form .message-field {
        grid-column: 1 / span 3; /* Message field ko pehli row ke 3 columns ke span mein adjust karein */
    }

    .contact-page .wpcf7-form .form-submit-button {
        grid-column: 1 / span 3; /* Submit button ko bhi pehli row ke 3 columns ke span mein adjust karein */
    }

	.contact-page .form-submit-button p {
		text-align: center;
	}

	.wpcf7-response-output {
		grid-column: 1 / span 3;
		font-size: 1.6em;
	}

	.contact-page .wpcf7-form .form-submit-button .wpcf7-submit{
		display: inline-block;
		background: var(--primary-color);
		color: #fff;
		padding: 0px 0px;
		margin: 0px 0px;
		border: none;
		font: 500 normal 1.6em/2.5em var(--secondary-font);
		border-radius: 100px;
		max-width: 200px;
	}

	
	.contact-page .wpcf7-form .form-submit-button .wpcf7-submit:hover,
	.contact-page .wpcf7-form .form-submit-button .wpcf7-submit:active,
	.contact-page .wpcf7-form .form-submit-button .wpcf7-submit:focus {
		color: #000;
		background-color: var(--secondary-color);
		outline: none;
		border: none;
		box-shadow: none;
	}

    .contact-page .wpcf7-form .message-field textarea {
        width: 100%;
        height: 150px;
        resize: none;
		padding: 12px 15px;
		line-height: 2em;
    }

    .contact-page .wpcf7-form-control {
		font: normal normal 1.6em / 1.8em var(--secondary-font);
		border: 1px solid #ccc;
		padding: 0px 12px;
		width: 100%;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

	    .contact-page .wpcf7-form-control::placeholder{
			font-size: 12px;
		}

	.contact-page .wpcf7-form-control:focus {
		border: 1px solid #cc0000;
		outline: none;
		box-shadow: none;
		border-radius: 0px;
	}

    .contact-page .wpcf7-form  label{
		text-align: left;
		font: 600 normal 1.6em/1em var(--secondary-font);
		margin-bottom: 0.5em;
    }

    .contact-page .contact-infor-col h4 {
		font: 600 normal 2em / 1em var(--primary-font);
		margin-bottom: 0.5em;
    }

	.contact-page .contact-infor-col p {
		font: normal normal 1.6em/1em var(--secondary-font);
	}

  .contact-page p a {
    font: inherit;
    color: inherit;
    text-decoration: none;
  }

  .contact-page p a:hover,
  .contact-page p a:active,
  .contact-page p a:focus {
    color: var(--primary-color);
  }
  


    .address-col,
    .phone-col {
        border-right: 1px solid var(--primary-color);
    }

    .address-col h4,
    .phone-col h4,
    .email-col h4 {
        margin: 0px 0px;
        font: 600 normal 1.6em/1.6em var(--secondary-font);
    }

    .top-main-area-issue {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .logo-area {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

     .logo-area a {
        padding: 1em;
        display: block;
        max-width: 200px;
        margin-right: 1em;
     }

    .logo-area a img{
        display: block;
        max-width: 100%;
        height: auto;
    }

    .menu-wrapper {
        display: grid;
        grid-template-columns: 10% 90%;
        position: relative;
    }

    .navbar-toggler {
        border: none;
		margin: 0px auto;
    }

    .navbar-toggler-icon {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="rgba(204, 0, 0, 1)" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>');
        width: 2em;
        height: 2em;
    }

    

    .navbar-toggler:focus {
        box-shadow: none;
        outline: none;
        border: none;
    }

    span.navbar-toggler-icon {
        color: var(--primary-color);
    }
    .navbar {
        position: static;
        background-color: #eeeeee;
    }

    .navbar-collapse {
        position: absolute;
        width: 100%;
        background: #fff;
        z-index: 2;
        top: 45px;
        left: 0px;
        padding: 1em 2em;
        box-shadow: var(--box-shadow);
    }

    li.nav-item {
        border-bottom: 1px dotted #ccc;
        text-align: left;
    }

    li.nav-item:last-child {
        border-bottom: none;
    }

    .nav-link {
        font: 600 normal 1.6em/2.5em var(--secondary-font);
        color: #000;
    }

    .nav-link:hover,
    a.nav-link.active,
    .navbar-nav .nav-link.active, 
    .navbar-nav .nav-link.show {
        color: var(--primary-color);
    }

	.freelance-inner-wrap{
		width: 100%;
		/* height: 100%; */
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: center;
	}

	.freelance-ad-details {
		font-size: 100%;
		padding: 1.5em 2em;
	}

	.freelance-ad-details h4 {
		font: 500 normal 1.8em / 1em var(--secondary-font);
		text-transform: capitalize;
		margin-bottom: 0.6em;
	}

	.freelance-ad-details p {
		font: 400 normal 10px/1.48em var(--secondary-font);
    margin-bottom: 0px;
	}

  .freeLanceimg {
      background-color: #dcdcdc;
    }

    img.ad-image {
    display: block;
    width: 100%;
    max-height: 200px;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    object-fit: cover;
}
    .logo-area a {
        padding: 1em;
        display: flex;
        align-items: center;
        height: 100%;
        max-width: 120px;
    }

    .customer-logo-wrap a,
    .logo-area a:nth-child(2) {
      max-width: 60%;
      margin-right: 0px;
    }

    .image-grid {
        grid-template-columns: 100%;
        gap: 0px;
    }

    .img-wrap {
        padding: 1em 1.5em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .img-wrap img{
        display: block;
        width: 100%;
        max-height: auto;
        border-radius: var(--border-radius);
    }

	.img-wrap.freeLanceimg{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
		padding: 10px 10px;
		border-radius: 10px;
		margin-bottom: 10px;
		margin-left: 15px;
		margin-right: 15px;
		min-height: 150px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
	 	        box-sizing: border-box;
	}

  .image-grid > div.freeLanceimg:last-of-type {
    outline: 1px solid red;
  }

	.freelance-inner-wrap {
		flex-direction: row;
		align-items: flex-start;
	}

	.freelance-inner-wrap img {
		width: 30%;
		height: auto;
	}

	.freelance-inner-wrap .freelance-ad-details {
		width: 70%;
		font-size: 8px;
		padding: 1em 1em;
    padding-right: 0px;
		text-align: left;
	}

  .header.sticky-header .top-main-area-issue{
		display: none;
  }

  .header.sticky-header .menu-wrapper{
	position: fixed;
  max-width: 480px;
  left: 50%;
    transform: translate(-50%, 0px);
  width: 100%;
	z-index: 999999;
	background: var(--ternary-color);
	-webkit-box-shadow: 0px 2px 5px rgb(0 0 0 / 40%);
	   -moz-box-shadow: 0px 2px 5px rgb(0 0 0 / 40%);
	        box-shadow: 0px 2px 5px rgb(0 0 0 / 40%);
  }

	.contact-page .contact-main-row {
		padding-top: 4em;
		padding-bottom: 4em;
	}

	.contact-page .contact-main-row h4 {
		margin-bottom: 1.5em;
	}

	.contact-infor-col {
		grid-template-columns: repeat(1, 1fr);
	}

	.address-col, .phone-col {
		border-right: none;
	}

	.contact-page .address-col h4, 
	.contact-page .phone-col h4,
	.contact-page .email-col h4 {
		margin-bottom: 0.5em;
	}

	.contact-page .address-col p, 
	.contact-page .phone-col p,
	.contact-page .email-col p {
		margin-bottom: 2em;
	}

	.contact-page .wpcf7-form {
		font-size: 10px;
	}

	.contact-page .wpcf7-form .name-field, 
	.contact-page .wpcf7-form .email-field, 
	.contact-page .wpcf7-form .phone-field {
		grid-column: 1 / span 3;
	}
  
  .contact-logo {
    display: block;
    margin: 5em auto;
    max-width: 220px;
  }

@media only screen and (max-width: 991px) {
	.contact-page .contact-main-row {
		font-size: 8px;
	}
}

@media only screen and (max-width: 767px) {
 
  /* img.ad-image {
    display: block;
    width: 100%;
    max-height: 200px;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    object-fit: cover;
}
    .logo-area a {
        padding: 1em;
        display: flex;
        align-items: center;
        height: 100%;
        max-width: 120px;
    }
    .image-grid {
        grid-template-columns: 100%;
        gap: 0px;
    }

    .img-wrap {
        padding: 1em 1.5em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .img-wrap img{
        display: block;
        width: 100%;
        max-height: auto;
        border-radius: var(--border-radius);
    }

    .img-wrap.freeLanceimg{
      padding: 10px 10px;
      border-radius: 10px;
      margin-bottom: 10px;
      margin-left: 7.5px;
      margin-right: 7.5px;
    }
	.freelance-inner-wrap {
		flex-direction: row;
		align-items: flex-start;
	}

	.freelance-inner-wrap img {
		width: 30%;
		height: auto;
	}

	.freelance-inner-wrap .freelance-ad-details {
		width: 70%;
		font-size: 8px;
		padding: 1em 1em;
    padding-right: 0px;
		text-align: left;
	}

  .header.sticky-header .top-main-area-issue{
		display: none;
  }

  .header.sticky-header .menu-wrapper{
	position: fixed;
	width: 100%;
	z-index: 999999;
	background: var(--ternary-color);
	-webkit-box-shadow: 0px 2px 5px rgb(0 0 0 / 40%);
	   -moz-box-shadow: 0px 2px 5px rgb(0 0 0 / 40%);
	        box-shadow: 0px 2px 5px rgb(0 0 0 / 40%);
  }

	.contact-page .contact-main-row {
		padding-top: 4em;
		padding-bottom: 4em;
	}

	.contact-page .contact-main-row h4 {
		margin-bottom: 1.5em;
	}

	.contact-infor-col {
		grid-template-columns: repeat(1, 1fr);
	}

	.address-col, .phone-col {
		border-right: none;
	}

	.contact-page .address-col h4, 
	.contact-page .phone-col h4,
	.contact-page .email-col h4 {
		margin-bottom: 0.5em;
	}

	.contact-page .address-col p, 
	.contact-page .phone-col p,
	.contact-page .email-col p {
		margin-bottom: 2em;
	}

	.contact-page .wpcf7-form {
		font-size: 10px;
	}

	.contact-page .wpcf7-form .name-field, 
	.contact-page .wpcf7-form .email-field, 
	.contact-page .wpcf7-form .phone-field {
		grid-column: 1 / span 3;
	}
   */
}

@media only screen and (max-width: 479px) {
	.menu-wrapper {
		grid-template-columns: 12% 88%;
	}
}

@media only screen and (min-width: 768px) {
	.navbar-collapse {
		width: 250px;
	}
}



/* Scoped Loader Styles */
.loader {
  z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #cc0000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure the loader is on top of all content */
    font-family: 'Oswald', sans-serif;
    font-size: 100%;
    text-align: center;
    margin: 0;
}

.loader .wrapper {
    height: 50px;
    width: 180px;
}

.loader .circle {
    border-radius: 50%;
    border: 3px #ffffff solid;
    float: left;
    height: 50px;
    margin: 0 5px;
    width: 50px;
}

.loader .circle-1 {
    animation: loader-move 1s ease-in-out infinite;
}

.loader .circle-1a {
    animation: loader-fade 1s ease-in-out infinite;
}

@keyframes loader-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.loader .circle-2 {
    animation: loader-move 1s ease-in-out infinite;
}

@keyframes loader-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(60px); }
}

.loader .circle-1a {
    margin-left: -55px;
    opacity: 0;
}

.loader .circle-3 {
    animation: loader-circle-3 1s ease-in-out infinite;
    opacity: 1;
}

@keyframes loader-circle-3 {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.loader h1 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.05em;
    margin: 40px auto;
    text-transform: uppercase;
}