/*
Theme Name: Abar Studio
Theme URI: https://www.abar.studio/
Author: Hamid Shavarean
Version: 1.0
License: MIT License http://hamidshavarean.mit-license.org/

/* =Reset
-------------------------------------------------------------- */

@import 'css/reset.css';
@import 'css/responsive.gs.24col.css';
@import 'css/swipebox.css';
@import 'css/assets/owl.carousel.min.css';
@import 'css/assets/owl.theme.default.min.css';
@import 'css/micromodal.css?431653ABAR759968EA1C63141201FF9DDDB13127CE040397FA66FEC';


/* Fonts */
@font-face {
    font-family: 'Domaine Display Narrow';
    font-style: normal;
    font-weight: normal;
    src: local('Domaine Display Narrow'), url('fonts/DomaineDispNar-Regular.woff') format('woff');
    font-weight:normal;
    font-style:normal;
    }
    @font-face {
    font-family: 'Domaine Display Narrow';
    src: local('Domaine Display Narrow'), url('fonts/DomaineDispNar-RegularItalic.woff') format('woff');
    font-weight:normal;
    font-style:italic;
    }
    @font-face {
    font-family: 'Domaine Display Narrow';
    src: local('Domaine Display Narrow'), url('fonts/DomaineDispNar-Medium.woff') format('woff');
    font-weight:200;
    font-style:normal;
    }
    @font-face {
    font-family: 'Domaine Display Narrow';
    src: local('Domaine Display Narrow'), url('fonts/DomaineDispNar-MediumItalic.woff') format('woff');
    font-weight:200;
    font-style:italic;
    }
    @font-face {
    font-family: 'Domaine Display Narrow';
    src: local('Domaine Display Narrow'), url('fonts/DomaineDispNar-Semibold.woff') format('woff');
    font-weight:bold;
    font-style:normal;
    }
    @font-face {
    font-family: 'Domaine Display Narrow';
    src: local('Domaine Display Narrow'), url('fonts/DomaineDispNar-SemiboldItalic.woff') format('woff');
    font-weight:bold;
    font-style:italic;
    }

    @font-face {
        font-family: 'Carrois Gothic';
        src: local('Carrois Gothic'), url('fonts/Z9XPDmFATg-N1PLtLOOxvIHl9amE1C_4jtJ_.woff2') format('woff');
        font-weight:normal;
        font-style:normal;
    }
    
    @font-face {
        font-family: 'Doran';
        src: url('fonts/DoranRegular.eot') format('embedded-opentype'),
             url('fonts/DoranRegular.woff2') format('woff2'),
             url('fonts/DoranRegular.woff') format('woff');
        font-weight:normal;
    }
    
    @font-face {
        font-family: 'Doran';
        src: url('fonts/DoranExtraBold.eot') format('embedded-opentype'),
             url('fonts/DoranExtraBold.woff2') format('woff2'),
             url('fonts/DoranExtraBold.woff') format('woff');
        font-weight:bold;
    }
    
    @font-face {
        font-family: 'Darvish';
        src: url('fonts/Darvish-Condensed-Regular.woff2') format('woff2'),
             url('fonts/Darvish-Condensed-Regular.woff') format('woff');
        font-weight:normal;
    }
    
    @font-face {
        font-family: 'Darvish';
        src: url('fonts/Darvish-Condensed-Bold.woff2') format('woff2'),
             url('fonts/Darvish-Condensed-Bold.woff') format('woff');
        font-weight:bold;
    }

:root {
    --first: rgb(0,0,0);
    --second: rgb(255,255,255);
    --third: rgb(190,30,45);
    --fourth: rgb(230,165,50);
	--fifth: rgb(150,150,150);
}

html, body {
    height:100%;
}

/* Body */
body {
    cursor:default;
    background:var(--first);
    color:var(--second);
    margin:0;
    padding:0;
    overflow-x:hidden;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    font-family: 'Carrois Gothic';
    display: table;
    width:100%;
    height:100%;
}

::selection {
    color:var(--first);
    background:var(--second);
/* Safari */
}

::-moz-selection {
    color:var(--first);
    background:var(--second);
/* Firefox */
}
a  {
    color:var(--second);
    text-decoration: none;
}
a:hover {
    color:var(--fourth);
    text-decoration:none;
}

