.roboto-<uniquifier> {

  font-family: "Roboto", serif;

  font-optical-sizing: auto;

  font-weight: <weight>;

  font-style: normal;

  font-variation-settings:

    "wdth" 100;

}

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-family: "Roboto", serif;

        }



        .container {

            max-width: 1200px;

            margin: 0 auto;

            padding: 0 20px;

        }

        h2 {

            font-family: "Roboto", serif;

            font-size: 22px !important;

            padding-top: 10px;

 

        }

        h3 {

            font-family: "Roboto", serif;



        }



        /* Header styles */

        header {

            padding: 10px 0;

        }



        .header-content {

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        .region--brand {

            font-size: 24px;

            font-weight: bold;

            text-decoration: none;

            color: #333;

        }

        .region--brand img{

               height: auto;

    width: 140px;

        }



        .region--brand small {

            display: block;

            font-size: 14px;

            color: #666;

        }



        nav ul {

            display: flex;

            list-style: none;



      

        }



        nav a {

            text-decoration: none;

            color: #333;

     

            font-weight: bold;

        }



        .pb-copy {font-family :Roboto, serif;}



        .chci-posudek {

            background-color: #34558b;

            color: white;

            padding: 10px 20px;

            border-radius: 5px;

            margin-right: -20px;

            text-decoration: none;

        }

        .chci-posudek2 {

            border: 2px solid #888;



            color: #000;

            padding: 10px 20px;

            border-radius: 5px;

            margin-left: -15px;

            margin-right: 0px;

            text-decoration: none;

        }

        .chci-posudek3 {

            border: 2px solid #fff;



            color: #fff;

            font-weight: bold;

            padding: 10px 20px; 

              line-height: 1em;

    border-radius: 5px;

    height: 43px;

            margin-left: 10px;

            margin-right: 0px;

            text-decoration: none;

        }

        .menumobil {

            display: none;

        }

        .chci-posudek4 {

            display: none;

        }

        .menubtn {

            display: none;   

        }



        /* Hero section */

        .hero {

            background-image: url('../img/bgn.jpg');

            background-size: cover;

            background-position: center;

            color: white;

            padding: 100px 0;

            position: relative;

        }

         .hero::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: rgba(0, 0, 0, 0.1);

        }

        .hero2 {

            background-image: url('../img/bgn.jpg');

            background-size: cover;

            background-position: center;

            color: white;

            padding: 100px 0;

            position: relative;

        }

        .hero2::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: rgba(0, 0, 0, 0.4);

        }

        .rodinnydum {

            background-image: url('../img/deleni_nemovitosti.jpg');

        }

       



        .hero-content {

            position: relative;

            max-width: 600px;

        }



        .hero h1, .hero2 h1 {

            font-size: 48px;

            margin-bottom: 20px;

        }

        .h2soudniznalec{

            font-size: 30px !important;

            margin-bottom: 40px;

            margin-top: -30px;

        }



        .hero p, .hero2 p {

            font-size: 18px;

            margin-bottom: 30px;

            line-height: 1.6;

        }



        .button-group {

            display: flex;

            gap: 15px;

        }



        .button {

            display: inline-block;

            padding: 12px 25px;

            background-color: white;

            color: #333;

            text-decoration: none;

            border-radius: 5px;

            font-weight: bold;

        }



        /* Services section */

        .services {

            padding: 60px 0;

        }



        .services h2 {

            font-size: 32px;

            margin-bottom: 40px;

        }



        .services-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

            gap: 30px;

            margin-bottom: 60px;

        }



        .service-card {

            text-align: center;

            text-decoration: none;

            color: #000;

        }



        .service-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            opacity: 0.7;
            border-radius: 8px;
            margin-bottom: 15px; 
            transition: all 0.7s ease;

        }


        .service-card:hover img {
            
            opacity: 1;
            

        }



        .service-card h3 {

            margin: 15px auto 15px auto;

           

            font-size: 17px;

        }



        .service-card a,

        .service-card a:hover {

            text-decoration: none;

        }



        .more-info {

            display: inline-block;

            padding: 8px 20px;

            background-color: #34558b;

            color: white;

            text-decoration: none;

            border-radius: 5px;

            font-size: 15px;
            transition: all 0.7s ease;

        }



        .more-info:hover {

             

            background-color: #3477e2;
 

        }



        .more-info a {text-decoration: none;}



        #content .container h2.section-title {

            font-size: 45px!important;

            font-weight: bold;

            text-align: center;

            padding-top: 20px;

            padding-bottom: 15px;

        }



        .views-field-field-perex {

            padding-bottom: 20px; text-align: justify;

        }



         .clanky-flex-item .views-field-field-image {

            padding-bottom: 20px;

        }





         .clanky-flex-item .views-field-field-image img {

              border-radius: 8px;

        }



        .clanky-flex {

            display: flex;

            flex-wrap: wrap;

            margin: 0 -1%;



        }



        .clanky-flex.container {padding: 0;width: 100%;}



        .clanky-flex-item {

            flex:1 50%;

            max-width: 46%;

            margin: 2%;

        }

        .clanky-flex-item .more-info {

            float: right;

        }



        .clanky-flex-item:after {

            content: "";

            position: relative;

            display: block;

            clear: both;

            

        }



        .clanky-flex-item h3 a  {

             text-decoration: none;color: #34558b;padding-bottom: 15px;font-weight: bold;display: block;font-size: 27px;

        }



        .musalek-article-info {text-align: center;}



        .musalek-article h1 {

            text-align: center;margin-top: 0;

        }



        .musalek-article {

            max-width: 900px;

            padding: 40px;

            background: #fff;

            margin: 60px auto;

            box-shadow: 0 0 10px 0 #eee;

        }



        .field--name-field-podnadpis,

        .views-field-field-perex p,

        .field--type-text-with-summary p,

        .field--type-text-long p  {

            line-height: 160%;

        }



        .musalek-article a {

            color: #34558b;

        }





        .musalek-article .article-content__body  {

            padding-top: 20px;

        }



        .field--type-text-long ul {}

        .field--type-text-long li {

            padding-left: 25px;position: relative;

            padding-bottom: 10px;

        }



        .field--type-text-long li:after {

            content: "";

            display: block;

            position: absolute;

            top: 3px;

            left: 0;

            width: 8px;

            height: 8px;

            transform: rotate(45deg);

            border-right: 2px solid #34558b;

            border-top: 2px solid #34558b;

        }



        .blog {

            padding-top:15px;

            padding-bottom:30px;

            background: #eee;

        }



        .pb-copy {

            text-align: center;padding: 25px;

            background: #ddd;

        }

 

        .hero h1 {

            font-size: 48px;

            margin-bottom: 20px;

            font-weight: 700;

        }



        .hero p {

            font-size: 16px;

            margin-bottom: 30px;

            line-height: 1.6;

            opacity: 0.9;

        }



        /* Content section */

        .content-section {

            padding: 60px 0px 0px 0px;

            text-align: center;

        }



        .content-text {

            max-width: 1200px;

            margin: 0 auto;

            text-align: left;



            line-height: 1.8;

            color: #333;

            margin-bottom: 30px;

        }



        .button-primary {

            display: block;

            width: 200px;

            text-align: center;

            margin-top: 50px;

            margin-left: auto;

            margin-right: auto;

            padding: 12px 30px;

            background-color: #34558b;

            color: white;

            text-decoration: none;

            border-radius: 5px;

            font-weight: 500;

       cursor: pointer;transition: all 0.7s ease;

        }


        .button-primary:hover {

         

     
  background-color: #3477e2;
        }

        /* Contact section */

        .contact-section {

            background-color: #EEF3F9;

            padding: 40px 0;

        }



        .contact-section h2 {

            color: #333;

            margin-bottom: 20px;

            font-size: 22px;

        }

        .contact-section .views-field-field-email a {
            padding-left:   28px;
            background:     url(../images/mail-h.svg) 0% 50% no-repeat;
            background-size:    18px auto;
            margin-bottom:  6px;
        }
        .contact-section .views-field-field-telefon a {
            padding-left:   28px;
            background:     url(../images/tel-h.svg) 0% 50% no-repeat;
            background-size:    18px auto;
            margin-bottom:  6px;
        }


      .paragraph--vizitka  .field--name-field-email a:before {
             width:     20px;
             height:    20px;
             display: inline-block  ;
             content: "";
             position: relative;    
            background:     url(../images/mail-h.svg) 0% 50% no-repeat;
            background-size:    18px auto;
                margin-bottom: -4px;
    margin-right: 5px;
        }
        .paragraph--vizitka .field--name-field-telefon a:before {
             width:     20px;
             height:    20px;
             display: inline-block  ;
             content: "";  position: relative;    
            background:     url(../images/tel-h.svg) 0% 50% no-repeat;
            background-size:    18px auto;
                margin-bottom: -4px;
    margin-right: 5px;
        }

         .paragraph--vizitka .field {
            margin-bottom:  4px;
         }



        .contact-info {

            color: #333;

            line-height: 1.6;

        }



        .contact-info a {

            color: #34558b;

            text-decoration: none;

        }



        /* Property types list */

        .property-types {

            padding: 40px 0;

            background-color: white;

        }



        .property-list {

            list-style: none;

            max-width: 1200px;

            margin: 0 auto;

            text-align: left;

        }



        .property-list li {

            margin-bottom: 10px;

            padding-left: 20px;

            position: relative;

            line-height: 1.6;

        }



        .property-list li::before {

            content: "•";

            position: absolute;

            left: 0;

            color: #34558b;

        }

        .-wm-MsoListParagraph{

          

        }

        .-wm-MsoListParagraph span{

            font-size: 20px !important;

            line-height: 28px;

        }

        .stred_poptavka {

            text-align: center;

        }

        .stred_poptavka label{

            font-weight: bold;

            display: block;

            margin-top: 15px;

        }

        .stred_poptavka input[type=text]{

            width: 300px;

            padding: 0px 10px 0px 10px;

            height: 45px;

        }

        .stred_poptavka input[type=submit]{

            width: 300px;

            clear: both;

            margin-top: 10px;

            height: 45px;

            border: none;

            cursor: pointer;

        }

        .stred_poptavka {

    display: none;

}



