/*
Theme Name: cstudio
Theme URI: 
Author: Alexandros Chanas
Author URI:
Version: 1.0
*/

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Satoshi', sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    
    }
    
    :root{
      
      --biege : #fdfbf6;
      --light_biege : #bcb19e;
      --dark_biege : #8e7b6b;
      --footer : #242422;
      --footer_text: #737373;
      --footer_lets_talk_border : #a6a6a6;
      --full_size_max_width : 2560px;
      --section_spacier : 88px;
      --clr-neutral-100: hsl(0, 0%, 100%); 
      --clr-primary-100: hsl(205, 15%, 58%); 
      --clr-primary-400: hsl(215, 25%, 27%); 
      --clr-primary-800: hsl(217, 33%, 17%); 
      --clr-primary-900: hsl(218, 33%, 9%);
      --muted_light_biege : #dfdbd2;

      --clamp_h1 :clamp(77px,200px,210px);
      --clamp_fs :clamp(44px , 4vw, 132px);

    }
    
    .main_image_placeholder{width:100vw; height:100vh; position:fixed; top:0; left:0; bottom:0; right:0; z-index: 1000000000;}

        /* temp */

.cstudio-fullvh-hero {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position:fixed; top:0; left:0;
  z-index: 100000000000000;
  background:black;
}

.cstudio-fullvh-hero__img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.chaty-svg circle {
  fill: #8e7b6b !important;
}

