/*   
Theme Name: Otman Qrita
Theme URI: 
Description: Custom Wordpress theme for Studio Otman Qrita
Author: Fahd Idaghdour
Author URI: http://fahdos.com
Version: 1.0
*/



/* ==========================================================================
   Reset 2020 ^^
   ========================================================================== */

*,*::before,*::after {box-sizing: border-box;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd {margin: 0;}
ul, ol{list-style: none; padding: 0; margin: 0;}
html {scroll-behavior: smooth;}
body {min-height: 100vh;text-rendering: optimizeSpeed;line-height: 1.5;}
a:not([class]) {text-decoration-skip-ink: auto;}
img,picture {max-width: 100%;display: block; height: auto;}
input,button,textarea,select {font: inherit;}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}
}
a {text-decoration: none; color: var(--dark); transition: var(--cubic); }
a:active, a:hover {outline: 0; transition: var(--cubic); outline:none}
:focus { outline: none; }
button {border: none; background: none; padding: 0;}
button:hover {cursor: pointer;} 
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
h1, h2, h3 {margin-bottom: 20px; font-weight: normal;}
p, ul {margin-bottom: 20px;}
li {margin-bottom: 5px;}

:root {
  --white: #ffffff;
  --grey: #b2b2b2 ;
  --dark: #000000;
  --times: "Times New Roman", Times, serif;
  --cubic: all .4s cubic-bezier(0.46, 0, 0.07, 1);
}

/* ==========================================================================
   General
   ========================================================================== */
