/*
 Theme Name:   	Avrix Child
 Theme URI: 	https://wordpress.validthemes.net/avrix
 Description:  	This is a child theme for Avrix - Digital Marketing WordPress Theme
 Author:       	Validthemes
 Author URI:   	https://themeforest.net/user/validthemes/portfolio
 Template:     	avrix
 Version:      	1.0
 Tags:         	two-columns, three-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, theme-options, editor-style, featured-images, microformats, post-formats,  sticky-post, threaded-comments, translation-ready
 Text Domain:  	avrix-child
*/

/*  [ Add your custom css below ]
- - - - - - - - - - - - - - - - - - - - */
@media (min-width: 1199px) {
    .banner-one-item h2 {
        font-size: 80px !important;
        display: flex !important;
        flex-direction: column !important;
    }
}
@media (min-width: 991px) {
    .col-lg-8 {
        width: 100% !important;
    }
}
.banner-one-item h4 {
    color: #BDC8EA !important;
}
.accordion-portfolio-lists {
    padding-top: 20px !important;

}
.fun-fact.text-light.animate.fadeInDown.animated {
    display: none !important;
}
.navbar-brand>img{
    width: 150px !important;
}
.page-id-16 .navbar-brand>img{
    width: 118px !important;
}
.fun-fact-circle-lists .fun-fact:last-child .counter .timer {
		background: linear-gradient(45deg, #BDC8EA 30%, #F1014F 50%) !important;
	    background-clip: text !important;
}
.header-ssecondary-clr-hero-banner {
	color:#BDC8EA !important;
}
@media (max-width: 767px){
.fun-fact-circle-lists .fun-fact:last-child .counter .timer {
    font-size: 60px !important;
}
	}
.navbar-brand>img {
    display: block;
    height: 95px !important;
}
footer img.logo {
    height: 150px !important;
    margin-bottom: 30px;
}
.fun-fact-circle-lists .fun-fact:last-child::after {
    background: #262525 !important;
}
.fun-fact-circle-lists .fun-fact:nth-child(2)::after {
    background: #262525 !important;
}

nav.navbar.validnavs li.dropdown ul.dropdown-menu {
	background: #262525 !important;
}
footer .f-item.about::after{
	    background: #262525 !important;
}
h4.widget-title {
    color: #BDC8EA !important;
}
.f-item.contact li strong {
    color: #BDC8EA !important;
}
.f-item.contact li a {
    color: #fff !important;
}
.f-item.about p {
    color: #fff !important;
}
footer .f-item.link li a {
    color: #fff !important;
}
.content {
    color: #fff !important;
}
div#avrix_cta_widget-1 p {
    color: #fff !important;
}
.text-center {
    width: 100% !important;
    text-align: right !important;
    padding-top: 25px;
}


/* ───────────────────────────────────────────────────────────────────────────
   1. Container & Layout
─────────────────────────────────────────────────────────────────────────── */
.cf7-custom-form {
  max-width: 800px;           /* adjust as needed */
  margin: 0 auto;             /* center the form */
  font-family: sans-serif;    /* or your preferred font */
  color: #222;                /* dark text on light fields */
}

/* 1a. Two‐column rows for name & company/email */
.cf7-name-div,
.cf7-second-div {
  display: flex;
  gap: 20px;                  /* space between columns */
  margin-bottom: 20px;        /* vertical spacing between rows */
}
.cf7-name-div p,
.cf7-second-div p {
  flex: 1;                    /* each <p> in these wrappers takes 50% width */
  margin: 0;
}

/* 1b. Two‐column row for phone + service‐select */
.cf7-third-div {
  float: left;
  width: 100%;
  column-gap: 20px;
}
.cf7-fourth-div {
  float: right;
  width: 48%;
  margin-bottom: 20px;
}
/* Clear floats after phone+select row */
.cf7-custom-form::after {
  content: "";
  display: table;
  clear: both;
}