.chaty-svg ellipse {
  fill: #bcb19e !important;
}


        /* temp */

    @media screen and (min-width: 1240px) {
    
        li{font-size:16px; line-height:26px;}
        ul{margin: 1rem 0px 1rem 22px;}
        p{font-size:16px; font-weight:300 !important; line-height:20px; margin-bottom:1rem;}
        strong{font-weight:bold; font-family:inherit !important; font-size:inherit;line-height:inherit; color: black; }
        em{font-family:inherit !important; font-size:inherit; line-height:inherit; font-style:italic;}
        span{font-family:inherit !important; font-size:inherit; line-height:inherit;}
        h1{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 28px; color: black; line-height:30px;}
        h2{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 26px; color: black; }
        h3{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 24px; color: black; }
        h4{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 22px; color: black; }
        h5{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 20px; color: black; }
        h6{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 18px; color: black; }
        body, html {
            font-size: 100%;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            --light-blue:#4396d2;
            --grey-color:#414141;
        }  
        
        /* body background color setter */
      
        body {background-color:var(--biege); height:100%;}

        /* body background color setter */



        /* Wrapper / container */
    
        .wrapper{width:100%; }
        .container{width:90%; margin:auto; max-width:1640px;}
        
        /* Header */
        
        header{position:fixed; width:100%; top:0; z-index: 10000000; height:88px; border-bottom:2px solid var(--light_biege); display:flex; justify-content: space-between; align-items: center; background:var(--biege);}
        .logo{height:44px; display: flex; justify-content: center; align-items: center;}
        .logo p{margin:0; font-size:22px;}
        .header_inner{width:90%; margin:auto; display:flex; justify-content: space-between; align-items: center; max-width:1640px;}
        .b_menu{position:relative; width:50px; height:20px; cursor:pointer;}
        .b_menu_top{transition:all 2s ease; position:absolute; content:""; height:2px; top:-1px; width:100%; background:var(--light_biege);}
        .b_menu_bottom{transition:all 2s ease; position:absolute; content:""; height:2px; bottom:-1px; width:100%; background:var(--light_biege);}        .b_menu_drawer{display:none; transition: all 2s ease; z-index: 10000; position: absolute; top: 88px; height: calc(100vh - 88px); left: 0; width: 100%; right: 0; bottom: 0;}
        .b_menu_drawer{background:var(--biege); opacity:0; transition: all 1.6s ease; z-index: 100000; transform: translate3d(0px, 200%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;}
        .b_menu_drawer.drawer_active{opacity:1; transform: translate3d(0px, 0, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;}
        .b_menu_top.drawer_active{top:40%;}
        .b_menu_bottom.drawer_active{bottom:50%;}

        /*drawer menu items*/
        
        .b_menu_drawer_inner{padding:44px 0px; width:100%; height:100%; }
        .b_menu_drawer_inner a {width: 100%; padding:0px 44px; height: calc(100% / 4);  display: flex ; justify-content: space-between; align-items: center;  position:relative; color:black; text-decoration: none;}
        .b_menu_item_default {width: 100%; height: 100%; display: flex ; justify-content: space-between; align-items: center;}
        .b_menu_item_default p{font-size:88px; line-height:calc(88px * 1);}
        .b_menu_item_hover { display: none; transform: translate3d(-2vw, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;  height: 100%; width: 10000px; transition:all 10s ease; position:absolute; top:0; left:0;}
        .b_menu_item_hover img { width:88px; height:88px; border-radius:44px; object-fit: cover;}
        .b_menu_item_wrap:hover > .b_menu_item_hover{background:black; display:flex;transform: translate3d(-50vw, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; will-change: transform;} 
        .b_menu_item_wrap:hover .b_menu_item_hover p{color:white;}
        .b_menu_item_wrap:hover .b_menu_item_hover_inner {background:black;}
        .b_menu_item_hover_inner {width: calc(25% - 4px); transition: all 0.6s ease; height: 100%; display: flex ; justify-content: center; align-items: center; flex-direction: row; gap: 22px; padding:22px; background:var(--biege);}
        .b_menu_item_hover_inner p {font-size:44px; font-style:italic; line-height:calc(44px * 1); margin:0; transition: all ease 0.6s; color:black;}

        .b_menu_item_hover_inner_group{width:100vw; display: flex; justify-content:flex-start; align-items: flex-start;}

        /*.b_menu_item_hover.itemhovered{transform: translate3d(-50vw, 0px, 0px) !important;}*/
        
        /*drawer menu items*/ 


        /* Header */
        
        
        

        /* Hero Section */
        .hero_section{padding-top:88px; padding-bottom:var(--section_spacier);}
        .hero_section .wpb_content_element{margin:0;}
        .hero_section .hero_title{position:relative; width:700px;}
        .hero_section .hero_title img{position: absolute; top: 0px; right: 0px; filter: brightness(0) saturate(100%) invert(47%) sepia(12%) saturate(686%) hue-rotate(3deg) brightness(96%) contrast(81%);}
        .hero_section .hero_title h1{font-size:156px; font-weight:100; }

        .hero_under_title{width:700px;}
        .hero_under_title .text{display:inline;}
        .hero_under_title .text .black{color:#000; font-size:25px;}
        .hero_under_title .text .biege{color:var(--light_biege); font-size:25px;}

        .scroll_down{position: absolute; bottom: 0; right: calc(70px - 25px);}

        /* Hero Section */

        /* Under_hero_section */

        .under_hero_section{padding-bottom:var(--section_spacier);}
        .under_hero_section_image{position: relative; left: 0; width: 100%; height: 600px; max-width: var(--full_size_max_width); margin: auto;}
        .under_hero_section_image img{ width: 100%; height: 100%; position: absolute; object-fit: cover;}

        /* Under_hero_section */

        /* Expert development */

        .expert_development{padding-bottom:var(--section_spacier)}
        .inner_development{ width: 100%; display: flex ; justify-content: center; align-items: center; height:700px;}
        .who_we_are{display: flex ; justify-content: flex-start; align-items: flex-start; width: 66px; height: 100%; position: relative;}
        .who_we_are_line{position: absolute; width: 2px; top: 20px; left: 22px; height: calc(100% - 22px); background: var(--dark_biege);}
        .who_we_are_text{position: absolute; left: -44px; top: 60px;}
        .who_we_are_text p{margin: 0; transform: rotate(90deg); white-space: nowrap;}

        .expert_development_cont{ height:100%; width: calc(100% - 60% - 66px); display: flex; align-items: center; flex-direction: column; position:relative;}
        .expert_development_title{display: flex ; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 300px; position: absolute; top:0px; left:100px;}
        .expert_development_title span{font-size:66px; font-weight:100;}
        .expert_development_title .bold{font-weight:700;}
        .expert_development_button_text{width: 60%; display: flex ; justify-content: flex-start; align-items: flex-start; height: 100%; flex-direction: column; padding: 15px; gap:66px;}
        .expert_development_text{}
        .expert_development_text p{font-size:22px; line-height:calc(22px * 1.5);}
       
        .expert_development_button{padding: 11px 22px; border: solid thin var(--dark_biege); width: 150px; display: flex ; justify-content: center; align-items: center;}
        .expert_development_button a{text-decoration:none; color:black;}

        /* Expert development */



        /* scroller */
        
        .scroller { max-width: var(--full_size_max_width); padding-bottom:var(--section_spacier)} 
        .scroller__inner { padding-block: 1rem; display: flex; flex-wrap: wrap; gap: 2rem; } 
        .scroller[data-animated="true"] { overflow: hidden; -webkit-mask: linear-gradient( 90deg, transparent, white 20%, white 80%, transparent ); mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent); } .scroller[data-animated="true"]
        .scroller__inner { width: max-content; flex-wrap: nowrap; animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite; } 
        .scroller__inner img{ width:150px; height:150px; object-fit: contain; filter: brightness(0) saturate(100%) invert(53%) sepia(10%) saturate(753%) hue-rotate(346deg) brightness(91%) contrast(90%);} 
        .scroller[data-direction="right"] { --_animation-direction: reverse; } .scroller[data-direction="left"] { --_animation-direction: forwards; } .scroller[data-speed="fast"] { --_animation-duration: 20s; } 
        .scroller[data-speed="slow"] { --_animation-duration: 60s; } 
        
        /* scroller animation */
        @keyframes scroll { to { transform: translate(calc(-50% - 0.5rem)); } }
        /* scroller animation */

        .tag-list { margin: 0; padding-inline: 0; list-style: none; }
        .tag-list li { padding: 1rem; background: var(--clr-primary-400); border-radius: 0.5rem; box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900); }

        /* scroller */

        /* our services */

        .our_services_section{width: 100%; display: flex ; justify-content: flex-start; align-items: flex-start; height: 700px; padding-bottom:var(--section_spacier)}

        .side_section_text_line{display: flex ; justify-content: flex-start; align-items: flex-start; width: 66px; height: 100%; position: relative; }
        .side_section_line{position: absolute; width: 2px; top: 20px; left: 22px; height: calc(100% - 22px); height:600px; background: var(--dark_biege);}
        .side_section_text{position: absolute; left: -55px; top: 66px; transform: rotate(90deg);}
        .side_section_text p{margin: 0; white-space: nowrap;}

        .our_services_cont{display: flex ; justify-content: center; align-items: center; flex-direction: column; padding-left: 0px; width: calc(100% - 60% - 33px); position:relative;}
        .our_services_cont .text{display:flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width:300px; position:absolute; top:0px; left:100px;}
        .our_services_cont span {font-size:66px; font-weight:100;}
        .our_services_cont span .bold{font-weight:700;}

        .our_services_right{width:calc(100% - 66px); height:100%;}
        .our_services_right_upper{display: flex; justify-content: flex-start; align-items: flex-start; height:50%;}
        .our_services_right_lower{display: flex ; justify-content: space-between; align-items: flex-end; height: 50%; padding-left: 100px;}


        .our_services_text_button{padding: 15px; display: flex ; justify-content: flex-start; align-items: flex-start; flex-direction: column; gap: 66px; width: calc(60% + 33px);}
        .our_services_text{}
        .our_services_text p{font-size: 22px; line-height: calc(22px * 1.5);}

        .our_services_list_title{}
        .our_services_list_title p{font-weight:600 !important;}
        .our_services_list_items{}
        ul.our_services_list_items{list-style: none; margin:0;}
        .our_services_list_items li{margin:0; color:#8e7b6b;}

        .our_services_item{}
        .our_services_list_title{}
        .our_services_list_title p{font-weight:600 !important;}
        

        .our_services_button{padding: 11px 22px; border: solid thin var(--dark_biege); width: 150px; display: flex ; justify-content: center; align-items: center;}
        .our_services_button a{text-decoration:none; color:black;}

        /* our services */

        /* four images */

        .four_images{width:100%; height:300px; display:flex; justify-content: flex-start; align-items: flex-start; margin-bottom:var(--section_spacier);}
        .four_images .big{width:30%; height:100%; display:flex; justify-content: center; align-items: center;}
        .four_images .small{width:20%; height:100%; display:flex; justify-content: center; align-items: center;}
        .four_images img{width:100%; height:100%; object-fit: cover;}
        
        .image_one{}
        .image_two{}
        .image_three{width:30%; height:100%; display:flex; justify-content: center; align-items: center;}
        .image_four{width:20%; height:100%; display:flex; justify-content: center; align-items: center;}
        

        /* four images */

        /* our process */

        .our_process{width:100%; height:700px; display:flex; padding-bottom:var(--section_spacier)}
        .our_process_text{width:calc(100% - 66px); color:var(--dark_biege);}
        .our_process_text span{width: 100%; font-size: 3vw; text-transform: uppercase; word-spacing: 25px; white-space:nowrap; }
  
        .our_process_text .line{display:flex; justify-content:space-between; align-items:center;}
        .our_process_text .line .tar{display:flex; justify-content:flex-end; align-items:flex-end;}
        .our_process_text .line_4{gap:44px;}
        .our_process_text .line .tac{text-align:center;}
        .our_process_text .text_black {color:black;}

        /* our process */
        
        /*consultation_development*/
        
        .consultation_development{height:1000px; padding-bottom:var(--section_spacier)}
        .consultation_development .wpb_wrapper{height:100%;}
        .consultation_dev_image{ height:1000px;}
        .consultation_dev_image img{height: 1000px; object-fit: cover; width:100%;}
        .consultation_dev_image .wpb_wrapper{width:100%;}
        .consultation_dev_image .wpb_wrapper .vc_single_image-wrapper {width:100%;}
        .consultation_dev_text{ height:1000px; background:#b2a083; color:white;}
            
        .single_consult{padding:22px; height:calc(100% / 4); margin:0;}
        .single_consult_title{margin:0; padding-bottom:22px;}
        .single_consult_title p{font-size:22px; font-weight:700 !important; line-height:calc(22px * 1.5); text-transform:uppercase;}
        .single_consult_text p{font-size:16px; font-weight:100 !important; line-height:calc(16px * 1.5)}
        
        
        /*consultation_development*/


        /* our projects */
        .our_projects{display: flex ; justify-content: flex-start; align-items: flex-start; flex-direction: column; height: 811px; padding-bottom:var(--section_spacier)}
        
        .our_projects .side_section_line {height: 723px;}

        .our_projects_inner{ height:100%; margin-left: 88px; margin-top:20px; width: calc(100% - 88px); display: flex ; justify-content: start; align-items: start; flex-direction: column; gap: 11px; }


        .our_projects_upper{ width: 100%; display: flex ; justify-content: end; align-items: flex-start; gap: 11px; height: 55%;}
        .project_one{height: 85%; width: 45%;}
        .project_one a{}
        .project_one a img{ object-fit: cover; width: 100%; height: 100%; object-position: center center;}

        .project_two { width: 55%; height: 100%; object-position: center center;}
        .project_two  a{}
        .project_two  a img{object-fit: cover; width: 100%; height: 100%; object-position: center center;}

        .our_projects_lower{width: 100%;  height: 45%; display: flex ; justify-content: space-between; align-items: flex-start;}
        .our_projects_text_button{width: 100%; height: 100%; height:100%; display: flex ; justify-content: flex-start; align-items: flex-end;}
        .our_projects_lower_text{}
        .our_projects_lower_text p{font-size: 66px; line-height:calc(66px * 1); font-weight: 600 !important;}
        .our_projects_lower_text p.thin{ font-weight: 100 !important;}
        .our_projects_lower_button{}
        .our_projects_lower_button button{cursor:pointer; padding:11px 22px; background:transparent; border: solid thin var(--dark_biege); width: 150px; display: flex ; justify-content: center; align-items: center;}

        .project_three{width: 30%; height: 100%;}
        .project_three  a{}
        .project_three  a img{object-fit: cover; width: 100%; height: 100%;}

        /* our projects */

        /* social slider */

  .mySwiper { width: 100%; margin-left: auto; margin-right: auto; overflow: hidden; }  
  .swiper-wrapper { transition-timing-function: ease-in-out; }
  .swiper-slide {  background: #f5f5f5; text-align: center; font-size: 18px; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); }


  .single_social_slider { aspect-ratio: 1; width: 100%; position:relative;}
  .single_social_slider_front { width: 100%; height: 100%; }
  .single_social_slider_front img {  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1;}
  .single_social_slider_back {display:none; justify-content: center; align-items: center; position:absolute; top:50%; left:50%; width:100%; height:100%; transform: translate(-50% , -50%); background:rgba(0, 0, 0, 0.6); z-index: 100; transition: all 2s ease; color:white; }
  .single_social_slider_back a{text-decoration: none; color:white;}
  .single_social_slider:hover .single_social_slider_back{ display:flex;}

        /* social slider */


        /* our work page */

        .work_hero{padding:44px 0px; width:100%; height:80vh; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; border:solid thin red; margin-top:66px; overflow:hidden;}
        .work_hero_title{ height:200px; display: flex; justify-content: flex-start; align-items: center; gap:5px;}
        .work_hero_title p {font-size:var(--clamp_h1); font-weight:200 !important; display: flex; justify-content: flex-start; align-items: flex-start;}
        .work_hero_title p .biege {color:var(--dark_biege)}
        .work_hero_title span {font-size:var(--clamp_h1); font-weight:200 !important;}

        .work_hero_text_button{width:100%; height:40vh; gap:22px; border:solid thin red; display: flex; justify-content: flex-start; align-items: flex-start;}
        
        .work_hero_text{width:90%; height:calc(100% - 22px); border:solid thin green; display: flex; justify-content: flex-start; align-items: end;}
        .work_hero_text .explore{color:var(--dark_biege)}
        .work_hero_text p{font-size:var(--clamp_fs); line-height:var(--clamp_fs); }
        .work_hero_text span{font-size:var(--clamp_fs); line-height:var(--clamp_fs); }

        .work_hero_text p {display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; margin:0;}

        .work_hero_button{width:10%; height:calc(100% - 22px); display: flex; justify-content: center; align-items: flex-end;}
        .work_hero_button { display: flex; font-weight:300 !important; font-style: italic; justify-content: center; align-items: flex-end; gap:22px; padding:11px; background:none; border:none; cursor:pointer; position:relative;}
        .work_hero_button a {display: flex; justify-content: center; align-items: center; gap:11px; text-decoration: none; color:black;}
        .work_hero_button .arrow img{width:22px; height:22px; }
        .work_hero_button .arrow{position:relative; background:#000; border-radius: 33px; width:33px; height:33px; display: flex; justify-content: center; align-items: center; }
        .work_hero_button .arrow::before{position: absolute; top: 50px; left: 50%; transform: translate(-50%, -50%); width:33px; height:33px; background:#000; border-radius:33px;}


        .works-stack{position: relative;}
        .work-card{position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 4rem 3rem; border-bottom: 1px solid #e0ddd5; background: #fdfbf6; width:100%; overflow: hidden; }
        .work-card__inner{position:relative; width:100%; height:100%;}
        .work-card__content{ position: absolute; padding: 11px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); width: 500px; height: 100%; display: flex; justify-content: center; align-items: center; }
        .work-card__background{position:absolute; top:50%; left:50%; transform: translate(-50% , -50%); width:100%; height:100%;}
        .work-card__background img{ width:100%; height:100%; }
        .works-stack:nth-child(1) { z-index: 3; }
        .works-stack:nth-child(2) { z-index: 2; }
        .works-stack:nth-child(3) { z-index: 1; }

        .work-card__content{position: absolute; padding: 11px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); width: 500px; height: 100%; left:-1000px; transition: all 1.4s ease; display: flex; justify-content: center; align-items: center;}
        .work-card__info{}
        .work-card__title{}
        .work-card__title p{font-size: 66px; line-height: calc(66px * 1); font-weight: 600 !important; color: white;}
        .work-card__subtitle{}
        .work-card__subtitle p{font-size: 33px; line-height: calc(33px * 1); font-weight: 300 !important; color: white;}
        .work-card__link{}
        .work-card__link a{font-size: 22px; line-height: calc(22px * 1); font-weight: 300 !important; color: white; text-decoration: none;}

        /* our work page */
        

        /* Footer */

        footer{width: 100%; height: 50vh; display: flex ; justify-content: center; align-items: center; background:var(--footer)}
        .outer_footer{max-width: 1640px; display: flex ; justify-content: center; align-items: center; width: 100%; height: 100%; flex-direction: column;}
        .inner_footer{width:700px;}
        .footer_title {position:relative;}
        .footer_title h1{font-size:156px; font-weight:100; color:var(--footer_text); margin:0;}
        .footer_title img{position: absolute; top: 0px; right: 0px; filter: brightness(0) saturate(100%) invert(46%) sepia(1%) saturate(18%) hue-rotate(347deg) brightness(97%) contrast(92%); }
        
        .lets_talk{width:100%; border:solid thin green; display:flex; justify-content: center; align-items: center; flex-direction: column; height:66px; border-radius:33px; border-color:var(--footer_lets_talk_border)}
        .lets_talk_inner{height:66px; overflow:hidden;}
        .lets_talk_text{transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; font-size: 30px; color: white; height: 66px; display: flex ; justify-content: center; align-items: center; transition: all 0.4s ease;}
        .lets_talk_text_hover{transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; font-size: 30px; color: white; height: 66px; display: flex ; justify-content: center; align-items: center; transition: all 0.4s ease;}
        .lets_talk:hover .lets_talk_text{font-size:30px; color:white; transform: translate3d(0px,-100%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; }
        .lets_talk:hover .lets_talk_text_hover{font-size:30px; color:white; transform: translate3d(0px, -100%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;}


        
        /* Footer */

        /* parallax specifications for works */


         .wrap{max-width:var(--page-max); margin:0 auto; padding: 10vh var(--pad) 20vh;}

  /* section/card layout */
  .section{position:relative; min-height:100svh; display:grid; place-items:center;}
  .card{position:relative; width:min(100%, 980px); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
  .media{position:absolute; inset:0; overflow:hidden;}
  .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02);}
  .media::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.15) 50%, rgba(0,0,0,.6)); pointer-events:none;}
  .content{position:relative; padding:clamp(28px, 6vw, 72px); display:grid; gap: clamp(10px, 2.2vw, 18px);}
  .eyebrow{letter-spacing:.18em; text-transform:uppercase; font-weight:600; opacity:.85}
  h1{font-size:clamp(42px, 9vw, 120px); line-height:.85; margin:.1em 0 .2em}
  h2{font-size:clamp(36px, 7.5vw, 104px); line-height:.9; margin:0;}
  h2 span{display:block}
  p{max-width:70ch; color:var(--muted)}
  .btn{justify-self:start; text-decoration:none; color:#111; background:#fff; padding:.85rem 1.1rem; border-radius:999px; font-weight:600}

  /* parallax hooks */
  [data-parallax]{will-change:transform; backface-visibility:hidden; transform:translate3d(0,0,0)}

  /* scroll-driven animations (modern browsers) */
  @supports (animation-timeline: view()) {
    .media[data-parallax]{
      --distance: 18vh;
      animation: parallax-move linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    h2 [data-parallax]{
      --distance: 8vh;
      animation: parallax-move linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes parallax-move{
      from{ transform: translate3d(0, calc(var(--distance) * -1), 0); }
      to  { transform: translate3d(0, var(--distance), 0); }
    }
  }

  /* reduced motion */
  @media (prefers-reduced-motion: reduce){
    [data-parallax]{animation:none !important; transform:none !important}
  }

        /* parallax specifications for works */



        }
        
        @media screen and (max-width: 1239px) and (min-width: 768px) {
    

          li{font-size:16px; line-height:26px;}
          ul{margin: 1rem 0px 1rem 22px;}
          p{font-size:16px; font-weight:300 !important; line-height:20px; margin-bottom:1rem;}
          strong{font-weight:bold; font-family:inherit !important; font-size:inherit;line-height:inherit; color: black; }
          em{font-family:inherit !important; font-size:inherit; line-height:inherit; font-style:italic;}
          span{font-family:inherit !important; font-size:inherit; line-height:inherit;}
          h1{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 28px; color: black; line-height:30px;}
          h2{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 26px; color: black; }
          h3{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 24px; color: black; }
          h4{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 22px; color: black; }
          h5{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 20px; color: black; }
          h6{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 18px; color: black; }
          body, html {
              font-size: 100%;
              -webkit-text-size-adjust: 100%;
              -ms-text-size-adjust: 100%;
              --light-blue:#4396d2;
              --grey-color:#414141;
              overflow: hidden; overflow-y: auto;
          }  
          
    
        

    
        }
        
        
        @media screen and (max-width: 767px){

        
          li{font-size:16px; line-height:26px;}
          ul{margin: 1rem 0px 1rem 22px;}
          p{font-size:13px; font-weight:300 !important; line-height:calc(13px * 1.5); margin-bottom:1rem;}
          strong{font-weight:bold; font-family:inherit !important; font-size:inherit;line-height:inherit; color: black; }
          em{font-family:inherit !important; font-size:inherit; line-height:inherit; font-style:italic;}
          span{font-family:inherit !important; font-size:inherit; line-height:inherit;}
          h1{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 28px; color: black; line-height:30px;}
          h2{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 26px; color: black; }
          h3{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 24px; color: black; }
          h4{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 22px; color: black; }
          h5{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 20px; color: black; }
          h6{font-family:inherit !important; line-height:inherit; font-weight:bold; font-size: 18px; color: black; }
          body, html {
              font-size: 100%;
              -webkit-text-size-adjust: 100%;
              -ms-text-size-adjust: 100%;
              --light-blue:#4396d2;
              --grey-color:#414141;
              overflow: hidden; overflow-y: auto;
          }  
          
      

       
        }