b, strong {
    font-weight:bold;
}

.container {
    width: 100%;
    max-width: 1440px;
    padding: 2em;
    margin: 0 auto;
}

.hg {
  position:fixed;
  width:100%;
  height:9rem;
  top:0;
  right:0;
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  z-index:887;
  display:none;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height:2rem;
    margin-bottom:3rem;
}

header nav {
    position:absolute;
    width:100%;
    height:250px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

header ul {
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap:.75rem;
    margin:0 auto;
    
}

header ul li {
    display:inline-block;
    text-transform:uppercase;
    font-weight:200;
    font-family:'Domaine Display Narrow';
    font-size:2.5rem;
}


@media (max-width: 600px) {
header ul li {
  /* font-size:2.3rem; */
}
}

header ul li a {
	transition:color .2s ease-in-out;
}

header ul li.current-menu-item a {
  color:var(--fourth);
}

header .main-nav ul.menu {
  flex-direction: column;
}

header .main-nav ul.menu li {
  font-size:3rem;
  margin:0;
  opacity:0;
  transition:opacity .5s ease-in-out;
}

header .main-nav ul.menu li:after {
  display:none;
}

header .open .main-nav ul.menu li {
  opacity:1;
}


.toggle-menu {
  position:fixed;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: inline-block;
  height: 50px;
  outline: none;
  padding: 0;
  pointer-events: initial;
  vertical-align: middle;
  width: 50px;
  top:2rem;
  right:2.4rem;
  z-index: 900;
}
.toggle-menu span {
  background-color: transparent;
  content: "";
  display: block;
  height: 1px;
  left: calc(50% - 13px );
  position: absolute;
  top: calc(50% - 1px );
  transform-origin: 50% 50%;
  transition: background-color .3s ease-in-out, top .3s .3s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform .2s ease-in-out;
  width: 32px;
}
.toggle-menu span:before, .toggle-menu span:after {
  background-color:var(--second);
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  transform-origin: 50% 50%;
  width: 32px;
}

.toggle-menu:hover span:before, .toggle-menu:hover span:after {
  background-color:var(--fourth);
}
.toggle-menu span:before {
  top: 4px;
}
.toggle-menu span:after {
  top: -4px;
}
.toggle-menu.active span {
  background-color: transparent;
  transition: background 0.2s ease-out;
}
.toggle-menu.active span:before, .toggle-menu.active span:after {
  transition: top .3s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform .2s .2s ease-in-out;
  background:var(--second);
}

.toggle-menu.active span:before {
  top: 0;
  transform: rotate3d(0, 0, 1, -45deg);
}
.toggle-menu.active span:after {
  top: 0;
  transform: rotate3d(0, 0, 1, 45deg);
}


#overlay {
  background:rgba(0,0,0,.95);
  height:0%;
  left: 0;
  overflow: hidden;
  position: fixed;
  text-align: center;
  top: 0;
  transition:height .7s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  width: 100%;
  z-index: 888;
}
#overlay.open {
  height:100%;
}


#touch {
    max-width:15rem;
    height:3.5rem;
    margin:0 auto;
    display:block;
    z-index:889;
    position:fixed;
}

@media (max-width: 810px) {

#touch {
max-width:10rem;
}

.toggle-menu {
  top:1.75rem;
  right:1.5rem;
}
}

.bg-image {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    background-image:url('img/LUWQ8sfm58iFEoyQxYCy.jpg');
    background-position:center center;
    background-repeat:no-repeat no-repeat;
    background-size:cover;
    animation: fade-in 2.5s ease-in-out;
}


.bg-image.bg-about {
    background-image:url('img/pM2ObqDk6S9YyRVMUFJk2.jpg');
    background-position:44% 15%;
    animation: fade-in 2.5s ease-in-out;
    filter:contrast(1.05);
    -webkit-filter:contrast(1.05);
}

.bg-image.bg-architecture {
    background-image:url('https://abar.studio/assets/media/2024/12/b1Sf80cgzM5zuBATetdyw3XubhEHJVAA.jpg');
    background-position:44% 15%;
    animation: fade-in 2.5s ease-in-out;
    filter:contrast(1.05);
    -webkit-filter:contrast(1.05);
}