/* 1c. Full‐width textarea & submit */
.cf7-textarea,
.cf7-submit {
  width: 100%;
  margin-bottom: 20px;
  display: block;
  box-sizing: border-box;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. Common Field Styling (inputs, selects, textarea)
─────────────────────────────────────────────────────────────────────────── */
/* 2a. Text, email, tel inputs */
input.cf7-input,
select.cf7-select {
  width: 100%;
  padding: 18px 20px;
  border: none;
  border-radius: 50px;
  background-color: #ffffff;
  font-size: 16px;
  color: #222222;
  box-shadow: none;
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
p.cf7-dropdown-wrapper {
    width: 60%;
}

/* 2b. Placeholder color */
input.cf7-input::placeholder,
textarea.cf7-textarea::placeholder,
select.cf7-select::-ms-value { /* for IE */
  color: #999999;
  opacity: 1;
}
input.cf7-input:-ms-input-placeholder,            /* IE 10-11 */
textarea.cf7-textarea:-ms-input-placeholder {
  color: #999999;  
}

/* 2c. Service dropdown arrow hack (optional) */
/* 
   If you want a custom arrow on your <select>, uncomment and point to your SVG/PNG. 
   Otherwise the browser default arrow will show.
*/
/*
select.cf7-select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E\
%3Cpath fill='%23999' d='M2 5L0 .667h4L2 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 10px;
}
*/

/* 2d. Textarea styling */
textarea.cf7-textarea {
  padding: 20px;
  min-height: 200px;          /* adjust height as needed */
  border: none;
  border-radius: 30px;
  background-color: #ffffff;
  font-size: 16px;
  color: #222222;
  resize: vertical;           /* allow vertical resizing */
  line-height: 1.5;
  box-sizing: border-box;
}

/* 2e. Submit button */
button.cf7-submit,
input[type="submit"].cf7-submit {
  background-color: #eeeeee;
  color: #222222;
  border: none;
  border-radius: 50px;
  padding: 15px 20px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
button.cf7-submit:hover,
input[type="submit"].cf7-submit:hover {
  background-color: #e0e0e0;
}

/* ───────────────────────────────────────────────────────────────────────────
   3. Remove Default CF7 Margins & Labels (already mostly done in markup)
─────────────────────────────────────────────────────────────────────────── */
/* Make sure CF7’s default <label> styles aren’t interfering */
.cf7-custom-form label {
  display: none;
}

/* Remove CF7’s default paragraph margins */
.cf7-custom-form p {
  margin: 0 0 0 0;
  padding: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   4. Responsive Adjustments
─────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 700px) {
  /* Stack name and company/email fields vertically */
  .cf7-name-div,
  .cf7-second-div {
    flex-direction: column;
  }
  .cf7-third-div,
  .cf7-fourth-div {
    float: none;
    width: 100%;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   1. Ensure Select Looks Like a White, Rounded Field
─────────────────────────────────────────────────────────────────────────── */
select.cf7-select {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 50px;
  background-color: #ffffff;
  font-size: 16px;
  color: #222222;
  box-shadow: none;
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. Style the First <option> (Prompt) as Disabled/Gray
─────────────────────────────────────────────────────────────────────────── */
/* 
   This CSS rule targets the very first option in each dropdown and 
   prevents users from selecting it once they've chosen something else.
*/
select.cf7-select option:first-child {
  color: #999999;         /* lighter gray text */
}

/* Prevent the first option from being re-selected (keeps it as a prompt only) */
select.cf7-select option:first-child[value="— What service are you interested in?* —"] {
  display: none;          /* hides it from the dropdown once not selected */
}

/* ───────────────────────────────────────────────────────────────────────────
   3. Arrow Icon (Optional)
─────────────────────────────────────────────────────────────────────────── */
/* 
   If you want a consistent arrow, uncomment and point to your own SVG or PNG.
   Otherwise, the browser’s default arrow will show automatically.
*/
/*
select.cf7-select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E\
%3Cpath fill='%23999' d='M2 5L0 .667h4L2 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 10px;
}
*/

/* ───────────────────────────────────────────────────────────────────────────
   4. (Optional) If You Want to Show the Prompt Initially but Hide After Selection 
   
   Some browsers treat “display: none” on <option> too aggressively. 
   If your first-child never reappears after selection, you can instead do:

select.cf7-select option:first-child {
  color: #999999;        /* gray prompt text */
}
select.cf7-select:focus option:first-child {
  display: none;         /* hide prompt only once user clicks to choose */
}
─────────────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────────────
   1. Make the select field white, fully rounded, and same height as inputs
─────────────────────────────────────────────────────────────────────────── */
select.cf7-select {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 40px 14px 20px;   /* top/right/bottom/left */
  border: none;
  border-radius: 50px;
  background-color: #ffffff;
  font-size: 16px;
  color: #222222;
  line-height: 1.2;               /* ensure taller line height so text isn’t cut */
  appearance: none;               /* remove default browser styling */
  -webkit-appearance: none;
     -moz-appearance: none;
  cursor: pointer;
  position: relative;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. Add a custom “down arrow” icon on the right, without overlapping
─────────────────────────────────────────────────────────────────────────── */
select.cf7-select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,\
%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E\
%3Cpath fill='%23999' d='M0 0l5 6 5-6H0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;  
  background-size: 10px 6px;
}

/* ───────────────────────────────────────────────────────────────────────────
   3. Gray out the first “prompt” option and keep it from being re-selected
─────────────────────────────────────────────────────────────────────────── */
/* Make the first option appear as a gray placeholder */
select.cf7-select option:first-child {
  color: #999999;
}

/* Once the dropdown is opened, hide that first placeholder so it’s not selectable again */
select.cf7-select option:first-child[value="— What service are you interested in?* —"] {
  display: none;
}

/* If “display:none” causes the item to vanish permanently in some browsers,
   you can alternatively do:
   select.cf7-select:focus option:first-child { display: none; }
   That hides the prompt only when the user opens the list. */

/* ───────────────────────────────────────────────────────────────────────────
   4. Ensure that on mobile (small widths), the select still spans 100%
─────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 700px) {
  select.cf7-select {
    float: none !important;
    width: 100% !important;
    margin-bottom: 20px;
  }
	.page-id-16 .navbar-brand>img {
    width: 72px !important;
}
}

p.cf7-dropdown-wrapper {
    width: 60%;
}
h2.title {
    color: #fff;
}
.testimonial-one-swiper-nav .testimonial-one-pagination{
	color: #fff !important;
}
.testimonial-one-swiper-nav > div::after {
	color: #fff !important;
}
h2.title.mb-30 {
    font-size: 38px !important;
    font-family: poppins;
}
.accordion-portfolio-lists li::after{
	background: linear-gradient(45deg, #FDA5BE 0%, #ADD5FA 50%) !important;
	opacity: 0.6 !important;
}
.elementor-element.elementor-element-99f7e9e.e-con-full.e-flex.e-con.e-child {
    padding: 0;
}
.elementor-element.elementor-element-b92d43d.e-con-full.e-flex.e-con.e-parent.e-lazyloaded {
    padding: 0 !important;
}
li.side-menu {
    display: none !important;
}
/* ───────────────────────────────────────────────────────────────────────────
  1. Make the CF7 wrapper spans only occupy the size of their child control,
     instead of stretching or blocking clicks on adjacent fields.
─────────────────────────────────────────────────────────────────────────── */
.cf7-custom-form .wpcf7-form-control-wrap {
  position: static !important;     /* remove any inherited positioning */
  display: inline-block !important;/* wrap exactly around the input/select/textarea */
  width: auto !important;          /* do not force full‐width by default */
  z-index: 1;                      /* sit behind the actual form control */
}

/* ───────────────────────────────────────────────────────────────────────────
  2. Ensure the actual <input>/<select>/<textarea> sits “on top” of its wrapper
     so clicks always hit the form control itself.
─────────────────────────────────────────────────────────────────────────── */
.cf7-custom-form .wpcf7-form-control-wrap input,
.cf7-custom-form .wpcf7-form-control-wrap select,
.cf7-custom-form .wpcf7-form-control-wrap textarea {
  position: relative;
  z-index: 2;                     /* bring to front */
}

/* ───────────────────────────────────────────────────────────────────────────
  3. Because we want each wrapper to shrink‐wrap its control, we need to
     override any default “width:100%” on the wrapper from CF7.
─────────────────────────────────────────────────────────────────────────── */
.cf7-custom-form .wpcf7-form-control-wrap {
  width: 100% !important;
}

/* ───────────────────────────────────────────────────────────────────────────
  4. If CF7 or your theme injects pseudo‐elements (::before/::after) into
     the wrapper, remove them so they don’t block clicks either.
─────────────────────────────────────────────────────────────────────────── */
.cf7-custom-form .wpcf7-form-control-wrap::before,
.cf7-custom-form .wpcf7-form-control-wrap::after {
  content: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
  5. Finally, re‐apply our existing “full‐width on mobile” rule so that
     phone + dropdown stack nicely on small screens.
─────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .cf7-custom-form .cf7-third-div,
  .cf7-custom-form .cf7-fourth-div {
    float: none !important;
    width: 100% !important;
    margin-bottom: 20px;
  }
	.page-id-703 .col-lg-5 {
    width: 100% !important;
}
	.cf7-third-div {
    flex-direction: column !important;
}
	p.cf7-dropdown-wrapper {
    width: 100% !important;
    margin-top: 25px !important;
}
	nav.navbar.validnavs .navbar-collapse.collapse img {
    margin-bottom: 0px !important;
}
	nav.navbar.validnavs .navbar-collapse.collapse.show img {
    height: 140px !important;
}
	nav.navbar.validnavs.navbar-fixed .logo {
    max-height: 140px !important;
}
	
}
.contact-form.contact-form.mt-30 {
    margin: 0;
}