/* Import Open Sans font from Google Fonts */
@import url('//fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');

/* Body styling */
body {
  background-color: #fff;                    /* Set background to white */
  padding: 0;                                 /* Remove default padding */
  margin: 0;                                  /* Remove default margin */
  font-size: 12px;                            /* Base font size */
  font-family: 'Open Sans', sans-serif;       /* Font family */
}

/* Utility classes */
.clear { clear: both; }                      /* Clear floated elements */
.fl { float: left; }                         /* Float left */
.fr { float: right; }                        /* Float right */
a { color: #313131; text-decoration: none; } /* Link color and style */
.mb8 { margin-bottom: 8px; }
.fl25 { padding-left: 25px; }
.pt5 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pt25 { padding-top: 25px; }
.pt30 { padding-top: 30px; }
.pt35 { padding-top: 35px; }
.pt50 { padding-top: 50px; }
.pt70 { padding-top: 70px; }
.pl5 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl20 { padding-left: 20px; }
.p10 { padding: 10px; }
.p20 { padding: 20px; }
.pr5 { padding-right: 5px; }
.pr9 { padding-right: 9px; }
.pr10 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pb2 { padding-bottom: 2px; }
.pb3 { padding-bottom: 3px; }
.pb5 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.mt3 { margin-top: 3px; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt12 { margin-top: 12px; }
.mt20 { margin-top: 20px; }
.mt27 { margin-top: 27px; }
.mt30 { margin-top: 30px; }
.mt42 { margin-top: 42px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.ml5 { margin-left: 5px; }
.ml8 { margin-left: 8px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml50 { margin-left: 50px; }
.mr3 { margin-right: 3px; }
.mr5 { margin-right: 5px; }
.mr6 { margin-right: 6px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr25 { margin-right: 25px; }
.mr30 { margin-right: 40px; } /* Note: margin-right exceeds class name value */

/* Header background */
.header-bg {
  background-image: url(../images/header-bg-185.png);
  background-repeat: repeat-x;
  min-height: 185px;
}

/* Page wrapper */
.page {
  width: 1040px;
  margin: auto;
}

/* Logo */
.logo {
	background-image: url(../images/behtisniroo-logo-en.png);
	background-repeat: no-repeat;
	width: 276px;
	height: 142px;
	display: block;
	float: left;
	margin: 32px 0 0 0;
}

/* Top right section */
.top-blm-sag {
  float: right;
  margin: 5px 0 0 0;
  width: 750px;
}

/* Search form wrapper */
.arama {
  float: right;
  margin: 10px 0 0 0;
}

/* Search input */
.srch-input {
  background-image: url(../images/input-bg.png);
  background-repeat: no-repeat;
  display: block;
  width: 190px;
  height: 29px;
  float: left;
  color: #7d7d7d;
  font-size: 11px;
  padding: 0 0 0 10px;
  border: none !important;
}

/* Search button */
.src-gnder {
  border: none;
  margin: 0 15px 0 8px;
}

/* Language indicator */
.lang {
  font-size: 14px;
  font-weight: 600;
  margin: 15px 0 0 10px;
  float: right;
}

/* Navigation menu */
.menu {
  float: right;
  margin: 35px 0 0 0;
}

.menu ul {
  padding: 0;
  margin: 0;
}

.menu ul li {
  list-style-type: none;
  float: left;
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  line-height: 28px;
  background-image: url(../images/ayrc.png);
  background-repeat: no-repeat;
  background-position: right;
  margin: 10px 0 0 0;
}

/* Menu links */
.menu ul li a {
  color: #fff !important;
  margin: 0 10px;
  padding: 7px;
}

.menu ul li a:hover,
.menu ul li a.on {
  background-color: #fff;
  color: #000 !important;
  font-weight: 600;
  line-height: 28px;
  font-size: 13px;
}

/* Header section (slider) */
#header {
  height: 650px;
  position: relative;
  z-index: 999;
}

/* Background images for slider */
.headerimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 650px;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 9999;
}

/* Button cursor */
.btn {
  cursor: pointer;
}

/* Navigation arrows */
#back {
  background-image: url(../images/ok-sag.png);
  float: right;
  width: 56px;
  height: 56px;
  margin-left: 256px;
}

#next {
  background-image: url(../images/ok-sol.png);
  float: left;
  position: relative;
  width: 56px;
  height: 56px;
}

/* Container for navigation arrows */
#headernav-outer {
  position: relative;
  top: 170px;
  width: 1140px;
  margin: 0 auto;
}

/* Carousel background */
.jv-bg {
  background-image: url(../images/jv-bg.png);
  background-repeat: repeat-x;
  min-height: 146px;
  width: 100%;
  margin: 248px 0 0 0;
  padding: 4px 0 15px 0;
}

/* Logo item in carousel */
.logo-marka {
  float: left;
  width: 147px;
  height: 82px;
  margin-right: 0;
}

.logo-marka img {
  border: 2px solid #e7e7e7;
}

/* Section heading */
.tm-bs {
  font-size: 22px;
  color: #fff;
  font-weight: 600;
}

/* Carousel list and controls */
.faaliyet-panelgl {
  position: relative;
  margin: 15px 0 0 20px;
  padding-left: 40px;
  width: 1000px;
}