.bg-image.bg-about:after, .bg-journey:after, .bg-architecture:after {
  content:'';
  position:absolute;
  bottom:0;
  width:100%;
  height:100%;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%);
}

.magics {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    animation: fade-in 2.5s ease-in-out;
}

.magics video {
      object-fit: cover;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
      filter:contrast(1.2);
      -webkit-filter:contrast(1.2);
}

@keyframes zoom-in {
  0% {
    transform: scale(.75);
    opacity:0;
  }
  100% {
    transform: scale(1);
    opacity:1;
  }
}

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

.veiled-life {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    display:flex;
    justify-content: center;
    align-items: center;
}

#veiled-life, .abarstudio-london {
    width:100%;
    max-width:40rem;
    padding:5rem 2rem 0 2rem;
    display:block;
}

#veiled-life svg path, .abarstudio-london svg path {
    fill:var(--second);
}


.abarstudio-london {
  display:flex;
  flex-direction: column;
  align-items: center;
}

.abarstudio-london span {
  display:block;
  font-family:'Domaine Display Narrow';
  font-size:2rem;
  text-transform:uppercase;
}


@media screen and (max-width: 600px) and (max-height: 900px) {
  
header nav {
  /* height:180px; */
}

header ul li {
/* font-size:1.5rem; */
}

.magics video {
  object-fit: contain;
  margin-top:-15%;
}

#veiled-life {
    max-width:20rem;
    margin-top:60%;
}

.uk .magics video {
  object-fit: cover;
  margin-top:inherit;
}

.uk #veiled-life {
    max-width:40rem;
    margin-top:inherit;
}
  
}

.f-height {
  width:100%;
  height:40vh;
  display:block;
}

.architecture .f-height {
  height:55vh;
}

.about {
  
}

.about #veiled-life {
  width:100%;
  max-width:400px;
  display:block;
  margin:0 auto 1rem auto;
}

.about #veiled-life svg g path {
  fill:var(--fourth);
}

.about p {
  font-size:1rem;
  line-height:1.5rem;
  margin-bottom:.5rem;
  text-align:justify;
}

.about .saber-abar svg {
  width:100%;
  max-width:150px;
  fill:var(--second);
  display:block;
  margin:2rem auto 0 auto;
}

.about .about-sections {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap:1rem 3rem;
  margin-top:3rem;
}

@media (max-width: 768px) {
.about p {
  text-align:left;  
}

.about .about-sections {
  grid-template-columns: repeat(1, 1fr);
}
}

.about .about-section h2 {
  font-family:'Domaine Display Narrow';
  font-size:1.75rem;
  color:var(--fourth);
  margin-bottom:1rem;
}

.about .about-section p {
  text-align:left;
  font-size:.9rem;
  line-height:1.2rem;
}

.collection {
}

.collection ul.filter {
  width: 100%;
  display: flex;
  justify-content: center;
  margin:4rem auto 2.5rem auto;
  align-items: center;
  flex-wrap: wrap;
  gap:1.35rem .5rem;
}

.collection.journey ul.filter {
  max-width: 14.7rem;
}

.collection ul.filter li {
}

.collection ul.filter li a {
  border: 1px solid var(--second);
  padding: 0.5rem;
  text-transform: uppercase;
  font-size: .8rem;
  border-radius: 3px;
}

.collection ul.filter li a:hover {
  border:1px solid var(--fourth);
}

.collection ul.filter li.current a {
  border:1px solid var(--fourth);
  color:var(--first);
  background-color:var(--fourth);
  cursor:default;
}

@media (max-width: 445px) {
.collection ul.filter {
  padding:0 1rem;
  gap:1rem .5rem;
}
.collection ul.filter li a {
  font-size:.7rem;
  padding:.4rem;
}
}

@media (max-width: 344px) {
.collection ul.filter {
  padding:0;
}
}

.collection .items {
  grid-template-columns: repeat(4, 1fr);
  display: grid;
  grid-gap: 2rem 1rem;
  margin-bottom:5rem;
  position:relative;
}

.collection .items .item {
	padding-bottom:1rem;
	animation: fade-in .3s ease-in-out;
}

.collection .items .item a {
	position:relative;
    display: block;
}

