/* 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;
  overflow-x:auto;
  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;
}







.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;
}


.ust-bg {
	background-image:url(../images/ust-bg.jpg);
	height:420px;
	width:100%;
	background-position:top center;
}
.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 {
	width:460px;
	margin:0 0 0 15px;
	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 */
}



/* 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: hidden;
		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;
}

/* === DESKTOP SECTOR BUTTONS === */
.sectorr div[class$='-btn'] {


	margin-top: -2px; /* stick right under image border */
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
}

.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);
}














/* ========================================================================== 
   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;
}


















:root {
  --primary: #00539f;
  --light-gray: #f5f7fa;
  --card-bg: #fff;
  --text: #333;
}

.contact-section {
  padding: 60px 20px;
  background: var(--light-gray);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* position the four cards */
#card-office  { grid-column: 1; grid-row: 1; }
#card-tel     { grid-column: 2; grid-row: 1; }
#card-email   { grid-column: 1; grid-row: 2; }
#card-mobile  { grid-column: 2; grid-row: 2; }

/* map spans cols 3–4, both rows */
.contact-map {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
  border-radius: 8px;
  overflow: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
  transition: filter .3s;
}
.contact-map iframe:hover {
  filter: brightness(1.05);
}

/* card styling */
.contact-card {
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 24px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.contact-card h3 {
  margin-bottom: 12px;
  color: var(--primary);
  font-size: 1.25rem;
}
.contact-card p {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.4;
}
.contact-card a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.contact-card a:hover {
  text-decoration: underline;
}

/* responsive: stack on narrow screens */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
  }
  .contact-map {
    grid-column: 1;
    grid-row: 5;
    min-height: 300px;
  }
}
/* ==============================
   Map Frame Enhancement v2
   ============================== */

:root {
  --primary: #00539f;
  --primary-dark: #003f7f;
  --light-gray: #f5f7fa;
}

/* parent spans grid as before */
.contact-map {
  position: relative;
  grid-column: 3 / 5;
  grid-row: 1 / 3;

  background: #fff;
  padding: 6px;                         /* inner “matte” */
  border: 4px solid transparent;       /* will be replaced by border-image */
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  box-sizing: border-box;

  /* gradient border */
  border-image: linear-gradient(45deg, var(--primary), var(--primary-dark)) 1;
  transition: box-shadow .3s ease;
}
.contact-map:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* floating label */
.contact-map::before {
  content: "Location";
  position: relative;
  top: -12px;
  left: 16px;
  background: var(--primary);
  color: #fff;
  padding: 4px 10px;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background .3s ease, transform .2s ease;
}
.contact-map:hover::before {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

/* iframe styling */
.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 10px;  /* slightly smaller for the matte to show */
  transition: filter .3s ease;
}
.contact-map iframe:hover {
  filter: brightness(1.08);
}



/* ─── Consultancy Page Only ───────────────────────────────────── */
.right-blm .text-blmps {
	text-align: justify;
	text-justify: inter-word;
}

.right-blm .text-blmps h2 {
	font-size: 2.2rem;
	color: #2c3e50;
	font-weight: 700;
	margin-bottom: 1rem;
	opacity: 0;
	animation: fadeInUp 0.6s ease forwards;
	animation-delay: 0.2s;
}

.right-blm .text-blmps p {
	font-size: 1rem;
	line-height: 1.6;
	color: #4a4a4a;
	margin-bottom: 1rem;
	opacity: 0;
	animation: fadeInUp 0.6s ease forwards;
}

	.right-blm .text-blmps p:nth-of-type(1) {
		animation-delay: 0.4s;
	}

	.right-blm .text-blmps p:nth-of-type(2) {
		animation-delay: 0.6s;
	}

/* Highlight important phrases */
.right-blm .text-blmps .highlight {
	background-color: #fffae6;
	color: #d35400;
	padding: 0 4px;
	border-radius: 3px;
}

/* Custom bullet list with staggered fade‑up */
.right-blm .text-blmps ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 1rem;
}

	.right-blm .text-blmps ul li {
		position: relative;
		padding-left: 1.5em;
		margin-bottom: 0.75rem;
		opacity: 0;
		animation: fadeInUp 0.6s ease forwards;
	}

		.right-blm .text-blmps ul li:before {
			content: '•';
			position: absolute;
			left: 0;
			top: 0;
			font-size: 1.2rem;
			color: #2980b9;
		}

		.right-blm .text-blmps ul li:nth-child(1) {
			animation-delay: 0.8s;
		}

		.right-blm .text-blmps ul li:nth-child(2) {
			animation-delay: 1s;
		}

		.right-blm .text-blmps ul li:nth-child(3) {
			animation-delay: 1.2s;
		}

		.right-blm .text-blmps ul li:nth-child(4) {
			animation-delay: 1.4s;
		}