.faaliyetgl {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.faaliyetgl li {
  float: left;
  margin: 5px;
  width: 147px;
  height: 82px;
  padding: 0;
  list-style-type: none;
}

.faaliyet-panelgl .faaliyet_solgl {
  position: absolute;
  left: 0;
  top: -10px;
}

.faaliyet-panelgl .faaliyet_saggl {
  position: absolute;
  right: 15px;
  top: -10px;
}










.main-bottom-color-bg {
	background-color:#f7f7f7;
}
.main-bottom-bg {
	background-image:url(../images/beyaz-bg.png);
	background-repeat:repeat-y;
	background-position:top center;
	padding-bottom:20px;
}

.introductionnnn {
	width:490px;
	margin:15px 5px 0 0;
	color:#4f4f4f;
	padding-left:10px;
	font-size:13px;
	line-height:18px;
	float:left;
}
	.introductionnnn h1 {
		white-space: normal !important; /* allow wrapping */
		overflow-wrap: break-word; /* modern word wrap */
		word-break: break-word; /* fallback */
		line-height: 1.3; /* improve readability */
		margin-bottom: 15px; /* space under it */
		font-size: 26px; /* adjust as needed */
	}
.devam-bg {
	background-image:url(../images/devam-bg.png);
	width:244px;
	color:#fff;
	display:block;
	text-align:center;
	line-height:40px;
	font-size:13px;
	margin:15px 0 0 0;
}



























.box-310 {
	width:310px;
	float:left;
	display:block;
	margin-right:30px;
	padding-bottom:15px;
	margin-left:136px;
}
.box-310 .baslik {
	color:#09459f;
	font-weight:600;
	text-align:center;
	font-size:22px;
	display:block;
	margin:5px 0 0 0;
}
.box-brd {
	color:#8f8f8f;
	border-bottom:2px solid #8f8f8f;
	height:2px;
	width:85px;
	margin:auto;
}
.box-text {
	text-align:center;
	margin:15px 0 0 0;
	font-size:13px;
}

.haber-blm {
	float:left;
	width:640px;
}

.hb-gen-bs {
	color:#4d4d4d;
	font-weight:lighter;
	font-size:26px;
	margin-bottom:5px;
}
.hb-box {
	width:100%;
	float:left;
	margin:10px 0 10px 0;
	display:block;
	border: 1px solid #e1e1e1;
   padding: 10px;
}
.hbr-text {
	float:left;
	width:80%;
}
.date {
	color:#00539f;
	font-size:11px;
	margin-bottom:4px;
}
.hb-bs {
	color:#00539f;
	font-weight:600;
	font-size:14px;
	margin-bottom:10px;
}
.devam {
	color:#00539f;
	font-size:11px;
	font-weight:lighter;
}

.tum-detay {
	background-image:url(../images/tum-haberler-bg.jpg);
	width:150px;
	line-height:32px;
	display:block;
	color:#fff;
	font-size:14px;
	padding-left:15px;
	font-weight:600;
	margin:10px 0 0 0;
}

.foto-galeri-blm {
	float:right;
	width:340px;
	margin:0px 0 0 0;
}
.foto-galeri-bs {
	font-size:26px;
	font-weight:lighter;
	color:#4d4d4d;
	margin-bottom:10px;
}
.detay {
	background-color:#00539f;
	width:100px;
	text-align:center;
	line-height:32px;
	color:#fff;
	display:block;
	font-size:13px;
	font-weight:600;
	float:right;
	margin:7px 2px 0 0;
}

.faaliyet-panelgl2{ position:relative; }
.faaliyetgl2 { margin:0px; padding:0px; list-style-type:none; }
.faaliyetgl2 li{ margin:0px; padding:0px; list-style-type:none; float:left; width:357px; height:257px; }
.faaliyet-panelgl2 .faaliyet_solgl2{ position:absolute; left:0px; top:265px; }
.faaliyet-panelgl2 .faaliyet_saggl2{position:absolute; top:265px; right:258px; }

.footer-bg {
	background-color:#0a3a66;
	padding:15px 0 10px 0;
	background-repeat:repeat;
}
.ft-menu44 {
	width:490px;
	float:left;
	margin:10px 10px 0 0px;
}

.ft-tt2 {
	color:#fff;
	font-size:18px;
	margin-bottom:15px;
	font-weight:600;
}

.ft-bslk2 {
	color:#fff;
	display:block;
	margin:0px 0px 10px 0;
	font-size:12px;
	font-weight:lighter;
	width:162px;
	float:left;
}

.ft-bslk2 a {
	color:#fff;}

.iletisim {
	float:left;
	width:255px;
}

.ilt-bs {
	color:#d8d8d8;
	font-size:18px;
	font-weight:600;
}
.adres {
	color:#fff;
	background-image:url(../images/adres.png);
	padding-left:45px;
	background-repeat:no-repeat;
	margin:10px 0px 0 0;
	font-size:12px !important;
	padding-bottom:10px;
	width:220px;
}
.telefon {
	color:#fff;
	background-image:url(../images/telefon.png);
	padding-left:45px;
	line-height:36px;
	background-repeat:no-repeat;
	margin:0px 0px 0 0;
	font-size:13px;
	padding-bottom:10px;
	width:220px;
}
.faks {
	color:#fff;
	background-image:url(../images/faks.png);
	padding-left:45px;
	line-height:36px;
	background-repeat:no-repeat;
	padding-bottom:10px;
	font-size:13px;
	width:220px;
}
.mails {
	color:#fff;
	background-image:url(../images/mail.png);
	padding-left:45px;
	line-height:36px;
	background-repeat:no-repeat;
	padding-bottom:10px;
	font-size:13px;
	width:220px;
}
.temsilci-ftr {
	width:690px;
	float:left;
	margin:0 0 0 80px;
}
.tm-bs {
	text-align:center;
	font-size:18px;
	color:#d8d8d8;
}
.ft-menu {
	float:left;
}
.ft-menu2 {
	float:right;
	margin-top: 10px;
}

.ft-bs-1 {
	font-size:13px;
	color:#fff;
	text-decoration:underline;
	font-weight:600;
	margin:15px 0 8px 0;
}
.alt-bs {
	font-size:12px;
	margin-bottom:3px;
}
.alt-bs a {
	color:#fff;
}
.hizli-erisim {
	float:right;
	margin-right:25px;
}

.hz-bs {
	font-size:13px;
	color:#fff;
	font-weight:600;
	margin:5px 0 0 0;
}
.hz-bs a {
	color:#fff;
}


.copy {
	margin:10px 0 0 0;
	color:#fff;
	float:left;
	font-size:12px;
}
.threeinfour {
	float:right;
	color:#fff;
	margin:10px 0 0 0;
	font-size:12px;
}
.threeinfour a {
	color:#fff;
}


.left-blm {
	background-color:#dcdcdc;
	width:300px;
	float:left;
	padding-bottom:15px;
}

.tabs-bg {
	background-image:url(../images/tab-bg.jpg);
	padding:10px 15px 30px 10px;
	color:#294892;
	font-size:26px;
	text-align:center;
}
.container-bg {
	background-color:#ebebec;
}

.left-menu {
	width:260px;
	margin:auto;
}

.left-menu ul {
	padding:0;
	margin:0;
}
.left-menu ul li {
	list-style-type:none;
}
.left-menu ul li a {
	color:#4a4a4a;
	font-size:14px;
	font-weight:600;
	display:block;
	padding:7px 0 7px 15px;
	margin-bottom:1px;
}
.left-menu ul li a:hover, .left-menu ul li a.on {
	color:#fff;
	background-color:#294892;
	font-size:14px;
	font-weight:600;
	display:block;
	padding:7px 0 7px 15px;
	margin-bottom:1px;
}
.left-menu ul li ul li a {
	color:#404040;
	font-size:13px;
	background:none;
	border:none !important;
	padding:13px 0 10px 20px;
	line-height:0 !important;
	display:block;
	font-weight:lighter;
	margin:7px 0 7px 0;
}
.left-menu ul li ul {
}

.left-menu ul li ul li a:hover, .left-menu ul li ul li a.onn {
	color:#404040;
	background-color:#bababa;
	font-size:13px;
	display:block;
	padding:13px 0 10px 20px;
	font-weight:lighter;
	line-height:0 !important;
	margin:7px 0 7px 0px;
}
.right-blm {
	width:730px;
	float:left;
	margin:10px 0 0 10px;
}
.ilt-blm {
	width:1000px;
	float:left;
	margin:10px 0 0 10px;
}

.bread {
	font-size:12px;
	padding:0 5px 8px 0px;
	margin-bottom:10px;
	color:#3c3c3c;
	border-bottom:1px solid #bfbfbf;
}
.bread a {
	color:#3c3c3c;
}

.text-blmps {
	line-height:20px;
	font-size:13px;
	padding-bottom:10px;
	color:#333333;
}
.text-blmps h2 {
	color:#294892;
	font-size:20px;
	margin:15px 0 13px 0;
	font-weight:lighter;
}
.temsilci-sec {
	background-color:#dcdcdc;
	border:1px solid #bababa;
	width:345px;
	display:block;
	float:left;
	padding:14px 0 8px 8px;
	margin:0 10px 15px 0;
	height:90px;
}

.temsil-text {
	width:220px;
	float:left;
	margin:0 0 0 8px;
	font-size:12px;
	line-height:14px;
}
.baslik-temsilci {
	font-weight:600;
	font-size:15px;
	padding-bottom:4px;
}
.devam {
	background-color:#00539f;
	width:70px;
	text-align:center;
	line-height:22px;
	color:#fff;
	display:block;
	font-size:12px;
	font-weight:600;
	float:right;
	margin:7px 2px 0 0;
}

.urun-detay {
}

.urun-detay-text {
	margin:0 0 0 15px;
	font-size: 1rem;
	line-height:22px;
	float:left;
}
.site-btn {
	background-color:#00539f;
	float:right;
	text-align:center;
	line-height:22px;
	padding-left:8px;
	padding-right:8px;
	color:#fff;
	display:block;
	font-size:12px;
	font-weight:600;
	float:right;
	margin:7px 2px 0 0;
}



.tnt {
	color:#373737;
	border-bottom:2px solid #ed1c24;
	text-align:center;
	font-size:18px;
	margin-bottom:20px;
}
.txt-tn {
	line-height:18px;
	color:#3c3c3c;
	font-size:13px;
}

.urun-sec-blm {
	border-bottom:1px solid #8e8f94;
	margin-bottom:30px;
	padding-bottom:10px;
}
.urun-baslik {
	color:#ed1c24;
	text-decoration:underline;
	font-size:18px;
	font-weight:600;
}

.urun-resim {
	margin:15px 0 0 0;
	float:left;
	width:180px;
}
.urun-giris-table {
	float:left;
	width:450px;
	margin:13px 0 0 10px;
}
.acik-1 {
	margin-bottom:7px;
}

.baslik-1 {
	color:#5b5b5b;
	font-weight:600;
	float:left;
	width:180px;
}
.nokta {
	float:left;
	width:2px;
	margin-right:20px;
}
.aciklama {
	float:left;
	width:200px;
}
.buton-set {
	margin:20px 0 0 0;
	float:left;
}
.devam-btn {
	background-image:url(../images/detay.html);
	width:121px;
	height:36px;
	margin:30px 15px 0 0;
	display:block;
	float:right;
}

.urun-detay-resim {
	float:left;
	width:390px;
}
.detay-sag {
	margin:65px 0 0 15px;
	width:290px;
	float:left;
}

.detay-sag h1 {
	border:1px solid #9b9b9c;
	font-size:28px;
	color:#414141;
	font-weight:lighter;
	line-height:38px;
	border-left:none;
	border-right:none;
}

.alt-menu {
	float:left;
	margin:30px 0 0px 0px;
	z-index:999;
	border-left:none;
	border-bottom:none;
	border-right:none;
	border-top:none;
}
.alt-menu ul {
	padding:0;
	margin:0;
}
.alt-menu li {
	list-style-type:none;
	float:left;
}
.alt-menu ul li a {
	background-image:url(../images/tab-of.png);
	display:block;
	font-size:13px;
	color:#fff !important;
	font-weight:600;
	text-decoration:none !important;
	text-align:center;
	/*padding:0 7px 0 7px;*/
	padding:10px 7px 11px 7px;
	margin-right:1px;
	margin-bottom:10px;
}

.alt-menu ul li.last a {
	background-image:none;
}
.alt-menu ul li a:hover, .alt-menu ul li.active a{
	background-image:url(../images/tab-on.png);
	padding:10px 7px 11px 7px;
	color:#fff !important;
	text-align:center;
	/*padding:0 7px 0 7px;*/
	margin-right:1px;
	margin-bottom:10px;
}

.tabs-container {
}

#tab-panels {
	margin-top:-11px;
	padding:15px 0 0 0;
	min-height:200px;
	background-color:#fff;
}
.tab-content {
	padding:5px 0 5px 0;
}



#headertxt {
	position: absolute;
	bottom: 50px;
	left: 70px;
	z-index: 1000;
	color: white;
	background: rgba(0, 0, 0, 0);
	padding: 20px;
	border-radius: 6px;
	font-family: 'Open Sans', sans-serif;
}





















