@charset "UTF-8";



/*

Theme Name: yeminlitercuman

Theme URI: https://wordpress.org/themes/twentytwentyone/

Author: the WordPress team

Author URI: https://wordpress.org/

Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.

Requires at least: 5.3

Tested up to: 7.0

Requires PHP: 5.6

Version: 2.8

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: twentytwentyone

Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio



Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org

Twenty Twenty-One is distributed under the terms of the GNU GPL.

*/



/**

 * SETTINGS

 * File-header..........The file header for the themes style.css file.

 * Fonts................Any font files, if the project needs specific fonts.

 * Global...............Project-specific, globally available variables.

 *

 * TOOLS

 * Functions............Global functions.

 * Mixins...............Global mixins.

 *

 * GENERIC

 * Normalize.css........Normalise browser defaults.

 * Breakpoints..........Mixins and variables for responsive styles

 * Vertical-margins.....Vertical spacing for the main components.

 * Reset................Reset specific elements to make them easier to style in other contexts.

 * Clearings............Clearings for the main components.

 *

 * ELEMENTS

 * Blockquote...........Default blockquote.

 * Forms................Element-level form styling.

 * Headings.............H1–H6

 * Links................Default links.

 * Lists................Default lists.

 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.

 *

 * BLOCKS

 * Audio................Specific styles for the audio block.

 * Button...............Specific styles for the button block.

 * Code.................Specific styles for the code block.

 * Columns..............Specific styles for the columns block.

 * Cover................Specific styles for the cover block.

 * File.................Specific styles for the file block.

 * Gallery..............Specific styles for the gallery block.

 * Group................Specific styles for the group block.

 * Heading..............Specific styles for the heading block.

 * Image................Specific styles for the image block.

 * Latest comments......Specific styles for the latest comments block.

 * Latest posts.........Specific styles for the latest posts block.

 * Legacy...............Specific styles for the legacy gallery.

 * List.................Specific styles for the list block.

 * Media text...........Specific styles for the media and text block.

 * Navigation...........Specific styles for the navigation block.

 * Paragraph............Specific styles for the paragraph block.

 * Pullquote............Specific styles for the pullquote block.

 * Quote................Specific styles for the quote block.

 * Search...............Specific styles for the search block.

 * Separator............Specific styles for the separator block.

 * Table................Specific styles for the table block.

 * Poetry (Verse).......Specific styles for the poetry block.

 * Video................Specific styles for the video block.

 * Utilities............Block alignments.

 *

 * COMPONENTS

 * Header...............Header styles.

 * Footer...............Footer styles.

 * Comments.............Comment styles.

 * Archives.............Archive styles.

 * 404..................404 styles.

 * Search...............Search styles.

 * Navigation...........Navigation styles.

 * Footer Navigation....Footer Navigation styles.

 * Pagination...........Pagination styles.

 * Single...............Single page and post styles.

 * Posts and pages......Misc, sticky post styles.

 * Entry................Entry, author biography.

 * Widget...............Widget styles.

 * Editor...............Editor styles.

 *

 * UTILITIES

 * A11y.................Screen reader text, prefers reduced motion etc.

 * Color Palette........Classes for the color palette colors.

 * Editor Font Sizes....Editor Font Sizes.

 * Measure..............The width of a line of text, in characters.

 */



/* Categories 01 to 03 are the basics. */



/* Variables */

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#404040;background:#fff;font-size:13px;line-height:1.55}