.contact-grid {

    display: flex;

    flex-wrap: wrap;

}

.contact-grid > .musalek-pul-container {

    flex: 1 50%;

    max-width: 48%;

    margin: 1%;

}



.team-section {    

    background-color: #6f8ab7;

    padding: 60px 0;

}



.field--name-field-vizitky {

    display: flex;
      justify-content: space-between;
    align-items: center;
    align-content: stretch;
    flex-wrap: wrap;
    max-width: 1000px;
 width:  96%   ;
    margin: 0 auto;

}



.field--name-field-vizitky > .field--item {
    flex: 1 31%;
    max-width:  31%;


    background: white;

    padding: 30px;

    text-align: center;

    border-radius: 5px;

}



.paragraph--vizitka a,

.menu--child .menu__link {

    color: #34558b;

}



.paragraph--vizitka a {text-decoration: none;}

.paragraph--vizitka .field--label {display: none;}



.paragraph--vizitka .field--name-field-jmeno {font-weight: bold;}



.paragraph--vizitka .field--name-field-telefon,

.paragraph--vizitka .field--name-field-email {

    padding-top: 7px;

}



.field--name-field-formular .form-item input[type=text],

.field--name-field-formular .form-item input[type=email],

.field--name-field-formular .form-item input[type=tel],