.collection .items .item a:after {
	content:"";
	position:absolute;
	width:100%;
	height:0;
	background: linear-gradient(180deg, rgba(230,165,50,.6) 0%, rgba(230,165,50,0) 100%);
	border-radius:15rem 15rem 0 0;
	top:0;
	right:0;
	opacity:0;
	mix-blend-mode: multiply;
	transition:all .2s cubic-bezier(.7,.13,.26,.81);
}

.collection .items .item a:hover:after {
	height:100%;
	opacity:1;
}

.collection .items .item img {
  width:100%;
  height:auto;
  border-radius:15rem 15rem 0 0;
}

.collection .items .item span.title {
	display:block;
	font-family: 'Domaine Display Narrow';
	color:var(--fourth);
	text-transform:uppercase;
	font-weight:bold;
	font-size:1.1rem;
	margin:.5rem 0 .25rem 0;
}

.collection .items .item span.code {
	display:block;
	color:var(--fifth);
	text-transform:uppercase;
	font-size:.8rem;
}

@media (max-width: 1245px) {
.collection .items {
  grid-template-columns: repeat(4, 1fr);
}
}

@media (max-width: 820px) {
.collection .items {
  grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 632px) {
.collection .items {
  grid-template-columns: repeat(2, 1fr);
  grid-gap:1rem 1rem;
}

.collection .items .item span.title {
	font-size:1rem;		
}

.collection .items .item span.code {
	font-size:.6rem;		
}
}

.collection.product {
	animation: fade-in 1s ease-in-out;
}

.collection.product .data {
  display:block;
  text-align:center;
  font-size:1.2rem;
}

.collection.product span {
  text-transform:uppercase;
}

.collection.product span font {
  color:var(--fourth);
}

.gallery {
  display:block;
  position:relative;
  width: 100%;
  height:500px;
}

.owl-carousel {
  position:absolute !important;
  top:0;
  right:0;
}

.owl-carousel .item {
  height:500px;
}

@media (max-width: 600px) {
.gallery {
  height:300px;
}
.owl-carousel .item {
  height:300px;
}
}


.owl-carousel .item img {
	width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.owl-theme .owl-dots .owl-dot span {
  width:5px;
  height:5px;
  background-color:var(--fourth);
  opacity:.3;
}

.owl-theme .owl-dots .owl-dot.active span {
  background-color:var(--fourth);
  opacity:1;
}


.description {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:1rem;
  margin-top:2rem;
}

.description.artist {
  grid-template-columns: repeat(1, 1fr);
}

.description.artist .items {
  margin-top:1rem;
}

.description.artist .artists-hand {
  height:50rem;
  margin-bottom:1rem;
}

.description.artist .artists-hand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1145px) {
.description.artist .artists-hand {
height:40rem;
} 
}

@media (max-width: 1024px) {
.description.artist .artists-hand {
height:35rem;
} 
}

@media (max-width: 850px) {
.description.artist .artists-hand {
height:30rem;
} 
}

@media (max-width: 680px) {
.description.artist .artists-hand {
height:22rem;
} 
}

@media (max-width: 680px) {
.description.artist .artists-hand {
height:22rem;
}
}

@media (max-width: 530px) {
.description.artist .artists-hand {
height:17rem;
} 
}

@media (max-width: 390px) {
.description.artist .artists-hand {
height:14rem;
} 
}

.description span.designer-name {
  font-size:1.2rem;
  text-transform:uppercase;
  margin-bottom:1rem;
  display:block;
}

.description ul h2, .description h2.designer {
  font-family: 'Domaine Display Narrow';
  color:var(--fourth);
  font-size:1.5rem;
  text-transform:uppercase;
  margin-bottom:.5rem;
}

.description ul li {
  text-transform:uppercase;
  font-size:1.2rem;
  margin-bottom:.25rem;
}

.xav7gou {
  width:100%;
  display:block;
  height:800px;
}
.xav7gou video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
.description {
  grid-template-columns: repeat(1, 1fr);
}

.xav7gou {
  height:300px;
}
}

h1 {
  display:block;
  font-family: 'Domaine Display Narrow';
  font-size:4rem;
  line-height:3.5rem;
  margin-top:4.5rem;
  margin-bottom:1rem;
  color:var(--fourth);
  text-transform:uppercase;
  text-align:center;
}