.faaliyet-panelgl2 {
	position: relative;
	padding-bottom: 40px; /* room for arrows */
}

	/* Position arrows 10px above the bottom of the gallery */
	.faaliyet-panelgl2 .faaliyet_solgl2,
	.faaliyet-panelgl2 .faaliyet_saggl2 {
		position: absolute;
		bottom: 0px; /* pull up into the gallery area */
		top: auto; /* cancel the old top:265px */
		z-index: 100; /* above slides */
	}

	/* Fine‑tune horizontal placement */
	.faaliyet-panelgl2 .faaliyet_solgl2 {
		left: 10px;
	}

	.faaliyet-panelgl2 .faaliyet_saggl2 {
		right: 10px;
	}






















.temsilci-ftr {
	text-align: center; /* center child inline/inline‑block elements */
}

.footer-reps {
	display: inline-block; /* shrink to content width and be centerable */
	list-style: none;
	padding: 0;
	margin: 10px 0 0 0;
}

.footer-reps li {
	margin: 5px 0; /* vertical spacing between items */
}

.footer-reps li a {
	color: #fff;
	font-size: 13px;
	font-weight: lighter;
	text-decoration: none;
}

.footer-reps li a:hover {
	text-decoration: underline;
}
/* only shrink that one sector label */
.small-text {
	font-size: 12px; /* or whatever smaller size you need */
}


.introductionnnn p,
.introductionnnn ul {
	text-align: justify;
	text-justify: inter-word;
}
/* Ensure the representatives box itself left–aligns its children */
.temsilci-ftr {
  text-align: left;

}

/* Vertical list, left–aligned */
.footer-reps {
	list-style: none;
	margin: 20px 0 0 275px; /* pushes the list 30px to the right */
	padding: 0;
}

.footer-reps li {
  margin-bottom: 8px;  /* space between items */
}

.footer-reps li a {
  display: inline-block; /* ensures text-align on parent takes effect */
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  font-weight: 400;
}

/* Remove any centering rules you may have added earlier */
.temsilci-ftr,
.temsilci-ftr ul {
  /* no flex, no justify-content, no align-items */
}
/* Date/Time badge in header */
#datetime {
  float: right;                      /* keep it on the right side */
  font-family: 'Open Sans', sans-serif; /* professional sans */
  font-weight: 600;                  /* semi‑bold for clarity */
  font-size: 14px;                   /* slightly larger for readability */
  color: #ffffff;                    /* white text */
  background-color: rgba(0, 0, 0, 0.4); /* dark translucent backdrop */
  padding: 6px 12px;                 /* comfortable padding */
  border-radius: 4px;                /* subtle rounded corners */
  box-shadow: 0 1px 4px rgba(0,0,0,0.3); /* slight lift off the page */
  letter-spacing: 0.5px;             /* space out letters slightly */
  backdrop-filter: blur(5px);        /* soft blur behind for depth */
}