.field--name-field-formular .form-item textarea {

    width: 100%;

    max-width: 600px;

    border-radius: 5px;

}





.webform-submission-rychly-kontakt-form {display: none;}

.showform .webform-submission-rychly-kontakt-form {display: block;padding-top: 20px;}

.showform #poptat {display: none;}





#block-tpp-views-block-kontakty-block .samostatne-kontakty {

    display: flex;

}

#block-tpp-views-block-kontakty-block .samostatne-kontakty .views-field {

   flex: 1;

   white-space: nowrap;

}



.page-node-type--sluzba .field--name-field-formular {

    margin: 0 auto;

    max-width: 320px;

 

}



.page-node-type--sluzba .field--name-field-formular .form-actions {

    

}



.page-node-type--sluzba .field--name-field-formular .form-actions .button {

    width: 100%;

}



#block-tpp-views-block-kontakty-block .samostatny-tel a,

#block-tpp-views-block-kontakty-block .samostatny-email a {

border: 2px solid #888;

color: #000;

padding: 10px 20px;

border-radius: 5px;

display: inline-block;

 margin-left: 5px;

 margin-right: 5px;

text-decoration: none;

}



.field--name-field-formular .button {
    display: inline-block;
    padding: 8px 20px;
    background-color: #34558b;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 15px;
cursor: pointer;transition: all 0.7s ease;
}


.field--name-field-formular .button:hover {
     
  background-color: #3477e2;
}







.pcmenu {

    display: flex;

    flex-wrap: nowrap;

    font-family :Roboto, serif;

} 



.pcmenu .menu__item a.menu__link,

.pcmenu .menu__item a.menu__link--main {

    font-size: 16px;

    background: #fff;

} 



#block-prepinacjazyka a.language-link, 

.menu__link--hlavni-navigace-2, 

.menu__link--main {

    padding: 10px 1em;

    width: 100%;

    display: table;

}









    /* Mobile styles - to be added to existing CSS */

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


.field--name-field-vizitky > .field--item {
    flex: 1 100%;
    max-width:  100%;


    background: white;

    padding: 30px;

    text-align: center;

    border-radius: 5px;

}



          .pcmenu {

            display: none;

            opacity: 0;    

            height: 0; overflow: hidden;

           

            transition: opacity 0.7s ease;

        }



        .mobilemenu {

            overflow: hidden;

        }



        .mobilemenu .pcmenu {

        display: block;

        position: fixed; overflow: scroll;

        width: 100%;

        height: calc(100% - 69px);

        top: 69px;

        padding-top: 30px;

        left: 0;

        background: #fff;

        z-index: 6;opacity: 0.9;

    }