@media (max-width: 600px) {
h1 {
  font-size:2.5rem;
  line-height:2.5rem;
}
.architecture h1 {
  margin-top:3.5rem;
}
}

.interior {
  max-width:1024px;
  margin:0 auto;
}

.interior h1 {
  margin-bottom:2rem;
}

.interior .interior-section {
  grid-template-columns: repeat(2, 1fr);
  display: grid;
  grid-gap:0;
}

.uk .interior .interior-section {
grid-template-columns: repeat(1, 1fr);
}

.interior-inside:first-child {
  border-right:1px solid var(--fourth);
  padding-right:2rem;
}

.uk .interior-inside:first-child {
  border-right:none;
  padding-right:0;
}

.interior-inside:last-child {
  padding-left:2rem;
}

.interior-inside p {
  line-height:1.5rem;
  margin-bottom:1rem;
}

.interior-inside.farsi p {
  direction:rtl;
  text-align:right;
  font-family:'Doran';
  line-height:1.75rem;
}


.architecture svg {
  display:block;
  width:100%;
  max-width:15rem;
  height:auto;
  margin:0 auto 2rem auto;
}

.architecture p {
  display:block;
  margin-bottom:1.5rem;
}

.architecture img {
  display:block;
}


.lozad[data-loaded="true"], [data-loaded="true"] .lozad {
  animation-name: lozad;
  animation-duration: .3s;
  animation-timing-function:ease-in-out;
}
@keyframes lozad {
from {
  opacity: 0;
} to {
  opacity: 1; }
}


footer {
    width: 100%;
    display: table-row;
    height: 6rem;
    text-align:center;
    padding:1rem;
}

.uk footer {
  height:7rem;
}

footer .social {
    display:block;
    text-align:center;
    margin-bottom:.5rem;
}

footer .social a {
    font-size:1.5rem;
}

footer span {
    text-transform:uppercase;
}

footer span.copyright {
    text-align:center;
    font-size:.65rem;
    display:block;
}

footer span.registration {
    text-align:center;
    font-size:.65rem;
    display:block;
    margin:.25rem 0 .5rem 0;
}

footer span.design-code {
    text-align:center;
    font-size:.59rem;
    margin-top:0rem;
    display:block;
}

footer span.design-code a {
    font-weight:bold;
}

.infinite-loader {
  width:100%;
  position: absolute;
  bottom: -5.5rem;
  padding:0 !important;
  margin:0 !important;
}

.infinite-loader .spinner {
  line-height:0 !important;
}

.infinite-loader:after {
  content: 'Loading more';
  top: 0;
  color: var(--second);
  display: block;
  margin-bottom: 1rem;
  margin-top: -0.5rem;
  text-transform: uppercase;
  color: var(--fourth);
  font-size: .75rem;
}

.inside.contact span, .inside.contact a {
  display:block;
  text-align:center;
}

.inside.contact span.email {
  font-size:1.5rem;
  font-family: 'Domaine Display Narrow';
  text-transform:uppercase;
  color:var(--fourth);
}

.inside.contact span.inquiries {
  max-width:17rem;
  margin:.5rem auto 0 auto;
  font-size:.85rem;
}

.inside.contact a {
  width:max-content;
  margin:.5rem auto 0 auto;
  font-size:2rem;
}

.inside.careers {
  font-family: 'Darvish';
}

.inside.careers span.career font {
  color:var(--fourth);
}

/* Request Form */
.long-text.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  direction:rtl;
  text-align:right;	
}

.form .form-control .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:0 1rem;
}

@media (max-width: 520px) {
.form .form-control .grid {
  grid-template-columns: repeat(1, 1fr);
  gap:0;
}
}

.form legend {
  display:block;
  text-transform:uppercase;
  direction:rtl;
  text-align:right;
  font-size:1rem;
  font-weight:bold;
  color:var(--third);
  margin-bottom:.5rem;
}

.form .field {
  padding-bottom:1rem;
  margin-bottom:.5rem;
}

.form .situations .field {
  border-bottom:1px solid rgba(255,255,255,.15);
  margin-bottom:1rem;
}

.form .field label {
  display:block;
  direction:rtl;
  text-align:right;
  font-size:1rem;
  line-height:1.5rem;
}