/* On hover, lighten slightly */
#datetime:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
/* Base transition on all slideshow buttons */
#back, #next, #control {
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

/* Hover state: lift + scale + glow */
#back:hover, 
#next:hover, 
#control:hover {
  transform: scale(1.2) translateY(-2px);
  opacity: 0.85;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Active (mouse‑down) state: quick press in */
#back:active, 
#next:active, 
#control:active {
  transform: scale(1.1) translateY(0);
  opacity: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}








/* ========== Representatives Carousel Hover Effects ========== */

/* 1. Logos shrink by 5% on hover with a soft shadow */
.logo-marka img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform: scale(1);  /* ensure baseline */
}
.logo-marka:hover img {
  transform: scale(0.95);    /* 5% smaller */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* 2. Prev/Next arrows pop on hover */
.faaliyet_solgl img,
.faaliyet_saggl img {
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.8;
}
.faaliyet_solgl:hover img,
.faaliyet_saggl:hover img {
  transform: scale(1.2);
  opacity: 1;
}

/* 3. Make the carousel container a bit more pronounced */
.jv-bg {
  position: relative;               /* ensure shadows don’t get clipped */
  transition: box-shadow 0.3s ease;
}
.jv-bg:hover {
  box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
}












/* make all sector‐box buttons interactive */
.machinery-btn,
.decor-btn,
.spare-btn,
.chemical-btn,
.consultancy-btn {
  cursor: pointer;                      /* hand cursor */
  transition: transform 0.2s ease,      /* smooth pop */
              filter 0.2s ease;         /* smooth brighten */
}

/* hover effect: lift up & brighten */
.machinery-btn:hover,
.decor-btn:hover,
.spare-btn:hover,
.chemical-btn:hover,
.consultancy-btn:hover {
  transform: translateY(-4px) scale(1.03);
  filter: brightness(1.15);
}

/* active/click state: press back down */
.machinery-btn:active,
.decor-btn:active,
.spare-btn:active,
.chemical-btn:active,
.consultancy-btn:active {
  transform: translateY(0) scale(1);
  filter: brightness(1);
}
/* Make the whole box hover‑sensitive */
.box-310 {
  position: relative;
  overflow: auto;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Subtle lift & shadow on hover */
.box-310:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Fade‑in an overlay tint */
.box-310::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(255,255,255,0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.box-310:hover::before {
  opacity: 1;
}

/* Icon pop‑out */
.box-310 p img {
  transition: transform 0.3s ease;
}
.box-310:hover p img {
  transform: scale(1.2) rotate(-5deg);
}

/* Heading color shift */
.box-310 .baslik {
  transition: color 0.3s ease;
}
.box-310:hover .baslik {
  color: #00539f;  /* pick a brighter accent color */
}

/* Body text lighten */
.box-310 .box-text p {
  transition: color 0.3s ease;
  color: #4f4f4f;
}
.box-310:hover .box-text p {
  color: #333333;
}



/* ==========================================================================
   Sector Boxes (2×2 Grid + Full‑Width Consultancy)
   ========================================================================== */
.sectorr {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20px 12px;
	width: 510px;
	margin: 40px 0 0 auto;
}

	/* Tile container */
	.sectorr a {
		background: #fff;
		border-radius: 6px;
		overflow: auto;
		text-decoration: none;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

		.sectorr a:hover {
			transform: translateY(-6px);
			box-shadow: 0 12px 24px rgba(0,0,0,0.1);
		}

/* Image hover zoom */
.sector-img {
	display: block;
	width: 100%;
	height: auto;
	border-bottom: 2px solid #b8b8b8;
	transition: transform 0.3s ease, filter 0.3s ease;
}

.sectorr a:hover .sector-img {
	transform: scale(1.05);
	filter: brightness(1.05);
}

/* Consultancy spans both columns */
.sectorr .consultancy {
	grid-column: 1 / -1;
	justify-self: center;
}

/* Button styling & interactive hover */
.sectorr div[class$='-btn'] {
	width: 190px;
	margin: 10px auto 12px;
	padding: 6px 0 0 60px;
	line-height: 38px;
	color: #fff;
	font-weight: 600;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.sectorr .machinery-btn {
	background: url("../images/machionary-bar.png") no-repeat center bottom;
	font-size: 12px;
}

.sectorr .decor-btn {
	background: url("../images/paper-bar.png") no-repeat center bottom;
}

.sectorr .spare-btn {
	background: url("../images/sparepart-bar.png") no-repeat center bottom;
}

.sectorr .chemical-btn {
	background: url("../images/chemical bar.png") no-repeat center bottom;
}

.sectorr .consultancy-btn {
	background: url("../images/consultancy-bar.png") no-repeat center bottom;
}

.sectorr div[class$='-btn']:hover {
	transform: translateY(-4px) scale(1.04);
	filter: brightness(1.15);
}





/* ========== Intro + Sector Side‑by‑Side ========== */
.intro-sector {
  display: flex;
  flex-wrap: nowrap;            /* keep them on one row */
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;                    /* space between the two panels */
}

/* Let each panel take ~50% of the space */
.intro-sector > .introductionnnn,
.intro-sector > .sectorr {
  flex: 1 1 48%;                /* grow/shrink, base at 48% */
  max-width: 48%;
  box-sizing: border-box;
  /* remove old floats/widths if any */
  float: none !important;
  width: auto !important;
}

/* If things get too tight, allow wrapping on small screens */
@media (max-width: 900px) {
  .intro-sector {
    flex-wrap: wrap;
  }
  .intro-sector > .introductionnnn,
  .intro-sector > .sectorr {
    flex: 1 1 100%;
    max-width: 100%;
  }
}












/* ========================================================================== 
   About Us Interactive Card 
   ========================================================================== */
.introductionnnn {
	position: relative;
	padding: 20px;
	background: #fff;
	border-radius: 8px;
	overflow: auto;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

	.introductionnnn:hover {
		transform: translateY(-6px);
		box-shadow: 0 16px 32px rgba(0,0,0,0.12);
	}

	.introductionnnn::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, rgba(255,255,255,0), rgba(0,83,159,0.05));
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.introductionnnn:hover::before {
		opacity: 1;
	}

	.introductionnnn h1 {
		transition: color 0.3s ease, letter-spacing 0.3s ease;
	}

	.introductionnnn:hover h1 {
		color: #00539f;
		letter-spacing: 1px;
	}

	.introductionnnn p {
		color: #555;
		transition: color 0.3s ease, transform 0.3s ease;
	}

	.introductionnnn:hover p {
		color: #333;
		transform: translateX(4px);
	}

	.introductionnnn ul li {
		position: relative;
		padding-left: 22px;
		margin-bottom: 10px;
		color: #444;
		transition: margin-left 0.3s ease, color 0.3s ease;
	}

		.introductionnnn ul li::before {
			content: "›";
			position: absolute;
			left: 0;
			top: 0;
			color: #00539f;
			transition: transform 0.3s ease;
		}

		.introductionnnn ul li:hover {
			margin-left: 6px;
			color: #00539f;
		}

			.introductionnnn ul li:hover::before {
				transform: scale(1.3) translateX(2px);
			}







	/* Flex container for About Us + Sector boxes */
.intro-sector {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;        /* allows wrapping on smaller screens */
  gap: 20px;              /* space between the two panels */
  margin-top: 40px;       /* adjust as needed */
}

/* Each panel takes roughly half the width */
.intro-sector > .introductionnnn,
.intro-sector > .sectorr {
  flex: 0 1 calc(50% - 10px); /* two columns, minus half the gap */
}





/* shrink the H1 by 10% */
.introductionnnn h1 {
  font-size: 180%;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
}


	/* 1. Make the intro‑card’s ::before overlay ignore mouse events */
.introductionnnn::before {
  pointer-events: none;
}

/* 2. Style your new “More...” link and make sure it’s on top */
.buttonnnn {
  display: block;               /* so we can center it */
  width: fit-content;           /* only as wide as its content */
  margin: 20px auto 0;          /* center under the card */
  padding: 4px 32px;            /* vertical / horizontal padding */
  background-color: #00539f;    /* brand color */
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
  cursor: pointer;
  position: relative;           /* lift above the overlay */
  z-index: 1;
  transition:
    background-color 0.3s ease,
    transform        0.2s ease,
    box-shadow      0.2s ease,
    letter-spacing  0.2s ease;
}

.buttonnnn:hover {
  background-color: #004080;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  letter-spacing: 1px;
}

.buttonnnn:active {
  background-color: #003060;
  transform: translateY(0) scale(1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.10);
}







/* ========================================================================== 
   Mission & Vision + Quality Boxes 
   ========================================================================== */
.box-310 {
  position: relative;
  background: #fff;
  border-radius: 6px;
  padding-bottom: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.box-310:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

/* Rotate icon on hover */
.box-310 p img {
  transition: transform 0.6s ease;
}
.box-310:hover p img {
  transform: rotate(360deg);
}

/* Title color change */
.box-310 .baslik {
  transition: color 0.3s ease;
}
.box-310:hover .baslik {
  color: #00539f;
}

/* Underline bar grow */
.box-310 .box-brd {
  width: 85px;
  margin: 0 auto;
  transition: width 0.3s ease;
}
.box-310:hover .box-brd {
  width: 120px;
}

/* ========================================================================== 
   News & Announcements 
   ========================================================================== */
.hb-box {
  display: flex;
  align-items: center;
  border: 1px solid #e1e1e1;
  background: #fff;
  transition: background 0.3s ease, border-color 0.3s ease;
  padding: 10px;
}
.hb-box:hover {
  background: #f0f8ff;
  border-color: #00539f;
}
.hb-box .hb-bs {
  transition: color 0.3s ease;
}
.hb-box:hover .hb-bs {
  color: #00539f;
}
.hb-box .devam {
  transition: transform 0.2s ease;
}
.hb-box:hover .devam {
  transform: translateX(4px);
}

/* “All News” link */
.tum-detay {
  display: inline-block;
  margin-top: 10px;
  color: #00539f;
  font-weight: 600;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}
.tum-detay:hover {
  color: #003366;
  text-decoration: underline;
}

/* ========================================================================== 
   Photo & Video Gallery 
   ========================================================================== */
.foto-galeri-blm {
  position: relative;
}
.foto-galeri-blm .faaliyetgl2 li img {
  transition: transform 0.3s ease, filter 0.3s ease;
}
.foto-galeri-blm .faaliyetgl2 li:hover img {
  transform: scale(1.05);
  filter: brightness(1.05);
}
.faaliyet_solgl2 img,
.faaliyet_saggl2 img {
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}
.faaliyet_solgl2:hover img,
.faaliyet_saggl2:hover img {
  transform: scale(1.2);
  opacity: 1;
}
.jv-bg {
  transition: box-shadow 0.3s ease;
}
.jv-bg:hover {
  box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
}



.tum-detay {
  color: #fff !important;
}

/* if you want it to stay white on hover: */
.tum-detay:hover {
  color: #fff;
  text-decoration: underline;
}


/* ========================================================================== 
   Interactive Logo 
   ========================================================================== */
.logo {
  display: block;               /* ensure it’s treated as a block-level element */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;       /* hint for smoother animations */
}

.logo:hover {
  transform: scale(1.08) rotate(-1deg);
}

.logo:active {
  transform: scale(0.98) rotate(0);
}


/* ========================================================================== 
   Clearfix menu 
   ========================================================================== */

.clearfix.menu {
	margin-top: -4px;
}
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}






/* ==========================================================================
   Contact Section — two rows, interactive cards + map
   ========================================================================== */
.contact-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
}

/* Row 1: cards */
.contact-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.contact-card {
  flex: 1 1 calc(25% - 20px);
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.contact-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #00539f;
}
.contact-card p {
  margin: 0;
  line-height: 1.4;
  color: #333;
}
.contact-card a {
  color: inherit;
  text-decoration: none;
}
.contact-card a:hover {
  text-decoration: underline;
}

/* Row 2: map */
.contact-map iframe {
  width: 100%;
  height: 360px;
  border: none;
  border-radius: 8px;
  transition: filter 0.3s ease;
}
.contact-map iframe:hover {
  filter: brightness(1.05);
}

/* Responsive tweak */
@media (max-width: 800px) {
  .contact-card {
    flex: 1 1 100%;
  }
}


/* Row 1: force one‑line layout */
.contact-cards {
	display: flex;
	flex-wrap: nowrap; /* no wrapping—always one row */
	justify-content: space-between;
	gap: 20px;
}

/* Equal‑width cards */
.contact-card {
	flex: 1; /* each takes equal share */
	min-width: 180px; /* don’t shrink below a usable width */
}

/* Still wrap on narrow screens */
@media (max-width: 800px) {
	.contact-cards {
		flex-wrap: wrap;
	}

	.contact-card {
		flex: 1 1 100%;
		min-width: auto;
	}
}












































/* ==============================
   Representatives Section
   ============================== */

/* wrap sidebar + content in one flex row */
.main-bottom-bg .page {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

/* — Sidebar box — */
.left-blm {
  background: rgba(220, 220, 220, 0.5);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 280px;
  padding: 24px;
  transition: background .3s, box-shadow .3s;
}
.left-blm:hover {
  background: rgba(220, 220, 220, 0.8);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.tabs-bg {
  font-size: 22px;
  font-weight: 600;
  color: #00539f;
  margin-bottom: 16px;
  border-bottom: 2px solid #00539f;
  padding-bottom: 8px;
}

/* nested menu styling */
.left-menu {
  margin-top: 12px;
}
.left-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.left-menu ul > li > a {
  display: block;
  padding: 8px 12px;
  font-weight: 600;
  color: #333;
  border-radius: 4px;
  transition: background .3s, color .3s;
}
.left-menu ul > li > a:hover,
.left-menu ul > li > a.on {
  background: #00539f;
  color: #fff;
}
.left-menu .submenu {
  margin: 8px 0 16px 0;
  padding-left: 12px;
}
.left-menu .submenu a {
  display: block;
  padding: 6px 0;
  color: #555;
  font-weight: 400;
  transition: color .3s;
}
.left-menu .submenu a:hover {
  color: #00539f;
}


/* — Main content — */
.right-blm {
  flex: 1;
}

/* breadcrumbs */
.bread {
  font-size: 14px;
  margin-bottom: 20px;
}
.bread a, .bread span {
  color: #555;
  text-decoration: none;
}
.bread a:hover {
  text-decoration: underline;
}

/* — Representatives grid (2×2) — */
.representatives-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* — Individual card — */
.temsilci-sec {
  position: relative;
  display: flex;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 16px;
  transition: transform .3s, box-shadow .3s;
}
.temsilci-sec:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* logo on the left */
.temsilci-sec .logo-marka {
  flex-shrink: 0;
  width: 100px;
  height: auto;
  margin-right: 16px;
  object-fit: contain;
}

/* text + button on the right */
.temsil-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

/* “detail »” at bottom-right */
.temsil-text .devam {
  align-self: flex-end;
  background: #00539f;
  color: #fff;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: background .3s;
}
.temsil-text .devam:hover {
  background: #003f7f;
}
/* — Slightly bigger cards — */
.representatives-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}

.temsilci-sec {
  padding: 24px;        /* more breathing room */
  min-height: 120px;    /* enforce a taller box */
  max-width: 280px;     /* a bit wider */
}

/* — Darker, more gray sidebar — */
.left-blm {
  background: rgba(200, 200, 200, 0.9);
}

/* — “Our Representatives” title as a polished pill — */
:root {
	--brand: #00539f;
	--brand-light: #f7f7f7;
}

.tabs-bg {
	display: inline-block;
	padding: 12px 30px;
	background-color: var(--brand-light);
	border-radius: 2px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--brand);
	letter-spacing: 1px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.08);
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

	.tabs-bg:hover {
		background-color: var(--brand);
		box-shadow: 0 4px 12px rgba(0,0,0,0.12);
		transform: translateY(-2px);
	}

	/* ── Card container: make room for an absolutely‑positioned button ── */
.temsilci-sec {
  position: relative;       /* so the button can be absolutely placed */
  padding: 24px;            /* your existing padding */
  max-width: 280px;         /* existing width cap */
  min-height: 120px;        /* existing height cap */
  /* …other existing styles (bg, shadow, hover…) */
}

/* ── Description text: 1px smaller, justified, professional font ── */
.temsil-text {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;          /* was 14px, now 13px */
  line-height: 1.4;
  color: #333;
  text-align: justify-all;      /* justify the block text */
  padding-bottom: 40px;     /* space for the button below */
}

/* ── “detail »” button: locked bottom‑right ── */
.temsilci-sec .devam {
  position: absolute;
  bottom: 16px;             /* 16px from the bottom edge of the card */
  right: 16px;              /* 16px from the right edge */
  background: #00539f;      /* your brand color */
  color: #fff;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s;
}
.temsilci-sec .devam:hover {
  background: #003f7f;
}


/* Highlight the active category or partner link */
.left-menu a.on {
  position: relative;
  background-color: #00539f; /* your brand */
  color: #fff;               /* make the text pop */
}

/* A 4px “bar” at left to show it’s active */
.left-menu a.on::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--brand);  /* same brand color */
}






/* -------------------------------
   Sub‑Tabs
---------------------------------*/
.alt-menu .tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  gap: 12px;
}
.alt-menu .tabs a {
  padding: 8px 16px;
  background: #f0f0f0;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  transition: background 0.2s;
}
.alt-menu .tabs a:hover,
.alt-menu .tabs .active a {
  background: #00539f;
  color: #fff;
}

/* -------------------------------
   Tab Panels
---------------------------------*/
#tab-panels .tab-content {
  display: none;
}
#tab-panels .tab-content.active {
  display: block;
}