a{color:#234f7a;text-decoration:none}

img{max-width:100%;display:block}

.container{width:92%;max-width:1000px;margin:0 auto}

.narrow{max-width:870px}

.center{text-align:center}

.section{padding:38px 0}

.gray{background:#f4f4f4}



.site-header{background:#fff;border-bottom:1px solid #f0f0f0;position:relative;z-index:20}

.header-inner{max-width:1110px;width:95%;height:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between}

.brand {

    display: flex;

    align-items: center;

    gap: 18px;

    text-decoration: none;

}



.brand-leaf {

    width: 80px;

    height: auto;

    display: block;

}



.brand-text {

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.brand-title {

    font-size: 15px;

    line-height: 1.2;

    font-weight: 700;

    color: #555;

    letter-spacing: 0.5px;

}



.brand-subtitle {

    font-size: 10px;

    line-height: 1.25;

    font-weight: 700;

    color: #555;

    margin-top: 3px;

    white-space: nowrap;

}

.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px}

.socials {

    display: flex;

    align-items: center;

    gap: 22px;

}



.socials a {

    display: flex;

    align-items: center;

    justify-content: center;



    width: 18px;

    height: 18px;



    font-size: 20px;

    color: #555;



    text-decoration: none;

    transition: all 0.25s ease;

}



/* Facebook */

.socials .facebook:hover {

    color: #1877F2;

}



/* New Twitter / X */

.socials .twitter:hover {

    color: #000;

}



/* Google Plus */

.socials .google:hover {

    color: #DB4437;

}



/* LinkedIn */

.socials .linkedin:hover {

    color: #0A66C2;

}



.socials a:hover {

    transform: translateY(-2px);

}

.main-nav{display:flex;gap:27px}

.main-nav a{color:#555;font-size:12px;font-weight:700;letter-spacing:.2px}

.main-nav a.active,.main-nav a:hover{color:#f00}



.hero-slider {

    position: relative;

    width: 100%;

    overflow: hidden;

}



.slides {

    position: relative;

    width: 100%;

}



.slide {

    display: none;

    width: 100%;

}



.slide.active {

    display: block;

}



.slide img {

    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;

}

.slider-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);border:0;width:34px;height:54px;background:rgba(0,0,0,.28);color:#fff;cursor:pointer;font-size:20px;opacity:0;transition:.2s}

.hero-slider:hover .slider-arrow{opacity:1}

.slider-arrow.prev{left:10px}

.slider-arrow.next{right:10px}

.slider-dots{position:absolute;z-index:6;left:50%;bottom:11px;transform:translateX(-50%);display:flex;gap:6px}

.dot{width:8px;height:8px;border-radius:50%;border:1px solid #fff;background:transparent;padding:0;cursor:pointer}

.dot.active{background:#fff}



.intro{padding-top:31px;padding-bottom:29px}

.intro-heading{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:15px;line-height:1.6;margin:0 0 18px}

.italic{font-family:Georgia,"Times New Roman",serif;font-size:14px;font-style:italic;line-height:1.65;margin:6px 0}



.section-title{margin:0 0 34px;text-align:center;font-size:20px;color:#454545;font-weight:700;text-transform:uppercase;position:relative}

.section-title:before,.section-title:after{content:"";display:inline-block;width:70px;height:1px;vertical-align:middle;background:#e5e5e5;margin:0 14px}



.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 35px;max-width:930px;margin:0 auto}

.service-grid a{display:flex;align-items:center;gap:10px;color:#ef1111;font-size:12px;text-transform:uppercase;line-height:1.35}

.service-icon{width:35px;height:35px;border-radius:50%;background:#f20b0b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 35px;font-weight:700}



.about-wrap{display:flex;align-items:flex-start;gap:18px;max-width:930px;margin:0 auto}

.profile-photo{width:105px;min-width: 137px;margin-top: -20px;}

.about-copy{font-size:14px;color:#555;line-height:1.45}

.about-copy p{margin:0 0 7px}

.about-copy a{color:#1b537f}



.member-image {

    /* max-width: 680px; */

    width: 100%;

    margin: 0 auto;

    min-height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;



    flex-wrap: wrap;

}



.member-image img {

    max-width: 100%;

    width: auto;

    height: auto;

    object-fit: contain;

}





/* Tablet */

@media (max-width: 768px) {



    .member-image {

        gap: 20px;

        min-height: auto;

        padding: 20px 0;

    }



    .member-image img {

        max-width: 45%;

    }



}





/* Mobile */

@media (max-width: 480px) {



    .member-image {

        flex-direction: column;

        gap: 25px;

        padding: 20px 15px;

    }



    .member-image img {

        max-width: 90%;

        width: auto;

        height: auto;

    }



}



.blog-section{padding-top:30px}

.blog-item{max-width:900px;margin:0 auto;min-height:126px;display:grid;grid-template-columns:270px 1fr;border-top:1px solid #e9e9e9;padding:10px 0}

.blog-item:last-child{border-bottom:1px solid #e9e9e9}

.thumb-wrap{position:relative;width:260px;height:115px;overflow:hidden}

.thumb-wrap img{width:100% !important;height:100%  !important;object-fit:cover}

.date-box{position:absolute;top:7px;left:10px;width:44px;min-height:52px;background:#fff;text-align:center;line-height:1.05;padding:4px 2px;border:1px solid #eee}

.date-box strong,.date-box span,.date-box small{display:block}

.date-box strong{font-size:11px;color:#555}

.date-box span{font-size:19px;color:#333}

.date-box small{font-size:8px;color:#777}

.blog-copy{padding:8px 0 0 10px}

.blog-copy h3{margin:0 0 8px;color:#f00;font-size:23px}

.blog-copy p{margin:0;color:#666;font-size:14px;line-height:1.45}



.contact-section{padding-top:33px}

.contact-line{max-width:860px;margin:0 auto 52px;font-family:Georgia,"Times New Roman",serif;font-size:14px;line-height:1.4}

.contact-line strong{color:#f00;font-weight:400}

.map-image{width:470px;max-width:90%;margin:0 auto 45px}

.contact-form{max-width:385px;margin:0 auto;text-align:center}

.contact-form label{display:block;color:#666;font-size:10px;margin:7px 0 4px}

.contact-form input,.contact-form textarea{width:100%;border:0;background:#f1f1f1;padding:10px 12px;font:inherit;outline:none;border-radius:2px}

.contact-form textarea{resize:vertical}

.contact-form button{margin-top:15px;background:#f00;color:#fff;border:0;min-width:74px;height:34px;font-size:11px;font-weight:700;cursor:pointer}



.site-footer{margin-top:20px;background:#2f2f2f;color:#a9a9a9;min-height:58px;display:flex;align-items:center;font-size:10px}

.footer-inner{width:90%;max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr auto;gap:20px;align-items:center}

.footer-socials a{color:#aaa}



@media (max-width:800px){

  .site-header{height:auto}

  .header-inner{padding:10px 0;align-items:flex-start}

  .header-right{padding:0}

  .socials{display:none}

  .main-nav{gap:12px;flex-wrap:wrap;justify-content:flex-end}

  .main-nav a{font-size:10px}

  .service-grid{grid-template-columns:repeat(2,1fr)}

  .about-wrap{display:block}

  .profile-photo{float:left;margin:4px 15px 8px 0}

  .blog-item{grid-template-columns:210px 1fr}

  .thumb-wrap{width:200px}

}

@media (max-width:560px){

  .header-inner{display:block}

      .brand {

        gap: 10px;

    }



    .brand-leaf {

        width: 50px;

    }



    .brand-title {

        font-size: 16px;

    }



    .brand-subtitle {

        font-size: 11px;

        white-space: normal;

    }

  .main-nav{justify-content:center}

  .section{padding:28px 0}

  .section-title{font-size:16px}

  .section-title:before,.section-title:after{width:35px;margin:0 8px}

  .service-grid{grid-template-columns:1fr;gap:15px}

  .blog-item{display:block}

  .thumb-wrap{width:100%;height:180px}

  .blog-copy{padding:12px 0 0}

  .footer-inner{grid-template-columns:1fr;text-align:center;padding:15px 0}

  .footer-socials{justify-content:center}

}



.header-top-right {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

}



/* Languages */

.language-switcher {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

}



.language-switcher a {

    color: #d51b00;

    font-size: 15px;

    line-height: 1;

    font-weight: 700;

    text-decoration: none;

    transition: color 0.25s ease;

}



.language-switcher span {

    color: #d51b00;

    font-size: 22px;

    line-height: 1;

}



.language-switcher a:hover,

.language-switcher a.active {

    color: #ff0000;

}



/* Social Icons */

.socials {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

}



.socials a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 35px;

    height: 35px;

    font-size: 20px;

    color: #666;

    text-decoration: none;

    transition: all 0.25s ease;

}



.socials .facebook:hover {

    color: #1877f2;

}



.socials .twitter:hover {

    color: #000;

}



.socials .google:hover {

    color: #db4437;

}



.socials .linkedin:hover {

    color: #0a66c2;

}



.socials a:hover {

    transform: translateY(-2px);

}





/* Header spacing update */

.language-switcher {

    margin: 0;

}



.socials {

    margin: 0;

}



.main-nav {

    margin-top: 0;

}



/* Keep at least 10px between the top controls, navigation and banner */

.header-right > .header-top-right {

    margin-bottom: 0;

}



.site-header {

    margin-bottom: 10px;

}