.form .field label.primary:before {
  content:'•';
  font-size:1.5rem;
  padding-left:.5rem;
  vertical-align: middle;
  color:var(--third);
}

.form .field label.b {
  font-weight:bold;
  font-size:.9rem;
}

.form .field label svg {
  margin-left:.25rem;
}

.form .fa-asterisk {
  font-size:.4rem;
  margin-right:.15rem;
  vertical-align:text-top;
  color:var(--fourth);
}

.form .field label span {
  color:var(--sixth);
}

.form .field span.description {
  display:block;
  font-size:.9rem;
  direction:rtl;
  text-align:right;
  margin-top:.5rem;
}

.form input, .form textarea {
   color: var(--second);
   border-radius:.5rem;
   border:1px solid rgba(255,255,255,.05);
   background-color:rgba(255,255,255,.15);
   outline: 0;
   font-family: 'Darvish';
   direction:rtl;
   text-align:right;
   font-weight:normal;
   padding: .5rem;
   font-size: 1rem;
   width: 100%;
   height: 40px;
   margin-top:.5rem;
   transition:border .15s ease-in;
}

.form input[type=email] {
  font-family: 'Carrois Gothic';
  direction:ltr;
  text-align:left;
}

.form input[type=file] {
  font-family: 'Carrois Gothic';
  background-color:transparent;
}

.form input:focus, .form textarea:focus {
  border:1px solid rgba(255,255,255,.25);
}

img.artwork {
  display:block;
  width:100%;
  max-width:600px;
  height:auto;
  border-radius:.5rem;
  margin:1rem auto .5rem auto;
}

span.artwork-caption {
  display:block;
  font-family: 'Carrois Gothic';
  direction:ltr;
  font-size:.65rem;
  color:var(--fifth);
  margin:1rem 0 .5rem 0;
}

.brands img {
  width:auto;
  height:2rem;
}

.brands img.versace, .brands img.ikea {
  height:2.75rem;
}

@media (max-width: 500px) {
.brands img {
  height:1.5rem;
}
.brands img.versace, .brands img.ikea {
  height:2.25rem;
}
}

@media (max-width: 416px) {
.brands img {
  height:1.25rem;
}
.brands img.versace, .brands img.ikea {
  height:2rem;
}
}


.form textarea {
  height:inherit;
}

.form .field span.note {
  display:block;
  margin-top:.5rem;
  font-weight:normal;
  font-size:.8rem;
  direction:rtl;
  text-align:right;
  color:var(--sixth);
}

.form .field span.note font {
  font-family: 'Carrois Gothic';
  font-size:.8rem;
}

.form input[type=checkbox] {
  width:inherit;
  height:inherit;
}

.form input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.form input[type=file] {
  border:none;
  font-size:.85rem;
  padding:.5rem 0;
}

.radio label, .checkbox label {
  margin-top:.35rem;
}

.c-radio {
  display: inline-block;
  position: relative;
  padding-right:1.35rem;
  margin-left:15px;
  cursor: pointer;
  user-select: none;
}

.c-radio .checkmark {
  position: absolute;
  right:0;
  top:5px;
  height: 16px;
  width: 16px;
  background-color:rgba(255,255,255,.25);
  border:1px solid var(--first);
  border-radius: 50%;
}

.c-radio input:checked ~ .checkmark {
  border:2px solid rgba(255,255,255,.5);
  background-color: var(--first);
}

.c-radio .checkmark:after {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  background: var(--fourth);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition:all .15s ease-in;
}

.c-radio input:checked ~ .checkmark:after {	
  width: 6px;
  height: 6px;	
}

.brands .radio {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-top:1rem;
}


@media (max-width: 888px) {
.brands .radio {
  grid-template-columns: repeat(2, 1fr);
  gap:2rem .5rem;
} 
}


.c-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.c-checkbox {
  display: inline-block;
  position: relative;
  padding-right:1.35rem;
  margin-left:15px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}

.c-checkbox .checkmark {
  position: absolute;
  right:0;
  top:5px;
  height:16px;
  width:16px;
  background-color:rgba(255,255,255,.25);
  border:1px solid var(--first);
  border-radius: 0px;
}

