/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Commissioner", sans-serif;
}

.commissioner-normal {
  font-family: "Commissioner", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "FLAR" 0,
    "VOLM" 0;
}

.commissioner-bold {
  font-family: "Commissioner", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "FLAR" 0,
    "VOLM" 0;
}


body {
    background-color: #000;
    color: #fff;
    font-family: "Commissioner", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 1.5;
}

.h1-title {
    color: #fff;
    font-size: 30px;
    font-weight: 6  00;
    margin-bottom: 10px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo {
    flex-grow: 1;
    justify-content: center;
}

.logo img {
    height: 305px;
    max-width: 167px;
}


/* Preheader */
.preheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #111;
}

.social-icons {
    display: flex;
    flex-direction: row; /* This is default but can be explicitly mentioned */
}

.social-icons a {
    margin-right: 15px;
    margin-left: 5px;
}

/* Hero Section */
.hero {
    position: relative;
    height: 70vh;
    background-image: url('img/trnita-background.webp'); /* Replace with your background image */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2f8fc3;
    text-align: center;
    overflow: hidden;
}

.hero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75); /* Dark overlay with opacity */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    position: relative;
    padding: 20px;
    max-width: 850px;
}

.hero-content span {
    position: relative;
    color: #fff; /* color */
    padding: 20px;
    max-width: 850px;
}

.hero-title {
    font-size: 38px;
    font-weight: 500;
    margin-bottom: 15px;
    line-height: 1.3;
}

.hero-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 20px;
}

/* Two-Column Section Location */

#location {
    display: flex;
    justify-content: center;
}

#location a {
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 10px;
    text-decoration: none;
}