/* -------------------------------
   Documents List
---------------------------------*/
.documents-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.document {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ccc;
  text-decoration: none;
  color: #444;
  transition: background 0.2s;
}
.document:hover {
  background: #fafafa;
}
.doc-icon {
  width: 30px;
  margin-right: 10px;
}
.doc-title {
  flex: 1;
  font-size: 1rem;
}
.doc-action {
  font-size: 0.9rem;
  color: #00539f;
  font-weight: 600;
}









/* ==============================
   urun-detay-text enhancements
   ============================== */
:root {
  --brand: #00539f;
}
.urun-detay-text p {
  opacity: 0;
  animation: fadeInText 0.8s ease-out forwards;
  margin-bottom: 1em;
  line-height: 1.6;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}
/* stagger the two paragraphs */
.urun-detay-text p.fade-in:nth-child(1) { animation-delay: 0.2s; }
.urun-detay-text p.fade-in:nth-child(2) { animation-delay: 0.4s; }

@keyframes fadeInText {
  to { opacity: 1; }
}

/* highlight key phrases */
.urun-detay-text .highlight {
  color: var(--brand);
  font-weight: 700;
}

/* drop‑cap on first letter */
.urun-detay-text p:first-child::first-letter {
  float: left;
  font-size: 3rem;
  line-height: 1;
  margin-right: 8px;
  color: var(--brand);
  font-weight: 700;
}