.c-checkbox input[type="checkbox"]:checked ~ .checkmark {
  border:2px solid rgba(255,255,255,.5);
  background-color:var(--first);
}

.c-checkbox .checkmark:after {
  content: "";
  position: absolute;
  left:50%;
  top:50%;
  width:4px;
  height:8px;
  border: solid var(--fourth);
  border-width: 0 0 0 0;
  transform:translate(-50%, -60%) rotate(45deg);
  transition:all .1s ease-in;
}

.c-checkbox input[type="checkbox"]:checked ~ .checkmark:after {
  border: solid var(--fourth);
  border-width: 0 2px 2px 0;
}

span.confidentiality {
  display:block;
  direction:rtl;
  text-align:right !important;
  font-size:.9rem;
  line-height:1.35rem;
}

.form button[type=submit] {
  text-transform:uppercase;
  background-color:#232323;
  font-family: 'Darvish';
  padding: .5rem;
  font-size: 1rem;
  border:1px solid #343434;
  outline: 0;
  width: 100%;
  height: 45px;
  border-radius:.5rem;
  cursor: pointer;
}

.form button[type=submit] span {
  font-weight:bold;
  color:var(--second);
}

.form button[type=submit] span svg {
  margin-left:.25rem;
  color:var(--fourth);
  transition:margin-left .1s ease-out;
}

.form button[type=submit]:hover {
  background-color:var(--fourth);
}

.form button[type=submit]:hover span {
  color:var(--first);
}

.form button[type=submit]:hover span svg {
  color:var(--first);
  margin-left:.5rem;
}

.brands label.c-radio {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  gap: 1rem;
}

.brands .c-radio .checkmark {
  position:inherit;
}

/* Container styling */
#progress-container {
  display:none;
  position:relative;
  overflow:hidden;
  width: 100%;
  max-width:600px;
  background-color: var(--first); /* Progress bar background */
  height: 12px;
  margin-top: 2rem;
}

/* Progress bar styling */
.progress-bar {
  width: 0; /* Initially zero */
  height: 100%;
  background-color: var(--first);
  transition: width 0.4s ease; /* Smooth transition */
}

.progress-bar.wait {
  position:absolute;
  width:calc(100% + 24px) !important;
  left: -24px;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, var(--fourth)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, var(--fourth)), color-stop(0.75, var(--fourth)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(-45deg, var(--fourth) 25%, transparent 25%, transparent 50%, var(--fourth) 50%, var(--fourth) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, var(--fourth) 25%, transparent 25%, transparent 50%, var(--fourth) 50%, var(--fourth) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, var(--fourth) 25%, transparent 25%, transparent 50%, var(--fourth) 50%, var(--fourth) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, var(--fourth) 25%, transparent 25%, transparent 50%, var(--fourth) 50%, var(--fourth) 75%, transparent 75%, transparent);
  -webkit-background-size: 24px 24px;
  -moz-background-size: 24px 24px;
  -o-background-size: 24px 24px;
  background-size: 24px 24px;

  -webkit-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  -moz-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  -ms-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  -o-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  animation: pace-theme-barber-shop-motion 500ms linear infinite;
}

@-webkit-keyframes pace-theme-barber-shop-motion {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(24px, 0); transform: translate(24px, 0); }
}
@-moz-keyframes pace-theme-barber-shop-motion {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(24px, 0); transform: translate(24px, 0); }
}
@-o-keyframes pace-theme-barber-shop-motion {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(24px, 0); transform: translate(24px, 0); }
}
@-ms-keyframes pace-theme-barber-shop-motion {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(24px, 0); transform: translate(24px, 0); }
}
@keyframes pace-theme-barber-shop-motion {
  0% { transform: none; transform: none; }
  100% { transform: translate(24px, 0); transform: translate(24px, 0); }
}

#status {
  display:none;
  margin-top:2rem;
}

span.sent, span#error {
  display:block;
  text-align:center;
  margin-top:1.5rem;
}

span.sent b, span#error b {
  font-size:1.3rem;
}

span.sent svg {
  display:block;
  margin:0 auto .5rem auto;
  font-size:2rem;
  color:#9bcf7d;
}

span#error svg {
  display:block;
  margin:0 auto .25rem auto;
  font-size:2rem;
  color:#fc6e7c;
}