html {}
body {font-family: var(--times); background: #fff; font-weight: normal; font-style: normal; font-size: 16px; color: var(--dark); line-height: 1.45; text-transform: uppercase; letter-spacing: 3px;}
section {width: 100%; padding: 90px 30px 30px 30px;}
.row {width: 100%; max-width: 1200px; margin: 0 auto;}
.no-scroll {overflow: hidden;}

.wc-block-components-checkout-place-order-button__text {font-size: 18px; text-transform: uppercase; letter-spacing: 3px;}
.wp-block-woocommerce-checkout {padding-top: 0;}


/* ==========================================================================
   Header
   ========================================================================== */
.header {padding: 30px; width: 100%; position: fixed; display: flex; justify-content: space-between; background: #ffffff; z-index: 100;}
.page-template .header .row {border-bottom: 0;}
.page-template-pricing-php .header {width: 50%;}
.header .logo {}
.header .logo img { width: 100%; height: auto;}
.header .logo .fullimg {display: block;  max-width: 180px;}
.header .logo .smallimg {display: none; height: 34px;}
.header ul {margin-bottom: 0; display: flex; gap: 15px; min-width: 250px;}
.header ul:last-of-type {justify-content: flex-end;} 
.header ul li {margin-bottom: 0; position: relative;}
.header ul li a {}
.header ul li a:hover, .header ul li.current-menu-item a {opacity: 0.7;}
/* Submenu */
.header ul li ul.sub-menu { display: none; position: absolute; top: 100%; left: 0; flex-direction: column; gap: 0; min-width: auto; line-height: 1.3;}
.header ul li.open ul.sub-menu {display: flex;}

.page-template-default .header {position: relative;}
.page-template-default section {padding: 30px;}


.home .header .row {border-bottom: none;}

.header.mobilemenu {background: #fff; width: 100%; height: 100vh; flex-direction: column; justify-content: flex-start;}
.header.mobilemenu .logo {order: 1;  margin-bottom: 30px;}
.header.mobilemenu ul {order: 2; flex-direction: column; gap: 5px; margin-bottom: 5px;}
.header.mobilemenu ul:last-of-type {justify-content: initial;}
.header.mobilemenu ul li.open ul.sub-menu {gap: 5px; margin-bottom: 0; margin-top: 5px; padding-left: 15px;}

.layoutburger { position: fixed; top: 8px; left:20px; height: 52px; width: 52px; padding: 25px 25px 0 0; display: none; z-index: 999;}

.burger-menu { position: relative; display: block; width: 26px; height: 28px; display: block; margin: 0 auto; transition: all 0.3s ease-out; cursor: pointer;}
.burger-menu .bar { transition: all 0.3s ease-out; height: 2px; width: 100%; display: block; background-color: var(--dark);}
.burger-menu .bar:nth-of-type(2) { margin: 6px 0;}
.burger-menu--closed { transition-delay: 0.3s;}
.burger-menu--closed .bar:nth-of-type(2) { width: 20px; transition-property: margin, height, width; transition-delay: 0.3s, 0.3s, 0s;}
.burger-menu--closed .bar:nth-of-type(3) { width: 24px;}
.burger-menu--closed:hover .bar:nth-of-type(2) { width: 100%;}
.burger-menu--closed:hover .bar:nth-of-type(3) { width: 100%;}
.burger-menu--opened { padding-top: 8px;}
.burger-menu--opened .bar:nth-of-type(1) { -webkit-transform: rotate(45deg); transform: rotate(45deg); transition-delay: 0.3s; height: 2px;}
.burger-menu--opened .bar:nth-of-type(2) { opacity: 0; height: 0; margin: -2px 0;}
.burger-menu--opened .bar:nth-of-type(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition-delay: 0.3s; height: 2px;}


/* ==========================================================================
   Home
   ========================================================================== */
.homeview {height: 100vh; padding-top: 90px;}
.homeview .row {height: 100%; display: flex; justify-content: center; align-content: center; align-items: center;}
.homeview .row img {display: block; width: auto; max-height: 600px;}

/* ==========================================================================
   Listing
   ========================================================================== */
.listing {}
.grid {width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 30px; column-gap: 60px;}
.grid .item {}
.grid .item a {}
.grid .item figure {display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3/4; background: #E4E4E4; padding: 20px;}
.grid .item img {width: 100%; height: 100%; display: block; object-fit: contain;}
.grid .item h2 {font-size: 18px; font-weight: normal;}

/* ==========================================================================
   Single Post
   ========================================================================== */
.singlep { height: 100vh; padding-top: 90px; box-sizing: border-box; }
.singlep .row { max-width: 100%; display: flex; flex-direction: column; height: 100%; }

.singlep .gal { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.singlep .gal:hover {cursor: pointer;}
.singlep .gal img { display: none; max-width: 100%; max-height: 100%; object-fit: contain; }

.singlep .vid {flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;}
.singlep .vid iframe { width: 100%; height: 100%; max-width: 100%; max-height: 100%;}

.singlep footer { flex-shrink: 0; display:flex; justify-content: space-between; padding-top:30px; font-size: 18px; gap: 10px; }
.singlep footer .left {display: flex; align-items: center; gap: 20px;}
.singlep footer h1 {font-size: 18px; font-weight: normal; margin-bottom: 0;}
.singlep footer button {letter-spacing: 3px;}

.singlep.singleprd .row {flex-direction: row;}
.singlep.singleprd .row .gal { width: 45%; height: 100%; background: #E4E4E4; padding:40px; }
.singlep.singleprd .row .prdinfo { width: 55%; height: 100%; padding:0 20px 0 40px; display: flex; flex-direction:column; justify-content:flex-end; }
.singlep.singleprd .row .prdinfo h1 {font-size: 18px;}
.singlep.singleprd .row .prdinfo .content {font-size: 14px; text-transform: initial; letter-spacing: normal; }
.singlep.singleprd .row .prdinfo .content * {margin-bottom: 0;}



/* ==========================================================================
   Single page
   ========================================================================== */
.page {}
.page .row {text-transform: uppercase;}



/* ==========================================================================
   Responsive
   ========================================================================== */

@media only screen and (max-width: 1170px) {
   .grid {grid-template-columns: repeat(4, 1fr); column-gap: 40px;}

}

@media only screen and (max-width: 960px) {
   .grid {grid-template-columns: repeat(3, 1fr);}
}

@media only screen and (max-width: 768px) {

   .grid {grid-template-columns: repeat(2, 1fr); column-gap: 25px; row-gap: 25px;}
   .header .logo {margin: 0 auto; text-align: center;}
   .layoutburger {display: block;}
   .header.mobilemenu ul li ul.sub-menu {position: initial;}
   .header ul {display: none;}
   .header.mobilemenu ul {display: flex;}
   .singlep footer h1, .singlep footer {font-size: 16px;}
   .singlep footer .left {gap: 5px;}
   .singlep.singleprd .row {flex-direction: column;}
   .singlep.singleprd .row .gal, .singlep.singleprd .row .prdinfo {width: 100%}
   .singlep {height: auto; min-height: 100vh;}
   .singlep.singleprd .row .prdinfo {padding: 20px;}

}

@media only screen and (max-width: 560px) {
   .grid {grid-template-columns: 1fr;}
}