/* ===== Interactive & Beautiful Breadcrumb Links ===== */
.bread {
    font-size: 0.85rem;
    margin-bottom: 16px;
    padding: 4px 8px;
    background-color: #f8f8f8;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: auto;
}

.bread a {
    color: #00539f;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
}

.bread a:hover {
    color: #003f7f;
}

.bread a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00539f, transparent);
    transition: width 0.3s ease;
}

.bread a:hover::after {
    width: 100%;
}

/* separator styling */
.bread span {
    color: #888;
    font-weight: normal;
}




/* ───── Collection Cards ───── */

.collections-heading {
  font-size: 1.5rem;
  color: #00539f;
  text-align: center;
  margin-bottom: 1.2rem;
  font-weight: 600;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 0 auto;
  padding: 10px;
  max-width: 960px;
}

.collection-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background-color: #f9f9f9;
  color: #00539f;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
  padding: 12px;
}

.collection-card:hover {
  background-color: #00539f;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 83, 159, 0.3);
}

.collection-card__info {
  font-size: 0.95rem;
  text-align: center;
  pointer-events: none; /* ensures smooth clickability of the parent link */
}












/* ========== Desktop-only Request Form Styles (Updated) ========== */
@media (min-width: 1024px) {
  /* Fade-in animation */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Section container */
  .request-form-section {
    padding: 30px 0;                  /* reduced top/bottom padding */
    background-color: #f9f9f9;
    animation: fadeInUp 0.6s ease-out;
  }

  /* Form title */
  .request-form-section h2 {
    font-size: 2rem;
    text-align: center;
    margin: 0 0 1rem;                /* removed top margin, reduced bottom */
    color: #007bff;                  /* brand blue */
  }

  /* Make all labels & legends blue */
  .request-form label,
  .request-form legend {
    color: #007bff;
    transition: color 0.3s;
  }

  /* Field wrappers: lift on hover */
  .request-form .form-group,
  .request-form fieldset {
    position: relative;
    margin-bottom: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .request-form .form-group:hover,
  .request-form fieldset:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
  }

  /* Base inputs, selects, textareas */
  .request-form input,
  .request-form select,
  .request-form textarea {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  /* Floating labels */
  .request-form .float-label label {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    pointer-events: none;
    transition: all 0.2s ease-out;
    background: #f9f9f9;   /* matches section bg when floating */
    padding: 0 0.25rem;
  }
  /* Float on focus/value */
  .request-form .float-label input:focus + label,
  .request-form .float-label input:not(:placeholder-shown) + label,
  .request-form .float-label textarea:focus + label,
  .request-form .float-label textarea:not(:placeholder-shown) + label {
    top: -0.6rem;
    left: 0.5rem;
    font-size: 0.8rem;
    color: #007bff;
  }

  /* Focus styles */
  .request-form input:focus,
  .request-form select:focus,
  .request-form textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
  }

  /* Inline validation styling */
  .request-form .error-msg {
    display: none;
    color: #d9534f;
    font-size: 0.875rem;
    margin-top: 0.25rem;
  }
  .request-form .invalid .error-msg {
    display: block;
  }
  .request-form .invalid input,
  .request-form .invalid select,
  .request-form .invalid textarea {
    border-color: #d9534f;
  }

  /* Button interaction */
  .request-form button {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s, box-shadow 0.2s;
  }
  .request-form button:hover {
    background-color: #0056b3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  .request-form button:active {
    transform: scale(0.97);
  }
}