#location p {
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.image-bg {
    position: relative;
    min-height: 80vh;
    height: auto;
    background-image: url('images/trnita-background.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    color: #2f8fc3;
    overflow: hidden;
}

.image-bg .overlay {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Dark overlay with opacity */
    display: flex;
    justify-content: center;
}

/* Full-width Row */
.title_over_2-cols {
    max-width: 1000px; /* Limit the width for the content */
    margin: 0 auto; /* Center it */
    text-align: center; /* Center text in this row */
}

.two-column {
    max-width: 1200px;
    margin: 0 auto; /* Center content within the section */
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 40px 20px;
    color: #2f8fc3;
}

.column-left, .column-right {
    flex: 1;
    min-width: 300px;
}

.column-right h2 {
    font-size: 33px;
    margin-bottom: 10px;
}

.column-right p {
    color: #fff;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.column-left iframe {
    border: none;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    max-height: 400px;
}

/* Responsive Layout */
@media (max-width: 768px) {
    .preheader {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .preheader-left,
    .preheader-right {
        justify-content: center;
        width: 100%;
        margin: 5px 0;
    }
    
    .logo {
        margin: 10px 0; /* Adds space around the logo */
    }
    
    .hero {
        min-height: 90vh; /* change height to 110vh */
        padding: 10px;
    }

    .social-icons a {
        margin: 0 10px;
    }

    .two-column {

        align-items: center;
    }
    
    .column-left iframe {
        max-height: 300px;
        max-width: 768px;
    }

    .two-column-services {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-title {
        font-size: 33px;
    }
    
    .hero-subtitle {
        font-size: 17px;
    }
    
}

/* Further adjustments for very small devices */
@media (max-width: 480px) {
    .hero {
        min-height: 110vh; /* change height to 110vh */
        padding: 10px;
    }
}

@media (max-width: 360px) {
    .gallery {
        grid-template-columns: 1fr; /* Switch to single column below 360px */
    }
}


/* Footer */
footer {
    padding: 20px;
    text-align: center;
    background-color: #2f8fc3;
    font-size: 0.9em;
}

footer p {
    color: #ecf6f9;
}

footer a {
    color: #ecf6f9;
    text-decoration: none;
}

footer a:hover {
    color: #fff;
}



/* Slide-in from left */
@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide-in from right */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide-in from bottom */
@keyframes slideInBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Apply animations to elements */
.slide-in-left {
    animation: slideInLeft 1s ease forwards;
}

.slide-in-right {
    animation: slideInRight 1.3s ease forwards;
}

.slide-in-bottom {
    animation: slideInBottom 1.5s ease forwards;
}

/* special buttons styles */

.type--A{
  --line_color : #2f8fc3;
  --back_color : #2f8fc3;
}

.button{
    position : relative ;
    z-index : 0 ;
    width : 240px ;
    height : 56px ;
    text-decoration : none ;
    font-size : 17px ; 
    font-weight : 600 ;
    color : #fff ;
    letter-spacing : 2px ;
    transition : all .3s ease ;
}
.button__text{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    width : 100% ;
    height : 100% ;
}
.button::before,
.button::after,
.button__text::before,
.button__text::after{
    content : '' ;
    position : absolute ;
    height : 3px ;
    border-radius : 2px ;
    background : #fff ;
    transition : all .5s ease ;
}
.button::before{
    top : 0 ;
    left : 54px ;
    width : calc( 100% - 56px * 2 - 16px ) ;
}
.button::after{
    top : 0 ;
    right : 54px ;
    width : 8px ;
}
.button__text::before{
    bottom : 0 ;
    right : 54px ;
    width : calc( 100% - 56px * 2 - 16px ) ;
}
.button__text::after{
    bottom : 0 ;
    left : 54px ;
    width : 8px ;
}
.button__line{
    position : absolute ;
    top : 0 ;
    width : 56px ;
    height : 100% ;
    overflow : hidden ;
}
.button__line::before{
    content : '' ;
    position : absolute ;
    top : 0 ;
    width : 150% ;
    height : 100% ;
    box-sizing : border-box ;
    border-radius : 300px ;
    border : solid 3px #fff ;
}
.button__line:nth-child(1),
.button__line:nth-child(1)::before{
    left : 0 ;
}
.button__line:nth-child(2),
.button__line:nth-child(2)::before{
    right : 0 ;
}
.button:hover{
    letter-spacing : 6px ;
}
.button:hover::before,
.button:hover .button__text::before{
    width : 8px ;
}
.button:hover::after,
.button:hover .button__text::after{
    width : calc( 100% - 56px * 2 - 16px ) ;
}
.button__drow1,
.button__drow2{
    position : absolute ;
    z-index : -1 ;
    border-radius : 16px ;
    transform-origin : 16px 16px ;
}
.button__drow1{
    top : -16px ;
    left : 40px ;
    width : 32px ;
    height : 0;
    transform : rotate( 30deg ) ;
}
.button__drow2{
    top : 44px ;
    left : 77px ;
    width : 32px ;
    height : 0 ;
    transform : rotate(-127deg ) ;
}
.button__drow1::before,
.button__drow1::after,
.button__drow2::before,
.button__drow2::after{
    content : '';
    position : absolute ;
}
.button__drow1::before{
    bottom : 0 ;
    left : 0 ;
    width : 0 ;
    height : 32px ;
    border-radius : 16px ;
    transform-origin : 16px 16px ;
    transform : rotate( -60deg ) ;
}
.button__drow1::after{
    top : -10px ;
    left : 45px ;
    width : 0 ;
    height : 32px ;
    border-radius : 16px ;
    transform-origin : 16px 16px ;
    transform : rotate( 69deg ) ;
}
.button__drow2::before{
    bottom : 0 ;
    left : 0 ;
    width : 0 ;
    height : 32px ;
    border-radius : 16px ;
    transform-origin : 16px 16px ;
    transform : rotate( -146deg ) ;
}
.button__drow2::after{
    bottom : 26px ;
    left : -40px ;
    width : 0 ;
    height : 32px ;
    border-radius : 16px ;
    transform-origin : 16px 16px ;
    transform : rotate( -262deg ) ;
}
.button__drow1,
.button__drow1::before,
.button__drow1::after,
.button__drow2,
.button__drow2::before,
.button__drow2::after{
    background : var( --back_color ) ;
}
.button:hover .button__drow1{
    animation : drow1 ease-in .06s ;
    animation-fill-mode : forwards ;
}
.button:hover .button__drow1::before{
    animation : drow2 linear .08s .06s ;
    animation-fill-mode : forwards ;
}
.button:hover .button__drow1::after{
    animation : drow3 linear .03s .14s ;
    animation-fill-mode : forwards ;
}
.button:hover .button__drow2{
    animation : drow4 linear .06s .2s ;
    animation-fill-mode : forwards ;
}
.button:hover .button__drow2::before{
    animation : drow3 linear .03s .26s ;
    animation-fill-mode : forwards ;
}
.button:hover .button__drow2::after{
    animation : drow5 linear .06s .32s ;
    animation-fill-mode : forwards ;
}
@keyframes drow1{
    0%   { height : 0 ; }
    100% { height : 100px ; }
}
@keyframes drow2{
    0%   { width : 0 ; opacity : 0 ;}
    10%  { opacity : 0 ;}
    11%  { opacity : 1 ;}
    100% { width : 120px ; }
}
@keyframes drow3{
    0%   { width : 0 ; }
    100% { width : 80px ; }
}
@keyframes drow4{
    0%   { height : 0 ; }
    100% { height : 120px ; }
}
@keyframes drow5{
    0%   { width : 0 ; }
    100% { width : 124px ; }
}


.button-container{
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.button:not(:last-child){
  margin-bottom : 30px ;
}