/* Fade‑up keyframes */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Drop‑cap for first paragraph */
.right-blm .text-blmps p:first-of-type::first-letter {
	font-size: 3rem;
	font-weight: bold;
	color: #0073e6;
	float: left;
	line-height: 1;
	margin-right: 8px;
}

/* Brand name in blue */
.right-blm .text-blmps .brand {
	color: #0073e6;
}



/* ===== 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;
}


























/* ========== 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);
  }
}




/* 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;
}






@media only screen and (max-width: 1024px) {
	.sectorr a {
		overflow: auto !important;
	}
}



/* Hide mobile sector boxes on desktop */
.mobile-sectors {
	display: none;
}
















































/*BEHTIS NIROO*/






/* ========== 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%;
  }
}





.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 */
	}




.introductionnnn p,
.introductionnnn ul {
	text-align: justify;
	text-justify: inter-word;
}




/* ========================================================================== 
   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);
}


/* =======================================
   Fix for .intro-sector + .introductionnnn
   ======================================= */
.introductionnnn {
  /* remove the old hardcoded width & float */
  width: auto !important;
  float: none !important;

  /* let flexbox control the sizing instead */
  flex: 1 1 48%;
  max-width: 48%;
  box-sizing: border-box;
  margin: 0;
}












.font12 {

	font-size: 12px !important;

}








/* Desktop-only override (adjust breakpoint as needed) */
@media (min-width: 1024px) {
  .request-form .form-group button[type="submit"] {
    width: auto;                  /* let it size to its content */
    max-width: 200px;             /* optional cap on width */
    padding: 0.75em 1.5em;        /* normal button padding */
    margin: 0 auto;               /* center in its container if you like */
  }
}

/* Base button styling */
.request-form .form-group button[type="submit"] {
  cursor: pointer;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.1s ease;
}

/* Hover/focus/active states */
.request-form .form-group button[type="submit"]:hover,
.request-form .form-group button[type="submit"]:focus {
  background-color: #0056b3;
  transform: translateY(-2px);
}

.request-form .form-group button[type="submit"]:active {
  transform: translateY(0);
}















/* Root variables for easy theme customization */
:root {
	--primary: #0056b3;
	--primary-dark: #003f80;
	--text: #333333;
	--background: #ffffff;
	--highlight-bg: #f0f8ff;
}

/* Container styling */
.about-us {
	max-width: 760px;
	margin: 2rem auto;
	padding: 1.5rem;
	background: var(--background);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

	/* Heading */
	.about-us h2 {
		font-size: 2.25rem;
		text-align: center;
		margin-bottom: 1rem;
		color: var(--text);
	}

	/* Paragraphs */
	.about-us p {
		margin-bottom: 1rem;
		color: var(--text);
		line-height: 1.65;
		transition: background 0.3s;
	}

		.about-us p:hover {
			background: var(--highlight-bg);
		}

/* Tooltip styling */
abbr[title] {
	border-bottom: 1px dotted var(--primary);
	cursor: help;
	position: relative;
}

	abbr[title]:hover::after {
		content: attr(title);
		position: absolute;
		bottom: 100%;
		left: 0;
		background: var(--primary);
		color: #fff;
		padding: 0.3em 0.5em;
		white-space: nowrap;
		border-radius: 4px;
		font-size: 0.85em;
		opacity: 0.9;
	}

/* CTA button */
.cta-button {
	display: inline-block;
	padding: 0.25em 1.5em;
	background: var(--primary);
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	border: none;
	border-radius: 4px;
	transition: transform 0.2s, background 0.3s;
}

	.cta-button:hover {
		background: var(--primary-dark);
		transform: translateY(-2px);
	}

/* Fade-in animation */
.fade-in {
	opacity: 0;
	transform: translateY(10px);
	animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.about-us h3 {
  font-size: 1.5rem;
  margin-top: 1.5rem;
  color: var(--text);
}

.core-competencies,
.partners-list {
  list-style: disc inside;
  margin-left: 0;
  padding-left: 1.25rem;
}

.core-competencies li,
.partners-list li {
  margin-bottom: 0.75rem;
}