@media (min-width: 1024px) {
  /* Reduce bottom margin on each field wrapper */
  .request-form .form-group,
  .request-form fieldset {
    margin-bottom: 1.25rem;      /* was 1.5rem */
  }

  /* Give fieldsets a bit of padding and a subtle border */
  .request-form fieldset {
    padding: 1.85rem;         /* inner spacing */
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  /* Tighter legend spacing */
  .request-form legend {
    margin-bottom: 0.5rem;    /* was 0.75rem */
  }
}



@media (min-width: 1024px) {
  /* Darker blue for titles, labels, legends, floating‐label states */
  .request-form-section h2,
  .request-form label,
  .request-form legend,
  .request-form .float-label input:focus + label,
  .request-form .float-label input:not(:placeholder-shown) + label,
  .request-form .float-label textarea:focus + label,
  .request-form .float-label textarea:not(:placeholder-shown) + label {
    color: #0056b3 !important;
  }

  /* Dropdowns: regular text dark, placeholder blue */
  .request-form select {
    color: #333;            /* normal option text */
  }
  .request-form select option:first-child {
    color: #0056b3;         /* “— Please select —” */
  }
}











/* Modal overlay */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

/* Show the modal */
.modal.show {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

/* Modal box */
.modal-content {
  background: #fff;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  padding: 1.5rem;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  animation: slideDown 0.4s ease-out;
}

/* Close “×” */
.modal-close {
  position: absolute;
  top: 0.5rem; right: 0.75rem;
  font-size: 1.5rem;
  color: #666;
  cursor: pointer;
  transition: color 0.2s;
}
.modal-close:hover {
  color: #000;
}

/* OK button */
.modal-ok {
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  background: #0056b3;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.modal-ok:hover {
  background: #003f7f;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}



@media (max-width: 1024px) {
	.modal-content {
		padding: 1rem; /* slightly tighter */
		max-width: 95%; /* almost full-width */
	}

		.modal-content h2 {
			font-size: 1.25rem; /* smaller header */
		}

	.modal-ok {
		width: 100%; /* full-width tap target */
		font-size: 1rem;
	}
}










@media (min-width: 1024px) {
  /* override full-width inputs for desktop */
  .request-form input,
  .request-form select,
  .request-form textarea {
    width: 45% !important;      /* make each “bar” one-third its container */
    box-sizing: border-box; /* ensure padding/border stay inside */
    display: inline-block;  /* allow them to sit side by side if you choose */
  }

  /* if you want labels/input-pairs on their own lines, you can still wrap each in a full-width container: */
  .request-form .form-group,
  .request-form fieldset {
    width: 100%;
  }
}



/* === Desktop: Single-Column Professional Form Styles === */
@media (min-width: 1024px) {
  /* Section container styling */
  .request-form-section {
    padding: 40px 0;
    background-color: #f9f9f9;
    animation: fadeInUp 0.6s ease-out;
  }

  /* Form title styling */
  .request-form-section h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    color: #0056b3;
  }

  /* Form group and fieldset styles */
  .request-form .form-group,
  .request-form fieldset {
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fff;
    transition: box-shadow 0.3s ease;
  }

  .request-form .form-group:hover,
  .request-form fieldset:hover {
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.15);
  }

  /* Input fields, selects, and textareas styling */
  .request-form input,
  .request-form select,
  .request-form textarea {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fafafa;
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  .request-form input:focus,
  .request-form select:focus,
  .request-form textarea:focus {
    border-color: #0056b3;
    box-shadow: 0 0 6px rgba(0, 86, 179, 0.2);
    outline: none;
  }

  /* Label styling */
  .request-form label,
  .request-form legend {
    color: #0056b3;
    margin-bottom: 0.5rem;
    font-weight: bold;
    display: block;
  }

  /* Button styling */
  .request-form button {
    width: 100%;
    padding: 0.75rem;
    background-color: #0056b3;
    color: #ffffff;
    font-size: 1.1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  .request-form button:hover {
    background-color: #003f7f;
    box-shadow: 0 4px 10px rgba(0, 63, 127, 0.2);
  }
}











/* ==========================================================================
   Banner Slider Container
   ========================================================================== */
#header {
  position: relative;
  width: 100%;
  height: 420px;            /* desktop height */
  overflow: hidden;
}

/* ==========================================================================
   Slider Images (layers for fade animation)
   ========================================================================== */
.headerimg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  display: none;            /* JS will show() / fadeOut() */
  z-index: 1;
}

/* ==========================================================================
   Text Overlay
   ========================================================================== */
#headertxt {
  position: absolute;
  bottom: 20%;
  left: 10%;
  z-index: 5;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  pointer-events: none;     /* prevents accidental clicks behind */
}

/* Main Heading */
#headertxt h1 {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 3em;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
}

/* Subheading Link/Button */
#headertxt a {
  display: inline-block;
  margin-top: 0.5em;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  padding: 0.3em 0.6em;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  transition: background 0.3s ease;
}
#headertxt a:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Slider Controls (back / play‐pause / next)
   ========================================================================== */
.slider-controls {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 10;
  display: flex;
  gap: 8px;
}

.slider-controls button {
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.2em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.slider-controls button:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 768px) {
  #header {
    height: 300px;
  }
  #headertxt h1 {
    font-size: 2em;
  }
  #headertxt a {
    font-size: 1em;
  }
}

@media (max-width: 480px) {
  #header {
    height: 200px;
  }
  #headertxt {
    bottom: 15%;
    left: 5%;
  }
  #headertxt h1 {
    font-size: 1.5em;
  }
  #headertxt a {
    font-size: 0.9em;
  }
  .slider-controls button {
    width: 28px;
    height: 28px;
    font-size: 1em;
  }
}
















