/*--------------------------------------------------------------------- 
File Name: style.css 
---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- 
import Fonts 
---------------------------------------------------------------------*/

/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(font-awesome.min.css);
@import url(owl.carousel.min.css);

/*--------------------------------------------------------------------- 
basic 
---------------------------------------------------------------------*/

body {
     color: #ffffcc;
     font-size: 12px;
     font-family: 'Roboto', sans-serif;
     line-height: 1.80857;
     font-weight: normal;
	background-image: url("../images/box_bg.jpg");
     background-size: cover;
	background-position: center;
     text-align: justify
}

a {
     color: #ffffcc;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     position: relative;
     padding: 0;
     font-weight: normal;
     line-height: normal;
     color: #ffffcc;
     margin: 0
}

h1 {
     font-size: 24px
}

h2 {
     font-size: 22px
}

h3 {
     font-size: 18px
}

h4 {
     font-size: 16px
}

h5 {
     font-size: 14px
}

h6 {
     font-size: 13px
}

.purple-box {
     position: relative;
     margin: 10px; /* Slight gap around the boxes */
     background-color: rgba(0, 0, 0, 0.5);
     background-size: cover;
     border: 1px solid #ffffcc;
	border-radius: 10px;
     padding: 20px;
     color: #ffffcc;
     text-align: center; /* Center-align text */
     display: inline-block;
}

.purple-box p {
     text-align: justify;
     font-size: 14px;
     font-family: 'Roboto', sans-serif;
     line-height: 18px;
     padding:5px
}

.purple-box .read-more-btn {
     margin: 10px auto 0; /* Distance from the bottom */
     padding: 5px 10px;
     color: #ffffcc;
     background-color: #454545;
     border: none;
     border-radius: 10px;
     font-size: 0.9rem;
     display: block;
     text-align: center
}

*,
*::after,
*::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
     color: #212121;
     text-decoration: none!important;
     opacity: 1
}

button:focus {
     outline: none;
}

p {
     text-align: justify;
     margin: 0px;
     padding: 0;
     font-weight: 400;
     font-size: 10px;
     line-height: 12px;
}

a {
     color: #ffffff;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

img {
     max-width: 100%;
     height: auto;
}

 :focus {
     outline: 0;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
}

.text_align_center {
     text-align: center;
}

.text_align_left {
     text-align: left;
}

.text_align_right {
     text-align: right;
}

.d_flex {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
}

.container {
     max-width: 1170px;
}

/*--------------------------------------------------------------------- 
header 
---------------------------------------------------------------------*/

header {
     background: transparent;
     width: 100%;
     padding: 10px 0px;
}

.logo {
     max-height: 60px;
}

.flag {
     max-height: 25px;
     padding: 3px;
}

.title {
     font-size: 30px;
     font-weight: bold;
}

@media (max-width: 576px) {
     .title {
         font-size: 1.2rem; /* Smaller font size for mobile */
     }
 
     .header {
         padding: 5px 0; /* Reduce padding on smaller screens */
         background: transparent;
     }
}

.read_more {
     display: inline-block;
     background: #26cc35;
     color: #fff;
     max-width: 201px;
     height: 67px;
     line-height: 67px;
     width: 100%;
     font-size: 17px;
     text-align: center;
     font-weight: bold;
     border-radius: 50px;
     transition: ease-in all 0.5s;
}

.read_more:hover {
     background: #1f1d46;
     color: #fff;
     transition: ease-in all 0.5s;
}

/** footer **/

.footer {
     background: transparent;
     padding: 20px 0;
     text-align: center;
}

.footer .social-icons img {
     width: 40px;
     margin: 0 20px;
}

.footer p {
     margin: 10px 0 0;
}

/** newer box elements **/

.contact-textarea {
     text-align: justify;
     background-color: #ff0000;
     color: #ffffff; /* Dark text color */
} 

.adres-textarea {
     text-align: center;
     background-color: #ff0000;
     color: #ffffff; /* Dark text color */
   } 

   .img-container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
   }
.language-img {
     width: 100%;
     max-width: 600px; /* Control image size */
     height: 200px;
     object-fit: cover;
   }
.welcome-img {
     width: 100%;
     max-width: 100%; /* 500px by 400px Control image size */
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease; /* For smooth rotation */
   }

/** the disappearing logos for contact **/
.contact-box {
     position: relative;
     height: 200px; /* Set a fixed height */
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     transition: background-color 0.5s;
   }
.contact-box img {
     width: 170px; /* Adjust logo size */
     height: auto;
     transition: opacity 0.5s;
   }
.contact-box span {
     position: absolute;
     opacity: 0;
     transition: opacity 0.5s;
     font-size: 1.5em;
     color: #ffffff;
   }
.contact-box:hover img {
     opacity: 0; /* Hide image on hover */
   }
.contact-box:hover span {
     opacity: 1; /* Show text on hover */
   }



/* Mobile stacking images */
@media (max-width: 768px) {
     .img-container {
       flex-direction: column;
       width: 40%;
     }
     .custom-img {
       margin-bottom: 20px;
       margin-top: 20px;
     }
   }
/* Rotate effect */
   .rotate {
     transform: rotate(360deg);
   }