/*
 Theme Name: Amr Serag (Divi Child)
 Theme URI: https://www.behance.net/amrserag
 Description: Apple-style dark portfolio system for Divi. Install Divi first, then activate this child theme.
 Author: Amr Serag
 Template: Divi
 Version: 1.0.0
 Text Domain: amr-serag
*/
/* Amr Serag portfolio, Apple-style dark system for Divi. Classes are prefixed ao-. */




/* sections */
.ao-sec{padding:0!important;background:#000;color:#f5f5f7;font-family:Inter,SF Pro Display,SF Pro Text,system-ui,-apple-system,Segoe UI,sans-serif;position:relative}
.ao-sec *{box-sizing:border-box}
.ao-space{padding:0 0 clamp(72px,9vw,128px)!important}
.ao-space-top{padding:clamp(72px,9vw,128px) 0 clamp(48px,6vw,80px)!important}
.ao-nav{height:44px;display:flex;align-items:center}
.ao-strip{background:#1d1d1f!important;padding:12px 16px!important;text-align:center}
.ao-footer{padding:24px 0!important;border-top:1px solid #333336}
.ao-fade{background:linear-gradient(#1d1d1f,#000 288px)!important;padding:clamp(72px,9vw,128px) 0!important}

/* hero and contact image sections */
.ao-hero,.ao-contact{background-color:#0e0e0e!important;background-size:cover!important;background-repeat:no-repeat!important;display:flex;align-items:center}
.ao-hero{min-height:clamp(560px,52vw,720px);justify-content:center;padding:clamp(48px,6vw,88px) 0!important;margin-bottom:clamp(72px,9vw,128px)}
.ao-hero:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:0}
.ao-contact{padding:clamp(96px,12vw,176px) 0!important;background-position:right bottom!important}
.ao-contact:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0));z-index:0}
.ao-hero .et_pb_row,.ao-contact .et_pb_row{position:relative;z-index:1}
.ao-hero .ao-row{text-align:center;justify-content:center}
.ao-hero .ao-col{align-items:center}

/* rows and columns */
.ao-sec .ao-row{display:flex!important;flex-wrap:wrap;gap:clamp(16px,2vw,24px);width:100%!important;max-width:1200px!important;margin:0 auto!important;padding:0 clamp(16px,4vw,48px)!important}
.ao-row:before,.ao-row:after{display:none!important}
.ao-row>.et_pb_column{margin:0!important;float:none!important;min-width:0;padding:0}
.ao-row+.ao-row{margin-top:clamp(16px,2vw,24px)!important}
.ao-sec .et_pb_module{margin:0!important}
.ao-sec .ao-row>.et_pb_column>.et_pb_module+.et_pb_module{margin-top:16px!important}
.ao-c12{width:100%!important}
.ao-c8{width:calc((100% - 2*clamp(16px,2vw,24px))/3*2 + clamp(16px,2vw,24px))!important}
.ao-c6{width:calc(50% - clamp(16px,2vw,24px)/2)!important}
.ao-c4{width:calc((100% - 2*clamp(16px,2vw,24px))/3)!important}
.ao-c3{width:calc((100% - 3*clamp(16px,2vw,24px))/4)!important}
.ao-c2{width:calc((100% - clamp(16px,2vw,24px))*2/5)!important}
.ao-c35{width:calc((100% - clamp(16px,2vw,24px))*3/5)!important}
@media (max-width:1100px){.ao-c3{width:calc(50% - clamp(16px,2vw,24px)/2)!important}}
@media (max-width:980px){.ao-c4{width:calc(50% - clamp(16px,2vw,24px)/2)!important}}
@media (max-width:767px){.ao-c8,.ao-c6,.ao-c4,.ao-c3,.ao-c2,.ao-c35{width:100%!important}}
.ao-nav .ao-row{flex-wrap:nowrap;align-items:center;justify-content:space-between}
.ao-nav .ao-c6{width:auto!important}

/* panels (Carbon rounded blocks built from a top row and a bottom row) */
.ao-sec .ao-panel{background:#1d1d1f;width:calc(100% - 2*clamp(16px,4vw,48px))!important;max-width:calc(1200px - 2*clamp(16px,4vw,48px))!important;padding:clamp(24px,5vw,64px)!important}
.ao-sec .ao-panel-top{border-radius:28px 28px 0 0;padding-bottom:clamp(32px,5vw,64px)!important}
.ao-sec .ao-panel-bot{border-radius:0 0 28px 28px;padding-top:0!important;margin-top:0!important}
.ao-sec .ao-panel-solo{border-radius:28px}
.ao-sec .ao-panel-mid{border-radius:0;margin-top:0!important;padding-top:0!important}
.ao-sec .ao-panel-split{align-items:flex-start}

/* tiles */
.ao-tile{background:#000;border-radius:28px;padding:32px!important;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.ao-tile-sm{min-height:140px;gap:32px}
.ao-tile .et_pb_module{width:100%}
.ao-icon svg{width:40px;height:40px;display:block}

/* project cards */
.ao-card{position:relative;aspect-ratio:4/3;background:#1d1d1f;border-radius:28px;overflow:hidden}
.ao-card .ao-card-img,.ao-card .ao-card-img .et_pb_image_wrap,.ao-card .ao-card-img img{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover;display:block;margin:0!important}
.ao-card .ao-card-text{position:absolute!important;left:32px;right:32px;bottom:28px;z-index:2;pointer-events:none}
.ao-card .ao-card-text a{pointer-events:auto}

.ao-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.6));z-index:1;pointer-events:none}

/* image blocks */
.ao-shot,.ao-shot .et_pb_image_wrap,.ao-shot img{display:block;width:100%!important;border-radius:28px;overflow:hidden}
.ao-shot img{object-fit:cover}
.ao-shot-169 img{aspect-ratio:16/9}
.ao-shot-43 img{aspect-ratio:4/3}
.ao-shot-45 img{aspect-ratio:4/5}
.ao-sig img{height:30px!important;width:auto!important;display:block}

/* type */
.ao-sec h1,.ao-sec h2,.ao-sec h3,.ao-sec p{padding:0!important;font-family:Inter,SF Pro Display,SF Pro Text,system-ui,-apple-system,Segoe UI,sans-serif;color:#f5f5f7}
.ao-sec p{margin:0}
.ao-name{font-size:32px;line-height:1.13;font-weight:600;letter-spacing:.128px}
.ao-h1{font-size:clamp(44px,6.4vw,96px);line-height:1.1;font-weight:600;letter-spacing:-.015em;text-wrap:balance;margin:0}
.ao-h1-light{font-weight:300;max-width:14ch}
.ao-hero .ao-h1{max-width:14ch}
.ao-h2{font-size:clamp(40px,5.6vw,80px);line-height:1.05;font-weight:600;letter-spacing:-.015em;margin:0;text-wrap:balance}
.ao-h2-md{font-size:clamp(28px,3.4vw,48px);line-height:1.05}
.ao-h2-light{font-weight:300;font-size:clamp(32px,4.4vw,56px);line-height:1.25;max-width:18ch}
.ao-h3{font-size:28px;line-height:1.1;font-weight:600;letter-spacing:.196px;margin:0}
.ao-h3-sm{font-size:21px;line-height:1.19;letter-spacing:.231px}
.ao-statement{font-size:clamp(26px,3.4vw,48px);line-height:1.25;font-weight:300;letter-spacing:-.01em;max-width:20em;text-wrap:balance}
.ao-lead{font-size:clamp(19px,1.8vw,26px);line-height:1.24;letter-spacing:-.26px;color:rgba(245,245,247,.8)!important;max-width:30em}
.ao-sec .ao-ash,.ao-sec .ao-ash p{color:#86868b!important}
.ao-body{font-size:17px;line-height:1.47;letter-spacing:-.374px;color:#86868b!important;max-width:30em}
.ao-small{font-size:14px;line-height:1.29;letter-spacing:-.224px;color:#86868b!important}
.ao-sec .ao-val{font-size:17px;line-height:1.47;letter-spacing:-.374px;color:#f5f5f7!important}
.ao-nav-links{font-size:12px;line-height:16px;letter-spacing:-.12px;text-align:right}
.ao-nav-links a{color:rgba(255,255,255,.8)!important;margin-left:clamp(16px,3vw,32px)}
.ao-nav-links a:hover,.ao-nav-links a.is-on{color:#fff!important}
.ao-sec a{text-decoration:none}
.ao-strip p{font-size:14px;line-height:20px;letter-spacing:-.224px;color:#f5f5f7}
.ao-link,.ao-sec .ao-link a{color:#2997ff!important;font-size:17px;line-height:1.47;letter-spacing:-.374px}
.ao-sec .ao-link-y a{color:#f2ca20!important;font-size:17px;line-height:1.47;letter-spacing:-.374px}
.ao-foot-row{align-items:center;justify-content:space-between;font-size:12px;line-height:16px;letter-spacing:-.12px}
.ao-sec .ao-foot-row p,.ao-sec .ao-foot-row a{font-size:12px;line-height:16px;color:#86868b!important}
.ao-foot-links a{margin-left:24px}
.ao-pills a{display:inline-block;font-size:14px;line-height:20px;letter-spacing:-.224px;padding:7px 15px;border-radius:9999px;border:1px solid #6e6e73;color:#f5f5f7!important;margin:0 8px 8px 0}
.ao-pills a.is-on{background:#333336;border-color:#333336}
.ao-meta-grid{border-top:1px solid #333336;padding-top:24px!important}
.ao-sec .ao-row.ao-meta-grid{width:calc(100% - 2*clamp(16px,4vw,48px))!important;max-width:calc(1200px - 2*clamp(16px,4vw,48px))!important;padding:24px 0 0!important}

/* buttons: Apple Blue pill and outlined pill */
a.ao-btn,.ao-btn a.et_pb_button{display:inline-block;font-family:Inter,SF Pro Display,SF Pro Text,system-ui,-apple-system,Segoe UI,sans-serif!important;font-size:17px!important;line-height:24px!important;letter-spacing:-.374px!important;font-weight:400!important;padding:12px 24px!important;border-radius:170px!important;border:1px solid transparent!important;background:#0071e3!important;color:#fff!important;text-transform:none!important;margin:0!important}
a.ao-btn:after,.ao-btn a.et_pb_button:after{display:none!important}
a.ao-btn:hover,.ao-btn a.et_pb_button:hover{padding:12px 24px!important;background:#0077ed!important}
a.ao-btn-line,.ao-btn-line a.et_pb_button{background:transparent!important;border-color:#6e6e73!important;color:#f5f5f7!important}
a.ao-btn-line:hover,.ao-btn-line a.et_pb_button:hover{background:rgba(255,255,255,.06)!important}
.ao-btns{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:8px}
.ao-btns .et_pb_button_module_wrapper{display:inline-block;margin:0!important}
.ao-hero .ao-btns{justify-content:center}
.ao-btn-wrap{text-align:left}

/* contact form */
.ao-form .et_pb_contact_form_container,.ao-form{width:100%}
.ao-form p{padding:0!important}
.ao-form input[type=text],.ao-form input[type=email],.ao-form textarea,.ao-form select{background:rgba(255,255,255,.04)!important;border:1px solid #6e6e73!important;color:#f5f5f7!important;font:400 17px/24px Inter,SF Pro Display,SF Pro Text,system-ui,-apple-system,Segoe UI,sans-serif!important;letter-spacing:-.374px;padding:14px 24px!important;border-radius:980px!important;width:100%}
.ao-form textarea{border-radius:28px!important}
.ao-form ::placeholder{color:#86868b!important}
.ao-form .et_pb_contact_field{padding:0 0 24px!important;width:100%!important;float:none!important;margin:0!important}
.ao-form .et_pb_contact_field_options_title,.ao-form label{color:#86868b!important;font-size:14px}
.ao-form .et_pb_contact_submit,.ao-form button.et_pb_button{background:#0071e3!important;color:#fff!important;border:0!important;border-radius:170px!important;font:400 17px/24px Inter,SF Pro Display,SF Pro Text,system-ui,-apple-system,Segoe UI,sans-serif!important;padding:12px 24px!important;text-transform:none!important;float:none!important}
.ao-form button.et_pb_button:after{display:none!important}
.ao-form .et_pb_contact_main_title{display:none}
.ao-form input:focus,.ao-form textarea:focus{border-color:#2997ff!important;outline:none}

@media (max-width:767px){
  .ao-h3{font-size:24px}
  .ao-card .ao-card-text{left:20px;right:20px;bottom:20px}
  .ao-foot-row{gap:12px}
  .ao-nav-links a{margin-left:16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.ao-space-sm{padding:0 0 clamp(32px,4vw,48px)!important}
/* fixes from preview */
.ao-hero .ao-h1{max-width:1098px}
.ao-col .et_pb_button_module_wrapper{display:inline-block;margin:16px 16px 0 0!important}
.ao-hero .ao-col .et_pb_button_module_wrapper{margin:16px 8px 0!important}
.ao-card .ao-card-text a,.ao-card .ao-card-text h3{color:#f5f5f7!important}
.ao-h2-gap{margin-bottom:clamp(16px,3vw,40px)!important}
.ao-sec .ao-contact .ao-h2{max-width:16ch}
.ao-panel-split .ao-h2-md{font-size:clamp(26px,2.8vw,40px)}
.ao-sec h1,.ao-sec h2,.ao-sec h3,.ao-sec p{overflow-wrap:anywhere}
.ao-css{padding:0!important;min-height:0!important}.ao-css .et_pb_row,.ao-css .et_pb_code{padding:0!important;margin:0!important;min-height:0!important}