/* Slider container sits behind the rest of .ust-bg */
.ust-bg {
  position: relative;
  overflow: hidden;
}

/* Slider: full-bleed, absolute inside .ust-bg */
.banner-slider {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

/* Make sure your header-bg (and everything else) floats above the slider */
.ust-bg .header-bg,
.ust-bg .page-header,
.ust-bg .mobile-nav {
  position: relative;
  z-index: 1;
}

/* Each slide */
.banner-slider .slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}

/* Active slide */
.banner-slider .slide.active {
  opacity: 1;
  z-index: 1;
}

/* Slide text overlay */
.banner-slider .slide .text {
  position: absolute;
  bottom: 20%;
  left: 10%;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  font-family: 'Open Sans', sans-serif;
}
.banner-slider .slide .text h2 {
  margin: 0 0 0.25em;
  font-size: 2.5em;
  font-weight: 700;
}
.banner-slider .slide .text p {
  margin: 0;
  font-size: 1.2em;
}

/* Controls */
.banner-slider .slider-controls {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 2;
}
.banner-slider .slider-controls button {
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  font-size: 1.5em;
  width: 36px; height: 36px;
  border-radius: 50%;
  margin-left: 8px;
  cursor: pointer;
  transition: background 0.3s;
}
.banner-slider .slider-controls button:hover {
  background: rgba(0,0,0,0.7);
}










/* Slider container sits behind the rest of .ust-bg */
.ust-bg {
  position: relative;
  overflow: hidden;
}

/* Slider: full-bleed, absolute inside .ust-bg */
.banner-slider {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

/* Make sure your header-bg (and everything else) floats above the slider */
.ust-bg .header-bg,
.ust-bg .page-header,
.ust-bg .mobile-nav {
  position: relative;
  z-index: 1;
}

/* Each slide */
.banner-slider .slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}

/* Active slide */
.banner-slider .slide.active {
  opacity: 1;
  z-index: 1;
}

/* Slide text overlay */
.banner-slider .slide .text {
  position: absolute;
  bottom: 20%;
  left: 10%;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  font-family: 'Open Sans', sans-serif;
}
.banner-slider .slide .text h2 {
  margin: 0 0 0.25em;
  font-size: 2.5em;
  font-weight: 700;
}
.banner-slider .slide .text p {
  margin: 0;
  font-size: 1.2em;
}

/* Controls */
.banner-slider .slider-controls {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 2;
}
.banner-slider .slider-controls button {
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  font-size: 1.5em;
  width: 36px; height: 36px;
  border-radius: 50%;
  margin-left: 8px;
  cursor: pointer;
  transition: background 0.3s;
}
.banner-slider .slider-controls button:hover {
  background: rgba(0,0,0,0.7);
}
:root {
  /* timing & colors */
  --slider-fade-dur: 0.8s;
  --slider-text-dur: 0.6s;
  --slider-delay: 5s;
  --ctrl-bg: rgba(0, 0, 0, 0.35);
  --ctrl-bg-hover: rgba(0, 0, 0, 0.65);
  --dot-size: 10px;
  --dot-color: rgba(255,255,255,0.5);
  --dot-active: #fff;
}

/* container sits behind header */
.ust-bg {
  position: relative;
  overflow: hidden;
}
.banner-slider {
  position: absolute; top:0; left:0;
  width:100%; height:100%;
  z-index: 0;
}
.ust-bg .header-bg,
.ust-bg .page-header,
.ust-bg .mobile-nav {
  position: relative; z-index: 1;
}

/* slides */
.banner-slider .slide {
  position: absolute; top:0; left:0;
  width:100%; height:100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity var(--slider-fade-dur) ease-in-out;
}
.banner-slider .slide.active {
  opacity: 1;
  z-index: 1;
}

/* text overlay */
.banner-slider .slide .text {
  position: absolute;
  bottom: 20%; left: 10%;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  font-family: 'Open Sans', sans-serif;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--slider-text-dur) ease-out var(--slider-fade-dur),
    transform var(--slider-text-dur) ease-out var(--slider-fade-dur);
}
.banner-slider .slide.active .text {
  opacity: 1;
  transform: translateY(0);
}
.banner-slider .slide .text h2 {
  margin: 0 0 0.3em;
  font-size: 2.5em; font-weight: 700;
}
.banner-slider .slide .text p {
  margin: 0;
  font-size: 1.2em;
}

/* arrows */
.banner-slider .slider-controls {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 2;
}
.banner-slider .slider-controls button {
  background: var(--ctrl-bg);
  border: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: background 0.3s, transform 0.2s;
}
.banner-slider .slider-controls button:hover {
  background: var(--ctrl-bg-hover);
  transform: scale(1.1);
}
.banner-slider .slider-controls button:active {
  transform: scale(0.95);
}

/* dots */
.banner-slider .dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.banner-slider .dots .dot {
  width: var(--dot-size);
  height: var(--dot-size);
  background: var(--dot-color);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}
.banner-slider .dots .dot:hover {
  transform: scale(1.2);
}
.banner-slider .dots .dot.active {
  background: var(--dot-active);
  transform: scale(1.3);
}

/* pause-on-hover hook (needs JS to actually pause) */
.banner-slider:hover .slide.active {
  /* your JS could read this state to pause the timer */
  animation-play-state: paused;
}



/* ─── Dot Nav ─── */
.banner-slider .dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.banner-slider .dots .dot {
  width: var(--dot-size, 10px);
  height: var(--dot-size, 10px);
  background: var(--dot-color, rgba(255,255,255,0.5));
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}
.banner-slider .dots .dot:hover {
  transform: scale(1.2);
}
.banner-slider .dots .dot.active {
  background: var(--dot-active, #fff);
  transform: scale(1.3);
}









/* give subtitle a black translucent background */
.banner-slider .slide .text p {
  background: rgba(0, 0, 0, 0.6);
  display: inline-block;
  padding: 6px 10px;
  border-radius: 4px;
}









.font12 {
	font-size: 12px !important;
}


















/* ==============================
   MB Papeles Overlays Section
   ============================== */
.right-blm .text-blmps {
  padding: 20px;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.overlay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Card styling */
.overlay-card {
  background: #f9f9f9;
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  position: relative;
}

.overlay-card h3 {
  margin-top: 0;
  font-size: 1.1rem;
  color: #00539f;
  font-weight: 600;
}

.overlay-card p {
  margin: 0.5em 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
}

/* Hover / focus state */
.overlay-card:hover,
.overlay-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  background: #fff;
  cursor: pointer;
}

/* Accent bar on top of each card */
.overlay-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40px;
  height: 4px;
  background: #00539f;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 4px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .overlay-grid {
    grid-template-columns: 1fr;
  }
}




.announcement-box {
  border: 1px solid #bee5eb;
  background-color: #d1ecf1;
  color: #0c5460;
  padding: 12px 15px;
  margin-bottom: 20px;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  line-height: 1.4;
}

.announcement-box strong {
  display: block;
  margin-bottom: 5px;
}