#block-tpp-views-block-kontakty-block .samostatne-kontakty {

    display: flex; 

    flex-wrap: wrap;

    flex-direction: column;

}



#block-tpp-views-block-kontakty-block .samostatne-kontakty .views-field {

    flex: 1;  

    padding: 6px;

    white-space: nowrap;

    text-align: center;

}

    .menu--main {

    justify-content: flex-end;

    flex-wrap: wrap;

}

.menu__item,

.menu__item--main {

    flex: 1 100%;

    width: 100%;

}

.menu--hlavni-navigace-2.menu--child > .menu__item > .menu__link, .menu--main.menu--child > .menu__item > .menu__link {

    text-align: center;   padding: 6px;

}



.menu__item--hlavni-navigace-2.menu__item--parent > ul, 

.menu__item--main.menu__item--parent > ul {

        display: block;

        overflow: hidden;

        max-height: 10000px;

        width: 100%;

        opacity: 1;

        top: auto;

        text-align: center;

        padding: 0;

        z-index: 29;

        position: relative;

   

}



          .menubtn{

            width: 50px;

            height: 50px;

            z-index: 5;



            background-image: url('../img/menu.png');



            background-size: cover;

            background-position: center;

            display: block;

        }

        .menumobil {

        

        }





        }





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





        .clanky-flex-item {

    flex: 1 100%;

    max-width: 96%;

    margin: 2%;

}





        .contact-section {

            text-align: center;

        }

        .region--brand {

            height: 50px;

            float: left;

 

            z-index: 3;

        }

        .region--brand img{

                height: auto;

    width: 120px;

            margin-top: 5px;

            float: left;

        }

        /* Header mobile styles */

       header {

            width: 100%;

            flex-direction: column;

            gap: 20px;

            align-items: unset;

            position: fixed;

            z-index: 2;

            background: #fff;

        }

        .hero, .hero2 {

          

            top: 50px;

        }

        .cont-detail {

            margin-top: 100px;

        }

        .cont-detail2 {

             margin-top: 40px;

        }

      

 

      

        h2 {

            text-align: center;

        }



   



    

        ul {

            margin: 0 0 0 0;

            padding: 0 0 0 0;

        }

        ul li {

            list-style: none;

            margin: 0 0 0 0;

            padding: 0 0 0 0;

    

            

        }

        .property-list  li {

            height: 30px;

        }

        ul li a{

            color: #000;

            text-decoration: none;

        }

        .chci-posudek, .chci-posudek2 {

            margin-right: 0;

            text-align: center;

            width: 100%;

            display: block;

        }

        .chci-posudek2 {

            width: 90%;

        }

        .chci-posudek4 {

            border: 2px solid #888;



            color: #000;

            padding: 10px 10px;

            border-radius: 5px;

            margin-left: -20px;

            margin-right: 0px;

            text-decoration: none;

        }



        /* Hero section mobile */

        .hero, .hero2 {

            padding: 60px 0;

            text-align: center;

        }



        .hero h1, .hero2 h1 {

            font-size: 32px;

            margin-bottom: 15px;

        }



        .hero p, .hero2 p {

            font-size: 16px;

            margin-bottom: 20px;

        }



        /* Content section mobile */

        .content-section {

            padding: 40px 0 0 0;

        }



        .content-text {

            padding: 0 20px;

        }



        .button-primary {

            width: calc(100% - 40px);

            margin: 30px 20px;

        }




        /* Services grid mobile */

        .services-grid {

            grid-template-columns: 1fr;

            gap: 20px;

            padding: 0 20px;

        }



        .service-card img {

            height: 180px;

        }







        /* Contact page specific mobile styles */

        .contact-grid {

            grid-template-columns: 1fr;

            gap: 40px;

            padding: 0 20px;

        }







        .team-grid {

            grid-template-columns: 1fr;

            gap: 20px;

            padding: 0 20px;

        }



        .team-card {

            padding: 20px;

        }



        /* Form elements mobile */

        .form-control {

            font-size: 16px; /* Prevents zoom on iOS */

            padding: 12px;

        }



        .submit-btn {

            width: 100%;

            padding: 15px;

        }



        /* Property list mobile */

        .property-list {

            padding: 0 20px;

        }



        .property-list li {

            font-size: 15px;

            line-height: 1.5;

            margin-bottom: 15px;

        }

    }



    /* Small mobile devices */

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

        .container {

            padding: 0 15px;

        }



        .hero h1, .hero2 h1 {

            font-size: 28px;

        }



        .hero p, .hero2 p {

            font-size: 15px;

        }



        h2 {

            font-size: 20px !important;

        }



        .contact-info p {

            font-size: 15px;

        }

    }