/**
Theme Name: Trakey - Transport & Logistic HTML Template
Author: Softnio
Version: 1.0.3
*/
/**
 * Table of Contents
 * 1.0 - Fonts
 * 2.0 - Reset css
 * 3.0 - navbar
 * 4.0 - banner
 * 5.0 - Platform
 * 6.0 - statistics
 * 7.0 - Service
 * 8.0 - Quote & testimonial
 * 9.0 - client-logo
 * 10.0 - call to action
 * 11.0 - News-page
 * 12.0 - contact-page
 * 13.0 - footer
 * 14.0 - copyright
 * 15.0 - Media query
 */
/* ==========================================================================
    1.0 Fonts
   ========================================================================== */
/*open sans font*/
@font-face {
  font-family: "open-sans";
  src: url("../fonts/open-sans/opensans-regular-webfont.eot");
  src:
    url("../fonts/open-sans/opensans-regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/open-sans/opensans-regular-webfont.woff2") format("woff2"),
    url("../fonts/open-sans/opensans-regular-webfont.woff") format("woff"),
    url("../fonts/open-sans/opensans-regular-webfont.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "open-sans";
  src: url("../fonts/open-sans/opensans-bold-webfont.eot");
  src:
    url("../fonts/open-sans/opensans-bold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/open-sans/opensans-bold-webfont.woff2") format("woff2"),
    url("../fonts/open-sans/opensans-bold-webfont.woff") format("woff"),
    url("../fonts/open-sans/opensans-bold-webfont.ttf") format("truetype");
  font-weight: 700;
}

@font-face {
  font-family: "open-sans";
  src: url("../fonts/open-sans/opensans-light-webfont.eot");
  src:
    url("../fonts/open-sans/opensans-light-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/open-sans/opensans-light-webfont.woff2") format("woff2"),
    url("../fonts/open-sans/opensans-light-webfont.woff") format("woff"),
    url("../fonts/open-sans/opensans-light-webfont.ttf") format("truetype");
  font-weight: 300;
}

/*Arimo font*/
@font-face {
  font-family: "arimo";
  src: url("../fonts/arimo/arimo-regular-webfont.eot");
  src:
    url("../fonts/arimo/arimo-regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/arimo/arimo-regular-webfont.woff2") format("woff2"),
    url("../fonts/arimo/arimo-regular-webfont.woff") format("woff"),
    url("../fonts/arimo/arimo-regular-webfont.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "arimo";
  src: url("../fonts/arimo/arimo-bold-webfont.eot");
  src:
    url("../fonts/arimo/arimo-bold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/arimo/arimo-bold-webfont.woff2") format("woff2"),
    url("../fonts/arimo/arimo-bold-webfont.woff") format("woff"),
    url("../fonts/arimo/arimo-bold-webfont.ttf") format("truetype");
  font-weight: 700;
}

/* ==========================================================================
    2.0 Reset css
   ========================================================================== */
body {
  font-family: "open-sans";
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
}

html,
body {
  overflow-x: hidden;
}

a:link,
a:visited {
  outline: 0;
  text-decoration: none;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
}

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

ul,
ol {
  padding: 0px;
  margin: 0px;
}

ul li,
ol li {
  list-style: none;
}

input:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: 0 0 0 transparent;
}

form label.error {
  display: none !important;
}

.form-control.error,
select.error,
select.error + .nice-select {
  border-color: #d6336c;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 10000;
  /* makes sure it stays on top */
}

.pad-0 {
  padding: 0px;
}

.npl {
  padding-left: 0px;
}

.npr {
  padding-right: 0px;
}

.section-heading {
  color: #1e1d2b;
  font-size: 24px;
  font-weight: 700;
  font-family: arimo;
  text-transform: uppercase;
  padding-bottom: 45px;
}

.btn {
  color: #fff;
  background: #1e73c7;
  transition:
    background 350ms,
    color 350ms;
}

.btn:hover {
  color: #fff;
  background: #145391;
}

.p-btn {
  color: #1e73c7;
  font-weight: bold;
  font-family: "arimo";
}

.p-btn:hover {
  color: #191c30;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "arimo";
  font-weight: 700;
  margin: 0px;
}

p {
  margin: 0px;
}

.preload {
  display: none;
}

/* ==========================================================================
    3.0 Navbar Styling
   ========================================================================== */
.navbar-custom {
  background: transparent;
  border: none;
}

.navbar-custom .navbar-brand {
  padding: 42px 37px;
  background: #ececec;
  width: 100%;
  height: 106px;
  display: block;
  transition: all 0.3s;
  transition-property: height, padding;
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-brand:active {
  background: #ececec;
}

.navbar-custom > .container .navbar-brand {
  margin-left: 0px;
}

.navbar-custom.affix .masthead {
  visibility: hidden;
  height: 0px;
  padding: 0px;
  overflow: hidden;
}

.navbar-custom.affix .bottom-bar {
  background: #101327;
}

.navbar-custom.affix .navbar-brand {
  height: 60px;
  padding: 20px 37px;
}

.navbar-custom .masthead {
  color: #fff;
  font-weight: 300;
  padding: 8px 0;
  transition: height 0.3s;
  height: 46px;
  overflow: hidden;
}

.navbar-custom .masthead .contact {
  padding-top: 4px;
}

.navbar-custom .masthead .contact .contact-li {
  display: inline-block;
  margin-right: 35px;
}

.navbar-custom .masthead .contact .contact-li a {
  color: #fff;
}

.navbar-custom .masthead .contact .contact-li a:hover {
  color: #fff;
}

.navbar-custom .masthead .contact i {
  font-size: 18px;
  margin-right: 10px;
  vertical-align: middle;
  margin-bottom: 1px;
}

.navbar-custom .masthead .social a {
  color: #fff;
  line-height: 28px;
  border: 1px solid #fff;
  display: inline-block;
  height: 30px;
  width: 30px;
  margin-left: 5px;
  text-align: center;
}

.navbar-custom .masthead .social a:hover {
  background: #fff;
  color: #000;
}

.navbar-custom .bottom-bar {
  background: #191c30;
}

.navbar-custom .bottom-bar .office .nice-select {
  width: 100%;
  height: 100%;
  background-color: #1e73c7;
  color: white;
  padding: 10px 30px;
  font-weight: 300;
  border: none;
  cursor: pointer;
  border-radius: 0px;
}

.navbar-custom .bottom-bar .office .nice-select .list {
  background: #1a63ab;
  border-radius: 0px;
}

.navbar-custom .bottom-bar .office .nice-select:before {
  font-family: FontAwesome;
  content: "\f0ac";
  display: block;
  margin-top: -4px;
  position: absolute;
  left: 15px;
  top: 18%;
  margin-top: 0px;
}

.navbar-custom .bottom-bar .office .nice-select:after {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  top: 55%;
  right: 15px;
}

.navbar-custom .bottom-bar .office .nice-select .option:hover,
.navbar-custom .bottom-bar .office .nice-select .option.selected.focus {
  background: #0f3e6b;
}

.navbar-custom .bottom-bar .nav {
  padding-top: 7px;
}

.navbar-custom .bottom-bar .nav li.active a {
  background: transparent;
  border-bottom: 3px solid #1e73c7;
}

.navbar-custom .bottom-bar .nav li a {
  color: #fff;
  font-family: "arimo";
  font-weight: 700;
}

.navbar-custom .bottom-bar .nav li a:hover {
  border-bottom: 3px solid #1e73c7;
  color: #fff;
}

.navbar-custom .bottom-bar .search.dropdown {
  position: relative;
  float: right;
  display: inline-block;
}

.navbar-custom .bottom-bar .search.dropdown .dropbtn {
  color: #fff;
  width: 60px;
  height: 60px;
  background: #0f1121;
  padding: 20px 25px;
  display: block;
  cursor: pointer;
  border: none;
}

.navbar-custom .bottom-bar .search.dropdown .dropdown-content {
  display: none;
  position: absolute;
  right: 0px;
  width: 280px;
  height: 50px;
}

.navbar-custom .bottom-bar .search.dropdown .dropdown-content .form-control {
  background: #0f1121;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0px;
  padding: 10px 20px;
}

.navbar-custom
  .bottom-bar
  .search.dropdown
  .dropdown-content
  .form-control
  input {
  width: 100%;
  border-radius: 0px;
  height: 30px;
  border: none;
  padding-left: 15px;
}

.navbar-custom .bottom-bar .search.dropdown:hover .dropdown-content {
  display: block;
}

.navbar-custom .navbar-collapse {
  width: 83.333%;
  border-width: 2px;
}

/*========================================================================
    4.0 Banner Styling
   ========================================================================== */
.banner-content.carousel-fade {
  height: 900px;
  /* Background images are set within the HTML using inline CSS, not here */
}

.banner-content.carousel-fade .carousel-inner .item {
  transition-property: opacity;
}

.banner-content.carousel-fade .carousel-inner .item,
.banner-content.carousel-fade .carousel-inner .active.left,
.banner-content.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}

.banner-content.carousel-fade .carousel-inner .active,
.banner-content.carousel-fade .carousel-inner .next.left,
.banner-content.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.banner-content.carousel-fade .carousel-inner .next,
.banner-content.carousel-fade .carousel-inner .prev,
.banner-content.carousel-fade .carousel-inner .active.left,
.banner-content.carousel-fade .carousel-inner .active.right {
  left: 0;
  transform: translate3d(0, 0, 0);
}

.banner-content.carousel-fade .tab-box {
  position: absolute;
  width: 100%;
  top: 265px;
}

.banner-content.carousel-fade .tab-box .custom-tab {
  margin-bottom: 185px;
}

.banner-content.carousel-fade
  .tab-box
  .custom-tab
  .nav-tabs.carousel-indicators {
  background: #191c30;
  padding: 0 40px 0 40px;
  border-bottom: 1px solid #30344e;
  position: static;
  margin-left: 0px;
  width: 100%;
}

.banner-content.carousel-fade
  .tab-box
  .custom-tab
  .nav-tabs.carousel-indicators
  .active {
  background: transparent;
}

.banner-content.carousel-fade
  .tab-box
  .custom-tab
  .nav-tabs.carousel-indicators
  li {
  height: auto;
  width: auto;
  text-indent: 0px;
  padding: 10px 26px 0 26px;
  border: none;
  border-radius: 0px;
  margin: 0px;
  display: inline-block;
  float: none;
}

.banner-content.carousel-fade
  .tab-box
  .custom-tab
  .nav-tabs.carousel-indicators
  li:first-child {
  padding-left: 0px;
}

.banner-content.carousel-fade
  .tab-box
  .custom-tab
  .nav-tabs.carousel-indicators
  li:last-child {
  padding-right: 0px;
}

.banner-content.carousel-fade
  .tab-box
  .custom-tab
  .nav-tabs.carousel-indicators
  li
  a {
  outline: none;
  padding: 0 0 10px 0;
  color: #fff;
  margin: 0px;
  background: transparent;
  border: 0px;
  border-bottom: 3px solid transparent;
  border-radius: 0px;
  transition: border 300ms;
}

.banner-content.carousel-fade
  .tab-box
  .custom-tab
  .nav-tabs.carousel-indicators
  li
  a
  img {
  padding: 0 0 10px 0px;
  height: 41px;
  width: auto;
}

.banner-content.carousel-fade
  .tab-box
  .custom-tab
  .nav-tabs.carousel-indicators
  li
  a:hover,
.banner-content.carousel-fade
  .tab-box
  .custom-tab
  .nav-tabs.carousel-indicators
  li.active
  a,
.banner-content.carousel-fade
  .tab-box
  .custom-tab
  .nav-tabs.carousel-indicators
  li
  a:focus {
  border-bottom-color: #1e73c7;
}

.banner-content.carousel-fade .tab-box .custom-tab .tab-content {
  background-color: rgba(25, 28, 48, 0.8);
  color: #fff;
  padding: 40px 25px;
}

.banner-content.carousel-fade .tab-box .custom-tab .tab-content h4 {
  font-size: 30px;
  padding-bottom: 15px;
}

.banner-content.carousel-fade .tracking {
  background: rgba(25, 28, 48, 0.9);
  color: #fff;
  padding: 70px 0;
  z-index: 100;
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 100%;
}

.banner-content.carousel-fade .tracking h3 {
  font-size: 30px;
}

.banner-content.carousel-fade .tracking p {
  padding-top: 10px;
}

.banner-content.carousel-fade .tracking .tracking-form {
  margin-top: 10px;
}

.banner-content.carousel-fade .tracking .tracking-form .form-group {
  margin-bottom: 0px;
}

.banner-content.carousel-fade
  .tracking
  .tracking-form
  .form-group
  .form-control {
  background: transparent;
  border-radius: 0px;
  height: 45px;
  border: 1px solid #555561;
  color: #fff;
}

.banner-content.carousel-fade .tracking .tracking-form .btn {
  height: 45px;
  border-radius: 0px;
  font-family: "arimo";
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  border: none;
}

.banner-content.carousel-fade .carousel,
.banner-content.carousel-fade .item,
.banner-content.carousel-fade .active {
  height: 100%;
}

.banner-content.carousel-fade .carousel-inner {
  height: 100%;
}

.banner-content.carousel-fade .fill {
  width: 100%;
  height: 100%;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

#in_pge_banner.banner-content {
  height: 200px;
}

#in_pge_banner.banner-content .header-text {
  color: #fff;
  padding-top: 80px;
}

#in_pge_banner.banner-content .header-text h4.page-title {
  font-size: 36px;
  font-family: "arimo";
  font-weight: 700;
  padding-bottom: 10px;
}

#in_pge_banner.banner-content.a_page_banner {
  background: url("../image/header-bg-about.png") no-repeat;
  background-size: cover;
  background-position: center center;
}

#in_pge_banner.banner-content.ser_page_banner {
  background: url("../image/header-bg-service.png") no-repeat;
  background-size: cover;
  background-position: center center;
}

#in_pge_banner.banner-content.blog_page_banner {
  background: url("../image/header-bg-blog.png") no-repeat;
  background-size: cover;
  background-position: center center;
}

#in_pge_banner.banner-content.cntct_page_banner {
  background: url("../image/header-bg-contact.png") no-repeat;
  background-size: cover;
  background-position: center center;
}

/* ==========================================================================
   5.0 About us Styling
   ========================================================================== */
.about-us {
  padding: 100px 0;
}

.about-us .section-text .focus-text {
  font-size: 60px;
  font-family: "open-sans";
  font-weight: 300;
  color: #7d7d7d;
  padding-bottom: 20px;
}

.about-us .section-text p {
  color: #7d7d7d;
  padding-bottom: 20px;
}

.about-us .img-wrapper {
  position: relative;
}

.about-us .img-wrapper img.img-left {
  position: absolute;
  top: 50px;
  left: 0px;
  z-index: 1000;
}

.about-us.a-page-abt {
  border-bottom: 1px solid #e1e1e1;
}

.about-us.a-page-abt img {
  width: 100%;
}

.about-us.a-page-abt .section-row:first-child {
  margin-bottom: 60px;
}

.about-us.a-page-abt .section-text h4 {
  color: #1e1d2b;
  font-size: 22px;
  text-transform: uppercase;
  padding-bottom: 25px;
}

.about-us.a-page-abt .section-text ul.list-text {
  color: #7d7d7d;
  padding-bottom: 20px;
}

.about-us.a-page-abt .section-text ul.list-text:last-child {
  padding-bottom: 0;
}

.about-us.a-page-abt .section-text ul.list-text li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}

.about-us.a-page-abt .section-text ul.list-text li:last-child {
  margin-bottom: 0px;
}

.about-us.a-page-abt .section-text ul.list-text li:before {
  content: "";
  height: 7px;
  width: 7px;
  background: #1e73c7;
  position: absolute;
  left: 0px;
  top: 35%;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
}

.about-us.a-page-abt .section-text ul.spe-list li {
  margin-bottom: 15px;
}

.about-us.a-page-abt .section-text ul.spe-list li:last-child {
  margin-bottom: 0px;
}

.about-us.a-page-abt .section-text ul.spe-list li:last-child p:last-child {
  padding-bottom: 0;
}

.about-us.a-page-abt .section-text ul.spe-list li i {
  background: #1e73c7;
  text-align: center;
  height: 40px;
  width: 40px;
  color: #fff;
  font-size: 18px;
  padding-top: 10px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
}

.about-us.a-page-abt .section-text ul.spe-list li .right-text {
  margin-left: 60px;
  padding-top: 5px;
}

.about-us.a-page-abt .section-text ul.spe-list li .right-text h5 {
  padding-bottom: 15px;
  color: #555;
  font-size: 18px;
}

/* ==========================================================================
    6.0 statistics Styling
   ========================================================================== */
.statistics {
  padding: 70px 0;
}

.statistics .content-warpper .stat-col i {
  font-size: 64px;
  width: 65px;
  display: inline-block;
  color: #fff;
  text-align: center;
  margin-right: 0px;
}

.statistics .content-warpper .stat-col .text-wrapper {
  color: #fff;
  margin-left: 70px;
}

.statistics .content-warpper .stat-col .text-wrapper h3 {
  font-size: 40px;
  font-family: "open-sans";
  font-weight: 700;
  padding-bottom: 5px;
}

.statistics .content-warpper .stat-col .text-wrapper p {
  font-size: 16px;
}

/* ==========================================================================
   7.0 Service Styling
   ========================================================================== */
.service {
  padding: 100px 0;
}

.service .section-text p {
  color: #7d7d7d;
  padding-bottom: 20px;
}

.service .service-row {
  margin-bottom: 40px;
}

.service .service-row:last-child {
  margin-bottom: 0px;
}

.service .service-row i {
  font-size: 20px;
  color: #fff;
  background: #1e73c7;
  border-radius: 50px;
  padding: 15px 0;
  height: 50px;
  width: 50px;
  text-align: center;
}

.service .service-row .text-wrapper h5 {
  color: #636363;
  font-size: 18px;
  font-family: "open-sans";
  font-weight: 700;
  padding-top: 15px;
}

.service .service-row .text-wrapper p {
  padding: 15px 0;
  color: #7d7d7d;
}

.service .service-row .text-wrapper a {
  color: #1e73c7;
}

.service .service-row .text-wrapper a:hover {
  color: #191c30;
}

.service.ser-p-ser {
  border-bottom: 1px solid #e1e1e1;
}

.service.ser-p-ser img {
  width: 100%;
}

.service.ser-p-ser .section-row {
  margin-bottom: 60px;
}

.service.ser-p-ser .section-row:last-child {
  margin-bottom: 0px;
}

.service.ser-p-ser .section-text span {
  font-family: "arimo";
  font-size: 60px;
  color: #d7d7d7;
  line-height: 0.7;
}

.service.ser-p-ser .section-text h4 {
  color: #636363;
  font-size: 18px;
  padding-bottom: 25px;
}

.service.ser-p-ser .section-text ul.list-text {
  color: #7d7d7d;
  padding-bottom: 20px;
}

.service.ser-p-ser .section-text ul.list-text:last-child {
  padding-bottom: 0;
}

.service.ser-p-ser .section-text ul.list-text li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}

.service.ser-p-ser .section-text ul.list-text li:last-child {
  margin-bottom: 0px;
}

.service.ser-p-ser .section-text ul.list-text li:before {
  content: "";
  height: 7px;
  width: 7px;
  background: #1e73c7;
  position: absolute;
  left: 0px;
  top: 40%;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
}

.service.ser-p-ser .section-text ul.spe-list li {
  margin-bottom: 15px;
}

.service.ser-p-ser .section-text ul.spe-list li:last-child {
  margin-bottom: 0px;
}

.service.ser-p-ser .section-text ul.spe-list li i {
  background: #1e73c7;
  text-align: center;
  height: 40px;
  width: 40px;
  color: #fff;
  font-size: 18px;
  padding-top: 10px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
}

.service.ser-p-ser .section-text ul.spe-list li .right-text {
  margin-left: 60px;
  padding-top: 5px;
}

.service.ser-p-ser .section-text ul.spe-list li .right-text h5 {
  padding-bottom: 15px;
  color: #555;
  font-size: 18px;
}

.service.ser-p-ser .section-text p {
  color: #7d7d7d;
  padding-bottom: 20px;
}

.service.ser-p-ser .section-text p:last-child {
  padding-bottom: 0;
}

/* ==========================================================================
   8.0 Quote & testimonial Styling
   ========================================================================== */
.quo-tstmnail {
  background: #191c30;
  padding: 100px 0;
  position: relative;
}

.quo-tstmnail:after {
  content: "";
  position: absolute;
  right: 0%;
  top: 0px;
  width: 50%;
  height: 100%;
  padding-left: 25px;
  background: url("../image/testimonial-bg.png");
  background-position: center center;
  background-size: cover;
}

.quo-tstmnail h4.section-heading {
  color: #fff;
}

.quo-tstmnail .quote {
  padding-right: 30px;
}

.quo-tstmnail .quote .select-box .nice-select {
  height: 50px;
  font-size: 14px;
  color: #7d7d7d;
  border-radius: 0px;
  line-height: 35px;
  padding: 6px 12px;
}

.quo-tstmnail .quote .select-box .nice-select .list {
  border-radius: 0px;
}

.quo-tstmnail .quote .form-group {
  margin-bottom: 20px;
}

.quo-tstmnail .quote .form-group input::-webkit-input-placeholder {
  color: #7d7d7d;
}

.quo-tstmnail .quote .form-group input:-moz-placeholder {
  /* Firefox 18- */
  color: #7d7d7d;
}

.quo-tstmnail .quote .form-group input::-moz-placeholder {
  /* Firefox 19+ */
  color: #7d7d7d;
}

.quo-tstmnail .quote .form-group input:-ms-input-placeholder {
  color: #7d7d7d;
}

.quo-tstmnail .quote .form-group .form-control {
  border-radius: 0px;
  height: 50px;
  color: #7d7d7d;
}

.quo-tstmnail .quote .btn {
  height: 50px;
  width: 180px;
  border-radius: 0px;
  font-family: "arimo";
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  border: none;
}

.quo-tstmnail .testimonial {
  padding-left: 30px;
  z-index: 1;
}

.quo-tstmnail .testimonial .carousel-inner .item .testimonial-section {
  height: auto;
  padding: 35px 35px 55px 35px;
  position: relative;
  font-size: 20px;
  color: #fff;
  font-family: inherit;
  font-weight: 300;
  background: url("../image/testimonial-box.png") no-repeat;
  background-size: contain;
}

.quo-tstmnail .testimonial .carousel-inner .item .testimonial-section-name {
  text-align: left;
  color: #000;
  margin-top: 15px;
}

.quo-tstmnail .testimonial .carousel-inner .item .testimonial-section-name img {
  height: 70px;
  width: 70px;
  margin-right: 30px;
}

.quo-tstmnail
  .testimonial
  .carousel-inner
  .item
  .testimonial-section-name
  .client-name {
  margin-top: 10px;
  color: #fff;
  text-transform: uppercase;
  font-family: "arimo";
}

.quo-tstmnail
  .testimonial
  .carousel-inner
  .item
  .testimonial-section-name
  .client-name
  h4 {
  font-size: 18px;
  padding-bottom: 5px;
}

/* ==========================================================================
   9.0 client-logo Styling
   ========================================================================== */
.cl-logo {
  padding: 70px 0px;
}

.cl-logo img {
  width: 100%;
}

/* ==========================================================================
   10.0 call to action Styling
   ========================================================================== */
.call-action {
  background: rgba(25, 28, 48, 0.9);
  color: #fff;
  padding: 70px 0;
}

.call-action h3 {
  font-size: 30px;
}

.call-action p {
  padding-top: 10px;
}

.call-action .btn {
  height: 60px;
  width: 260px;
  border-radius: 0px;
  font-family: "arimo";
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  border: none;
  margin-top: 20px;
}

/* ==========================================================================
   11.0 News-page Styling
   ========================================================================== */
.blog-sec {
  padding: 100px 0;
}

.blog-sec .blog li {
  margin-bottom: 60px;
}

.blog-sec .blog li:last-child {
  margin-bottom: 0px;
}

.blog-sec .blog li img {
  margin-bottom: 30px;
  width: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.blog-sec .blog li img:hover {
  opacity: 0.5;
}

.blog-sec .blog li .date {
  color: #fff;
  padding-top: 20px;
  height: 95px;
  width: 95px;
  background: #1e73c7;
  text-align: center;
  margin-right: 20px;
  line-height: 22px;
}

.blog-sec .blog li .date strong {
  font-size: 24px;
}

.blog-sec .blog li .blog-text {
  color: #fff;
}

.blog-sec .blog li .blog-text h4 {
  font-family: "open-sans";
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 5px;
  color: #636363;
  padding-bottom: 15px;
}

.blog-sec .blog li .blog-text h4 a {
  color: #636363;
}

.blog-sec .blog li .blog-text h4 a:hover {
  color: #1e73c7;
}

.blog-sec .blog li .blog-text p {
  color: #7d7d7d;
  padding-bottom: 25px;
}

.blog-sec .blog li .blog-text p:last-child {
  padding-bottom: 0;
}

.blog-sec .blog li .blog-text ul.list-text {
  margin-bottom: 25px;
}

.blog-sec .blog li .blog-text ul.list-text:last-child {
  margin-bottom: 0;
}

.blog-sec .blog li .blog-text li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: #7d7d7d;
}

.blog-sec .blog li .blog-text li:before {
  content: "";
  height: 7px;
  width: 7px;
  background: #1e73c7;
  position: absolute;
  left: 0px;
  top: 35%;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
}

.blog-sec .blog li .blog-text li:last-child {
  margin-bottom: 0;
}

.blog-sec .blog li .blog-text a {
  padding-top: 15px;
  color: #1e73c7;
}

.blog-sec .blog li .blog-text a:hover {
  color: #191c30;
}

.blog-sec .blog .pagination {
  margin: 0px;
}

.blog-sec .blog .pagination li:first-child a {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
}

.blog-sec .blog .pagination li.active a {
  color: #000;
  background-color: #fff;
  border-bottom: 1px solid #000;
  font-size: 18px;
  padding-top: 3px;
  padding-bottom: 0;
}

.blog-sec .blog .pagination li a {
  border: 0px;
  color: #959595;
  padding: 5px 8px;
  display: inline-block;
}

.blog-sec .blog .pagination li a:hover,
.blog-sec .blog .pagination li a:focus {
  color: #000;
  background: none;
}

.blog-sec .rb-heading {
  color: #1e1d2b;
  font-size: 18px;
  font-weight: 700;
  font-family: "open-sans";
  padding: 50px 0 30px 0;
}

.blog-sec .search-blog .form-control {
  width: 85%;
  border: 1px solid #e1e1e1;
  border-radius: 0px;
  padding: 10px 20px;
  height: 50px;
}

.blog-sec .search-blog .srch-bttn {
  color: #fff;
  width: 15%;
  height: 50px;
  text-align: center;
  background: #1e73c7;
  display: block;
  cursor: pointer;
  border: none;
}

.blog-sec .search-blog .srch-bttn:hover {
  background: #145391;
}

.blog-sec .pplr-blg li {
  margin-bottom: 30px;
}

.blog-sec .pplr-blg li a:hover > p {
  color: #1e73c7;
}

.blog-sec .pplr-blg li:last-child {
  margin-bottom: 0px;
}

.blog-sec .pplr-blg li img {
  margin-right: 20px;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.blog-sec .pplr-blg li img:hover {
  opacity: 0.5;
}

.blog-sec .pplr-blg li p {
  color: #7d7d7d;
}

.blog-sec .categories li {
  margin-bottom: 10px;
}

.blog-sec .categories li a:hover {
  color: #1e73c7;
}

.blog-sec .categories li i {
  margin-right: 10px;
}

.blog-sec .categories li:last-child {
  margin-bottom: 0px;
}

.blog-sec .categories li a {
  color: #7d7d7d;
}

.blog-sec .tags li {
  background: #1e73c7;
  text-align: center;
  padding: 5px 15px;
  display: inline-block;
  color: #fff;
  margin: 0 5px 10px 0;
}

/* ==========================================================================
   12.0 contact-page Styling
   ========================================================================== */
.contact-sec {
  padding: 100px 0;
}

.contact-sec .cntct-heading {
  color: #1e1d2b;
  font-size: 24px;
  font-weight: 700;
  font-family: "open-sans";
  padding: 0 0 40px 0;
}

.contact-sec .form-group {
  margin-bottom: 20px;
}

.contact-sec .form-group:last-child {
  margin-bottom: 0;
}

.contact-sec .form-group label {
  font-family: "open-sans";
  color: #959595;
  font-weight: 400;
}

.contact-sec .form-group .btn {
  padding: 10px 40px;
  border-radius: 0px;
  background: #1e73c7;
  font-family: "arimo";
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  border: none;
  margin-top: 20px;
}

.contact-sec .form-group .form-control {
  border-radius: 0px;
  line-height: 1;
  height: 40px;
  color: #7d7d7d;
  box-shadow: 0 0 0 transparent;
}

.contact-sec .form-group textarea.form-control {
  height: 90px;
}

.contact-sec .contact-des {
  color: #959595;
}

.contact-sec .contact-des li {
  margin-bottom: 10px;
}

.contact-sec .contact-des li i {
  margin-right: 10px;
}

.contact-sec .contact-des li:last-child span {
  display: inline-block;
}

.contact-sec .social a {
  color: #fff;
  background: #1e73c7;
  line-height: 28px;
  border: 1px solid #fff;
  display: inline-block;
  height: 30px;
  width: 30px;
  margin-top: 20px;
  margin-right: 5px;
  text-align: center;
}

.contact-sec .social a:hover {
  background: #145391;
}

/* ==========================================================================
   13.0 footer Styling
   ========================================================================== */
.footer-wrapper {
  background: #191c30;
  padding: 70px 0;
  color: #fff;
}

.footer-wrapper .col-heading {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 20px;
}

.footer-wrapper a {
  color: #fff;
}

.footer-wrapper a:hover {
  color: #1e73c7;
}

.footer-wrapper .contact-col li {
  margin-bottom: 10px;
}

.footer-wrapper .contact-col li i {
  margin-right: 10px;
  margin-top: 4px;
}

.footer-wrapper .contact-col li:last-child i {
  display: block;
}

.footer-wrapper .contact-col li:last-child span {
  display: inline-block;
  margin-left: -10px;
  margin-left: 5px;
}

.footer-wrapper .quick-links {
  padding-left: 30px;
}

.footer-wrapper .quick-links li {
  margin-bottom: 10px;
}

.footer-wrapper .news li {
  margin-bottom: 25px;
  overflow: hidden;
}

.footer-wrapper .news li:first-child {
  margin-bottom: 10px;
}

.footer-wrapper .news li:last-child {
  margin-bottom: 0px;
}

.footer-wrapper .news li .date {
  color: #fff;
  font-size: 16px;
  padding-top: 6px;
  font-weight: 300;
  height: 60px;
  width: 60px;
  background: #1e73c7;
  text-align: center;
  margin-right: 10px;
}

.footer-wrapper .news li .news-text {
  color: #fff;
}

.footer-wrapper .news li .news-text h4 {
  font-family: "open-sans";
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 5px;
}

.footer-wrapper .subscribe .form-group {
  float: left;
  width: 100%;
  margin-top: 20px;
}

.footer-wrapper .subscribe .form-group .form-control {
  width: 260px;
  background: transparent;
  border-radius: 0px;
  height: 40px;
  color: #fff;
}

.footer-wrapper .subscribe .form-group .btn {
  border-radius: 0px;
  width: 100px;
  height: 40px;
  font-weight: 700;
  text-transform: uppercase;
  float: right;
}

.footer-wrapper .subscribe .social {
  float: left;
  width: 100%;
}

.footer-wrapper .subscribe .social a {
  color: #fff;
  line-height: 28px;
  border: 1px solid #fff;
  display: inline-block;
  height: 30px;
  width: 30px;
  margin-top: 20px;
  margin-right: 5px;
  text-align: center;
}

.footer-wrapper .subscribe .social a:hover {
  background: #fff;
  color: #191c30;
}

/* ==========================================================================
   14.0 copyright Styling
   ========================================================================== */
.copyright {
  background: #14182b;
  text-align: center;
  color: #fff;
  padding: 25px 0;
}

#map {
  display: block;
  width: 100% !important;
  height: 500px !important;
  pointer-events: none;
  background: #58b;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 10000;
  /* makes sure it stays on top */
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(../image/loading.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}

/* ==========================================================================
   15.0 Media query
   ========================================================================== */
/* Large Devices, Wide Screens */
@media only screen and (max-width: 1200px) {
  .navbar-custom .masthead {
    font-size: 12px;
  }

  .navbar-custom .masthead .contact .contact-li {
    margin-right: 8px;
  }

  .navbar-custom .masthead .contact i {
    margin-right: 5px;
  }

  .banner-content.carousel-fade
    .tab-box
    .custom-tab
    .nav-tabs.carousel-indicators
    li {
    padding: 10px 13px 0 13px;
    font-size: 11px;
  }

  .banner-content.carousel-fade
    .tab-box
    .custom-tab
    .nav-tabs.carousel-indicators
    li
    a
    img {
    height: 20.5px;
  }

  .call-action .btn {
    width: 230px;
  }

  .footer-wrapper {
    font-size: 12px;
  }

  .about-us .section-text .focus-text {
    font-size: 52px;
  }
}

@media only screen and (min-width: 993px) and (max-width: 1199px) {
  .footer-wrapper .contact-col {
    font-size: 11px;
    line-height: 18px;
  }

  .navbar-custom .navbar-brand {
    padding: 41px 20px;
  }

  .navbar-custom.affix .navbar-brand {
    padding: 18px 20px;
  }

  .navbar-custom .bottom-bar .office .nice-select {
    font-size: 11px;
  }

  .about-us .img-wrapper img.img-left {
    top: 30px;
  }

  .statistics .content-warpper .stat-col i {
    font-size: 45px;
  }

  .statistics .content-warpper .stat-col .text-wrapper p {
    font-size: 14px;
  }

  .footer-wrapper .subscribe .form-group .form-control {
    width: 190px;
  }

  .quo-tstmnail .testimonial .carousel-inner .item .testimonial-section {
    font-size: 16px;
    padding: 16px 35px 50px 35px;
  }
}

/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
  .res-pad-o {
    padding: 0px;
  }

  .res-m-bttm {
    margin-bottom: 25px;
  }

  .res-m-bttm.contact-des {
    margin-bottom: 0;
  }

  .res-m-bttm ul.blog:last-child {
    margin-bottom: 50px;
  }

  .section-heading {
    padding-bottom: 15px;
  }

  .navbar-custom .navbar-brand {
    padding: 44px 15px;
  }

  .navbar-custom.affix .navbar-brand {
    height: 60px;
    padding: 21px 15px;
  }

  .banner-content.carousel-fade .tab-box {
    top: 230px;
  }

  .banner-content.carousel-fade .custom-tab {
    margin-bottom: 110px;
  }

  .banner-content.carousel-fade .tracking {
    padding: 50px 0;
  }

  .navbar-custom .bottom-bar .nav {
    margin-left: 20px;
  }

  .navbar-custom .bottom-bar .nav li a {
    font-size: 12px;
  }

  .office .dropdown .dropbtn {
    padding: 0px;
  }

  .banner-content.carousel-fade .tracking .tracking-form {
    margin-top: 15px;
    margin-bottom: 5px;
  }

  .banner-content .tracking .tracking-form .form-group {
    margin-bottom: 10px;
  }

  .section-text.npl {
    padding-right: 0;
  }

  .section-text.npl + .npr {
    margin-top: 35px;
  }

  .about-us {
    padding: 50px 0;
  }

  .about-us .img-wrapper {
    margin-top: 25px;
  }

  .about-us .img-wrapper img.img-right {
    width: 100%;
  }

  .about-us.a-page-abt .section-row:first-child {
    margin-bottom: 35px;
  }

  .about-us.a-page-abt .section-text ul.spe-list li {
    margin-bottom: 10px;
  }

  .statistics .stat-col {
    padding-left: 0px;
  }

  .service {
    padding: 50px 0;
  }

  .service.ser-p-ser .section-row {
    margin-bottom: 35px;
  }

  .service.ser-p-ser .section-row:last-child .section-text p:last-child {
    padding-bottom: 0;
  }

  .quo-tstmnail {
    padding: 50px 0;
  }

  .call-action {
    padding: 50px 0;
  }

  .blog-sec {
    padding: 50px 0;
  }

  .blog-sec .blog li {
    margin-bottom: 35px;
  }

  .blog-sec .blog li .blog-text a:last-child {
    padding-top: 0;
  }

  .blog-sec .rb-heading {
    padding: 35px 0 20px;
  }

  .contact-sec {
    padding: 50px 0;
  }

  .contact-sec .left-side-col {
    margin-bottom: 45px;
  }

  .contact-sec .cntct-heading {
    padding-bottom: 25px;
  }

  .call-action .btn {
    float: left !important;
    margin-bottom: 5px;
  }

  .quo-tstmnail .testimonial .carousel-inner .item .testimonial-section {
    font-size: 13px;
    line-height: 20px;
    padding: 5px 16px 20px 20px;
  }

  .cl-logo {
    padding: 50px 0px;
  }

  .subscribe {
    padding-left: 30px;
  }

  .navbar-custom .bottom-bar .search.dropdown .dropbtn {
    width: 58px;
    height: 58px;
  }

  .navbar-custom .bottom-bar .office .nice-select {
    font-size: 12px;
  }

  .banner-content .tracking .tracking-form .form-group {
    width: 60%;
    float: left;
    margin-bottom: 0px;
    margin-right: 5px;
  }

  .banner-content.carousel-fade .tracking .tracking-form .btn {
    width: 30%;
  }

  .footer-wrapper .subscribe .form-group .form-control {
    width: 185px;
  }

  .right-side-col.col-md-4 {
    padding-left: 0;
    padding-right: 0;
  }

  .left-side-col.col-md-8,
  .left-side-col.col-md-7 {
    padding-left: 0;
    padding-right: 0;
  }

  .footer-wrapper {
    padding: 50px 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .container {
    width: 720px;
  }

  .statistics {
    padding: 50px 0 25px;
  }

  .statistics .stat-col:nth-child(2n) {
    padding-left: 30px;
    padding-right: 0;
  }

  .section-text.res-xs-pad-0 {
    padding-left: 0;
  }

  .service-row .section-text.res-m-bm-xs {
    margin-bottom: 40px;
  }

  .service-row .res-pad-o:last-child {
    padding-left: 30px;
  }

  .service-row .res-pad-o:first-child {
    padding-right: 15px;
  }

  .footer-wrapper .quick-links li:first-child h4,
  .footer-wrapper .contact-col li:first-child h4,
  .footer-wrapper .news li:first-child h4 {
    padding-bottom: 15px;
  }

  .footer-wrapper .subscribe .form-group .form-control {
    width: 220px;
  }
}

/* Small Devices, Tablets */
@media only screen and (max-width: 767px) {
  body {
    font-size: 12px;
    line-height: 18px;
  }

  .res-m-bm-xs {
    margin-bottom: 40px;
  }

  .res-xs-pad-0 {
    padding: 0px;
  }

  .container {
    margin: 0 30px;
  }

  .about-us .section-text .focus-text {
    font-size: 30px;
  }

  .section-heading {
    font-size: 18px;
  }

  .navbar-custom .navbar-toggle {
    padding: 8px 0px;
  }

  .navbar-custom .navbar-toggle:hover {
    background: transparent;
  }

  .navbar-custom .navbar-toggle:focus {
    background-color: transparent;
    color: #1e73c7;
  }

  .navbar-custom {
    background: #101327;
  }

  .navbar-custom .navbar-collapse {
    width: 100%;
  }

  .navbar-custom.affix .navbar-brand,
  .navbar-custom .navbar-brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 152px;
    height: 56px;
    padding: 17px 15px;
    box-sizing: border-box;
  }

  .navbar-custom .bottom-bar .nav {
    margin-left: 0px;
  }

  .navbar-custom .bottom-bar .nav li.active a {
    border-bottom: 0px;
    color: #1e73c7;
  }

  .navbar-custom .bottom-bar .nav li a {
    text-align: center;
  }

  .navbar-custom .bottom-bar .nav li a:hover {
    border-bottom: 0px;
    color: #1e73c7;
  }

  .navbar-toggle {
    border: none;
    border-radius: 0px;
    color: #fff;
    font-size: 24px;
    margin-right: 0px;
  }

  .navbar-collapse.in {
    overflow-y: visible;
  }

  .navbar-custom .bottom-bar .search.dropdown {
    display: block;
    float: none;
  }

  .navbar-custom .bottom-bar .search.dropdown .dropbtn {
    width: 100%;
    text-align: center;
  }

  .navbar-custom .bottom-bar .search.dropdown .dropdown-content {
    display: none;
    position: absolute;
    right: 0px;
    width: 100%;
    height: 50px;
  }

  .banner-content.carousel-fade .tab-box {
    top: 260px;
  }

  .banner-content.carousel-fade .tab-box .custom-tab .tracking h3 {
    font-size: 24px;
  }

  .banner-content.carousel-fade
    .tab-box
    .custom-tab
    .nav-tabs.carousel-indicators {
    padding: 0 15px;
  }

  .banner-content.carousel-fade
    .tab-box
    .custom-tab
    .nav-tabs.carousel-indicators
    li {
    padding: 10px 8px 0;
  }

  .banner-content.carousel-fade .tracking .tracking-form .btn {
    font-size: 15px;
  }

  .statistics {
    padding: 50px 0;
  }

  .service .service-row {
    margin-bottom: 25px;
  }

  .service .service-row .res-m-bm-xs {
    margin-bottom: 25px;
  }

  .service .service-row .text-wrapper h5 {
    font-size: 14px;
  }

  .quo-tstmnail::after {
    content: "";
    position: absolute;
    right: 0%;
    top: 0px;
    width: 0%;
    height: 0%;
    padding-left: 25px;
    background: url("../image/testimonial-bg.jpg");
    background-position: center center;
    background-size: cover;
  }

  .quo-tstmnail .testimonial {
    padding-left: 0px;
  }

  .quo-tstmnail .quote,
  .quo-tstmnail .testimonial {
    padding-right: 0px;
  }

  .banner-content.carousel-fade {
    height: 600px;
  }

  .banner-content.carousel-fade .tracking {
    background: #191c30;
  }

  .banner-content.carousel-fade .tracking h3 {
    font-size: 24px;
  }

  .banner-content .carousel-fade .custom-tab .tab-content {
    background-color: rgba(25, 28, 48, 0.5);
  }

  .banner-content .carousel-fade .custom-tab .nav-tabs {
    padding: 0 10px 0 10px;
  }

  .banner-content .carousel-fade .custom-tab .nav-tabs li {
    padding: 10px 10px 0 10px;
    font-size: 8px;
  }

  .navbar-custom .bottom-bar .nav li a {
    font-size: 14px;
    padding: 15px 0;
  }

  .call-action h3 {
    font-size: 24px;
  }

  .footer-wrapper .quick-links,
  .footer-wrapper .contact-col,
  .footer-wrapper .news {
    padding-left: 0px;
    margin-bottom: 40px;
  }

  .footer-wrapper .quick-links li:last-child,
  .footer-wrapper .contact-col li:last-child,
  .footer-wrapper .news li:last-child {
    margin-bottom: 0;
  }

  .footer-wrapper .quick-links li:first-child h4,
  .footer-wrapper .contact-col li:first-child h4,
  .footer-wrapper .news li:first-child h4 {
    padding-bottom: 10px;
  }

  .footer-wrapper .subscribe .form-group .form-control {
    width: 100%;
  }

  .footer-wrapper .subscribe .form-group .btn {
    float: none;
    margin-top: 15px;
  }

  .quo-tstmnail .testimonial .carousel-inner .item .testimonial-section {
    background: none;
    padding: 0px;
  }

  .quo-tstmnail {
    padding: 50px 0;
  }

  #in_pge_banner.banner-content {
    height: 185px;
  }

  #in_pge_banner.banner-content .header-text {
    padding-top: 90px;
  }

  #in_pge_banner.banner-content .header-text h4.page-title {
    font-size: 26px;
    padding-bottom: 0px;
  }

  .banner-content.carousel-fade
    .tab-box
    .custom-tab
    .nav-tabs.carousel-indicators
    li {
    width: 23%;
  }

  .right-side-col .widget:last-child .tags {
    margin-bottom: -10px;
  }

  #map {
    height: 300px !important;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .quo-tstmnail .testimonial .carousel-inner .item .testimonial-section {
    background: none;
    padding: 0px;
  }

  .banner-content.carousel-fade .custom-tab {
    width: 70%;
  }

  .banner-content.carousel-fade .tracking .tracking-form .btn {
    width: 30%;
  }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
  .container {
    margin: 0 20px;
  }

  .blog-sec .blog li {
    position: relative;
  }

  .blog-sec .blog li .date {
    position: absolute;
    height: 70px;
    width: 70px;
    line-height: 15px;
    padding-top: 16px;
    margin-top: -100px;
  }

  .banner-content.carousel-fade
    .tab-box
    .custom-tab
    .nav-tabs.carousel-indicators
    li
    a {
    min-height: 64px;
  }
}

/* Custom, iPhone Retina */
@media only screen and (max-width: 360px) {
  .footer-wrapper .news li .date {
    padding-top: 4px;
    height: 55px;
    width: 55px;
  }

  .banner-content.carousel-fade .tracking .tracking-form .btn {
    width: 35%;
  }

  .banner-content.carousel-fade
    .tab-box
    .custom-tab
    .nav-tabs.carousel-indicators
    li
    a {
    padding: 0 3px 10px 3px;
  }
}

.amn-hero-v2-photo .carousel-control {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);

  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0.8;
}

.amn-hero-v2-photo .carousel-control i {
  font-size: 32px;
}

.amn-hero-v2-photo .carousel-control.left {
  left: 10px;
}

.amn-hero-v2-photo .carousel-control.right {
  right: 10px;
}

/* =========================================================
   AMAMUS — Page "Notre Équipe"
   Réutilise la palette officielle. Autonome (variables redéfinies).
   Police : cf. commentaire dans activities-redesign.css about-section 
   ========================================================= */

:root {
  --amamus-pink: #d6336c;
  --amamus-pink-light: #ec4899;
  --amamus-blue: #1e73c7;
  --amamus-blue-dark: #123e82;
  --amamus-navy: #14182b;

  --amn-paper: #f7f8fa;
  --amn-paper-alt: #eef2f7;
  --amn-ink: var(--amamus-navy);
  --amn-ink-soft: #545e70;
  --amn-line: #dde4ed;

  --amn-font-display: "Newsreader", Georgia, serif;
  --amn-font-body: "Public Sans", -apple-system, Segoe UI, Arial, sans-serif;
}

.amn-section-head {
  max-width: 640px;
  margin: 0 0 40px;
}
.amn-section-head h2 {
  font-family: var(--amn-font-display);
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--amn-ink);
  margin: 0 0 8px;
}
.amn-section-head p {
  font-family: var(--amn-font-body);
  color: var(--amn-ink-soft);
  font-size: 1rem;
  margin: 0;
}

/* ---------- 1) Direction Générale ---------- */
.amn-team-dg {
  background: var(--amn-paper);
  padding: 76px 0 50px;
}
.amn-dg-card {
  display: grid;
  grid-template-columns: 340px 1fr;
  border: 1px solid var(--amn-line);
  background: #fff;
}
.amn-dg-photo {
  aspect-ratio: 3/3;
  background: var(--amn-paper-alt);
  border-right: 1px solid var(--amn-line);
  overflow: hidden;
}
.amn-dg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.amn-dg-body {
  padding: 34px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.amn-dg-body .amn-dg-role {
  font-family: var(--amn-font-body);
  color: var(--amamus-blue);
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0 0 6px;
}
.amn-dg-body h3 {
  font-family: var(--amn-font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--amn-ink);
  margin: 0 0 4px;
}
.amn-dg-body .amn-dg-subrole {
  font-family: var(--amn-font-body);
  font-size: 0.92rem;
  color: var(--amn-ink-soft);
  margin: 0 0 18px;
}

.amn-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.amn-contact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--amn-font-body);
  font-size: 0.92rem;
  color: var(--amn-ink);
}
.amn-contact-list i {
  color: var(--amamus-pink);
  width: 16px;
  text-align: center;
}
.amn-contact-list a {
  color: var(--amn-ink);
  text-decoration: none;
}
.amn-contact-list a:hover {
  color: var(--amamus-blue);
  text-decoration: underline;
}

@media (max-width: 700px) {
  .amn-dg-card {
    grid-template-columns: 1fr;
  }
  .amn-dg-photo {
    aspect-ratio: 16/10;
    border-right: none;
    border-bottom: 1px solid var(--amn-line);
  }
  .amn-dg-body {
    padding: 26px;
  }
}

/* ---------- 2) Comité de direction — cartes avec photo (réduite) ---------- */
.amn-team-members {
  background: var(--amn-paper);
  padding: 10px 0 60px;
}
.amn-member-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.amn-member-card {
  --accent: var(--amamus-blue-dark);
  background: #fff;
  border: 1px solid var(--amn-line);
  border-top: 4px solid var(--accent);
  overflow: hidden;
}
.amn-member-card.c-pink {
  --accent: var(--amamus-pink);
}

/* photo réduite : 3/2 au lieu de 4/3, et plafonnée en hauteur */
.amn-member-photo {
  aspect-ratio: 3/2;
  max-height: 375px;
  background: var(--amn-paper-alt);
  overflow: hidden;
}
.amn-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.amn-member-body {
  padding: 20px 22px;
}
.amn-member-body h4 {
  font-family: var(--amn-font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--amn-ink);
  margin: 0 0 3px;
}
.amn-member-body .amn-member-role {
  font-family: var(--amn-font-body);
  font-size: 0.86rem;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 2px;
}
.amn-member-body .amn-member-subrole {
  font-family: var(--amn-font-body);
  font-size: 0.83rem;
  color: var(--amn-ink-soft);
  margin: 0 0 12px;
}

@media (max-width: 700px) {
  .amn-member-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 3) Autres niveaux organisationnels — cartes compactes (sans photo) ---------- */
.amn-team-levels {
  background: var(--amn-paper-alt);
  padding: 60px 0 70px;
}
.amn-direction-block {
  margin-bottom: 44px;
}
.amn-direction-block:last-child {
  margin-bottom: 0;
}
.amn-direction-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--amn-line);
}
.amn-direction-title h3 {
  font-family: var(--amn-font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--amn-ink);
  margin: 0;
}
.amn-direction-title span {
  font-family: var(--amn-font-body);
  font-size: 0.85rem;
  color: var(--amn-ink-soft);
}

.amn-org-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.amn-org-card {
  --accent: var(--amamus-blue-dark);
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--amn-line);
  border-left: 3px solid var(--accent);
  padding: 16px 18px;
}
.amn-org-card.c-pink {
  --accent: var(--amamus-pink);
}
.amn-org-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--amn-paper-alt);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--amn-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  flex: none;
}
.amn-org-info h4 {
  font-family: var(--amn-font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--amn-ink);
  margin: 0 0 2px;
}
.amn-org-info p {
  font-family: var(--amn-font-body);
  font-size: 0.8rem;
  color: var(--amn-ink-soft);
  margin: 0;
}

@media (max-width: 980px) {
  .amn-org-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .amn-org-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   AMAMUS — PAGE À PROPOS
   ============================================================ */

.about-page {
  background: #ffffff;
  color: #26352f;
}

/* ============================================================
   HERO
   ============================================================ */

.about-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;

  background:
    linear-gradient(110deg, rgba(20, 83, 62, 0.96), rgba(27, 119, 82, 0.88)),
    url("../image/ab-left-img.png") center center / cover no-repeat;

  color: #ffffff;
  overflow: hidden;
}

.about-hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;

  right: -180px;
  bottom: -220px;

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

.about-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.about-hero-label {
  display: inline-block;
  margin-bottom: 18px;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.75);
}

.about-hero h1 {
  margin: 0 0 20px;

  font-size: 52px;
  line-height: 1.15;
  font-weight: 700;

  color: #ffffff;
}

.about-breadcrumb {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   SECTIONS
   ============================================================ */

.about-section {
  padding: 50px 0;
}

.about-who-section {
  background: #ffffff;
}

.about-missions-section {
  background: #f5f8f6;
}

.about-history-section {
  background: #ffffff;
}

.about-organisation-section {
  background: #f5f8f6;
}

.about-organigramme-section {
  background: #fff;
}

.about-microprogramme-section {
  background: #ffffff;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */

.about-section-header {
  max-width: 760px;
  margin: 0 auto 55px;

  text-align: center;
}

.about-section-label {
  display: inline-block;
  margin-bottom: 12px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;

  color: #1e73c7;
}

.about-section-header h2 {
  margin: 0;

  font-size: 38px;
  line-height: 1.25;
  font-weight: 700;

  color: #17382c;
}

/* ============================================================
   CONTENT
   ============================================================ */

.about-content {
  padding: 20px 0;
}

.about-content h2 {
  margin: 0 0 20px;

  font-size: 38px;
  line-height: 1.25;
  font-weight: 700;

  color: #1e73c7;
}

.about-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  text-align: justify;
  color: #000;
}

.about-content-divider {
  width: 55px;
  height: 3px;

  margin-bottom: 25px;

  background: #198754;
  border-radius: 10px;
}

/* ============================================================
   IMAGES
   ============================================================ */

.about-image-frame {
  position: relative;

  padding: 18px;
  margin-right: 25px;
}

.about-history-image {
  margin-right: 0;
  margin-left: 25px;
}

.about-image-decoration {
  position: absolute;

  top: 0;
  left: 0;

  width: 75%;
  height: 75%;

  border-radius: 22px;

  background: #e6f1ec;
}

.about-main-image {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;
  height: auto;

  border-radius: 18px;

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   ATTRIBUTIONS
   ============================================================ */

.about-missions-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.about-missions-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.about-missions-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.about-mission-card {
  position: relative;

  display: flex;
  gap: 25px;

  min-height: 170px;

  padding: 30px;

  background: #ffffff;

  border: 1px solid #e7eeea;
  border-radius: 16px;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.about-mission-card:hover {
  transform: translateY(-5px);

  border-color: #cfe3d9;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.about-mission-number {
  flex: 0 0 48px;

  font-size: 18px;
  line-height: 1;

  font-weight: 700;

  color: #198754;
}

.about-mission-content p {
  margin: 0;

  font-size: 17px;
  line-height: 1.75;

  color: #000;
}

/* ============================================================
   ORGANISATION
   ============================================================ */

.about-organisation-card {
  height: 100%;

  padding: 40px 30px;

  background: #ffffff;

  border: 1px solid #e7eeea;
  border-radius: 18px;

text-align: center;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.about-organisation-card:hover {
  transform: translateY(-7px);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.about-organisation-icon {
  width: 70px;
  height: 70px;

  margin: 0 auto 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #e7f3ed;

  color: #1e73c7;

  font-size: 25px;
}

.about-organisation-card h3 {
  margin: 0 0 15px;

  font-size: 18px;
  font-weight: 700;

  color: #17382c;
}

.about-organisation-card p {
  margin: 0;

  font-size: 15px;
  line-height: 1.8;

  color: #66756f;
}
.about-organigramme-card p {
  margin: 0;

  font-size: 15px;
  line-height: 1.8;
  text-align: justify;

  color: #66756f;
}

/* ============================================================
   MICROPROGRAMME
   ============================================================ */

.microprogramme-wrapper {
  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.15fr);

  gap: 60px;

  align-items: start;
}

.microprogramme-image {
  position: sticky;
  top: 30px;
}

.microprogramme-image img {
  display: block;

  width: 100%;
  height: 520px;

  object-fit: cover;

  border-radius: 20px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.microprogramme-content {
  padding-top: 5px;
}

.microprogramme-content p {
  margin: 0 0 2px;

  padding-bottom: 2px;

  font-size: 16px;
  line-height: 1.9;

  color: #000;
}

.microprogramme-content p:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

/* ============================================================
   CTA
   ============================================================ */

.about-cta-section {
  padding: 20px 0;

  background: linear-gradient(
    120deg,
    var(--amamus-blue-dark) 0%,
    var(--amamus-navy) 100%
  );
}

.about-cta {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 40px;
}

.about-cta-content {
  max-width: 700px;
}

.about-cta-label {
  display: inline-block;

  margin-bottom: 12px;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 2px;
  text-transform: uppercase;

  color: #8bd5b5;
}

.about-cta h2 {
  margin: 0 0 15px;

  font-size: 34px;
  line-height: 1.25;

  color: #ffffff;
}

.about-cta p {
  margin: 0;

  font-size: 16px;
  line-height: 1.7;

  color: rgba(255, 255, 255, 0.72);
}

.about-cta-action {
  flex-shrink: 0;
}

.about-cta-button {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 15px 25px;

  border-radius: 6px;

  background: #ffffff;

  color: #17382c;

  font-size: 13px;
  font-weight: 700;

  text-decoration: none;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.about-cta-button:hover {
  transform: translateY(-3px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

  color: #17382c;
}

.about-cta-button i {
  font-size: 12px;
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 991px) {
  .about-hero {
    min-height: 300px;
  }

  .about-hero h1 {
    font-size: 42px;
  }

  .about-section {
    padding: 75px 0;
  }

  .about-content {
    margin-top: 35px;
  }

  .about-history-image {
    margin-left: 0;
    margin-top: 35px;
  }

  .microprogramme-wrapper {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .microprogramme-image {
    position: relative;
    top: auto;
  }

  .microprogramme-image img {
    height: 420px;
  }

  .about-cta {
    align-items: flex-start;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 767px) {
  .about-missions-grid-2,
  .about-missions-grid-3 {
    grid-template-columns: 1fr;
  }
  .about-hero {
    min-height: 260px;
    padding: 60px 0;
  }

  .about-hero h1 {
    font-size: 34px;
  }

  .about-section {
    padding: 60px 0;
  }

  .about-section-header {
    margin-bottom: 35px;
  }

  .about-section-header h2,
  .about-content h2 {
    font-size: 30px;
  }

  .about-missions-grid {
    grid-template-columns: 1fr;
  }

  .about-mission-card {
    min-height: auto;
    padding: 25px;
  }

  .about-image-frame {
    margin-right: 0;
  }

  .about-image-decoration {
    width: 65%;
    height: 65%;
  }

  .about-organisation-card {
    margin-bottom: 20px;
  }

  .microprogramme-image img {
    height: 320px;
  }

  .about-cta {
    flex-direction: column;
  }

  .about-cta h2 {
    font-size: 28px;
  }
}

/* ============================================================
   RESPONSIVE — PETITS ÉCRANS
   ============================================================ */

@media (max-width: 480px) {
  .about-hero h1 {
    font-size: 30px;
  }

  .about-hero {
    min-height: 230px;
  }

  .about-section {
    padding: 50px 0;
  }

  .about-mission-card {
    gap: 15px;
    padding: 22px;
  }

  .about-mission-number {
    flex-basis: 35px;
  }

  .microprogramme-image img {
    height: 260px;
  }

  .about-cta-section {
    padding: 55px 0;
  }
}

/* =========================================================
   ORGANISATION / EQUIPE
   ========================================================= */

.amn-organisation-section {
    padding: 45px 0 80px;
    background: #fff;
}

.amn-organisation-title {
    text-align: center;
    color: #1a63ab;
    margin-bottom: 28px;
}

/* =========================================================
   DIRECTEUR GENERAL
   ========================================================= */

.amn-dg-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 45px;
}

.amn-dg-card {
    width: 380px;
    max-width: 100%;
}


/* =========================================================
   CORRECTION CARTES PERSONNES
   ========================================================= */

.amn-person-card {
    display: block !important;
    width: 100%;
    box-sizing: border-box;

    background: #fff;
    border: 1px solid #e2e6ea;
    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* Carte du Directeur Général */

.amn-dg-card {
    display: block !important;

    width: 380px;
    max-width: 100%;

    margin: 0 auto;
}


/* =========================================================
   IMAGE
   ========================================================= */

.amn-person-card .amn-person-photo {
    display: block !important;

    width: 100% !important;
    height: 230px !important;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #f1f3f5;
}


.amn-person-card .amn-person-photo img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    margin: 0;
    padding: 0;

    object-fit: cover;
}


/* =========================================================
   CONTENU SOUS L'IMAGE
   ========================================================= */

.amn-person-card .amn-person-content {
    display: block !important;
    width: 100% !important;
    margin: 0;
    padding: 20px 22px 22px;

    box-sizing: border-box;
}


/* =========================================================
   NOM
   ========================================================= */

.amn-person-card .amn-person-name {
    display: block;

    margin: 0 0 8px;

    color: var(--amamus-navy);

    font-size: 20px;
    line-height: 1.35;

    font-weight: 800;
}


/* =========================================================
   FONCTION
   ========================================================= */

.amn-person-card .amn-person-role {
    display: block;

    margin-bottom: 8px;

    color: var(--amamus-blue);

    font-size: 16px;
    line-height: 1.4;

    font-weight: 700;
}


/* =========================================================
   SOUS-FONCTION
   ========================================================= */

.amn-person-card .amn-person-subrole {
    display: block;

    margin-bottom: 15px;

    color: #777;

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   CONTACT
   ========================================================= */

.amn-person-card .amn-person-contact {
    display: block;

    width: 100%;

    padding-top: 10px;

    border-top: 1px solid #edf0f3;
}


.amn-person-card .amn-contact-line {
    display: flex !important;
    align-items: center;

    width: 100%;

    margin-top: 8px;

    color: #666;

    font-size: 13px;
}


.amn-person-card .amn-contact-line i {
    flex: 0 0 22px;

    width: 22px;

    margin-right: 7px;

    color: var(--amamus-blue);
}


/* =========================================================
   GRILLE DU COMITE
   ========================================================= */

.amn-person-grid {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;

    width: 100%;

    margin: 0 auto 55px;
    box-shadow: inset;

    transition: 0.5ms ease;
}

.amn-person-grid2 {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;

    width: 100%;

    margin: 0 auto 55px;
    box-shadow: inset;

    transition: 0.5ms ease;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991px) {

    .amn-person-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .amn-person-grid2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 767px) {

    .amn-dg-card {
        width: 100%;
    }

    .amn-person-grid {
        grid-template-columns: 1fr;
    }

    .amn-person-grid2 {
        grid-template-columns: 1fr;
    }

    .amn-person-card .amn-person-photo {
        height: 230px !important;
    }

}


/* ==================================================
   AMAMUS — MOT DU DIRECTEUR GÉNÉRAL
   Design institutionnel, élégant et responsive
================================================== */

.about-director-section {
    position: relative;
    padding: 90px 0;
    background: #f7f9fc;
    overflow: hidden;
    isolation: isolate;
}

/* Décoration discrète du fond */
.about-director-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(23, 54, 93, 0.07);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(23, 54, 93, 0.025),
        0 0 0 70px rgba(23, 54, 93, 0.02);
    pointer-events: none;
}

/* ==========================
   CONTENU DU MESSAGE
========================== */

.about-director-content {
    position: relative;
    padding: 10px 35px 10px 0;
}

/* Petit label institutionnel */
.about-director-content .about-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--amamus-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.about-director-content .about-section-label::before {
    content: "";
    display: inline-block;
    width: 27px;
    height: 3px;
    border-radius: 3px;
    background: var(--amamus-pink);
}

/* Titre principal */
.about-director-content h2 {
    max-width: 620px;
    margin: 0 0 22px;
    color: var(--amamus-navy);
    font-size: clamp(29px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.7px;
}

/* Soulignement décoratif */
.about-director-content .about-content-divider {
    width: 70px;
    height: 4px;
    margin: 0 0 30px;
    border-radius: 4px;
    background: var(--amamus-pink);
}

/* ==========================
   PARAGRAPHES
========================== */

.director-message {
    color: #465163;
}

.director-message p {
    margin: 0 0 21px;
    color: #000;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;
    text-align: left;
    overflow-wrap: anywhere;
}

/* Formule d'ouverture */
.director-message .director-greeting {
    margin-bottom: 24px;
    color: var(--amamus-navy);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.6;
}

/* Citation réglementaire si le paragraphe
   correspondant reçoit cette classe */
.director-message .director-quote {
    margin: 28px 0;
    padding: 20px 24px;
    border-left: 4px solid var(--amamus-pink);
    border-radius: 0 8px 8px 0;
    background: #fff;
    color: var(--amamus-navy);
    font-size: 15px;
    font-style: italic;
    line-height: 1.85;
    box-shadow: 0 5px 20px rgba(20, 39, 70, 0.045);
}

/* ==========================
   SIGNATURE DU DIRECTEUR
========================== */

.director-signature {
    position: relative;
    margin-top: 34px;
    padding: 23px 0 0;
    border-top: 1px solid #e0e6ee;
}

.director-signature-line {
    display: block;
    width: 48px;
    height: 3px;
    margin-bottom: 14px;
    border-radius: 3px;
    background: var(--amamus-pink);
}

.director-signature .director-name {
    margin: 0 0 6px;
    color: var(--amamus-navy);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
}

.director-signature .director-role {
    margin: 0;
    color: #697587;
    font-size: 13px;
    line-height: 1.7;
}

/* ==========================
   PHOTO DU DIRECTEUR
========================== */

.director-image-frame {
    position: relative;
    max-width: 470px;
    margin: 20px 0 35px auto;
    padding: 0 16px 24px 0;
}

/* Cadre rose décalé */
.director-image-frame .about-image-decoration {
    position: absolute;
    z-index: -1;
    top: 22px;
    right: 0;
    bottom: 0;
    left: 32px;
    border: 3px solid var(--amamus-pink);
    border-radius: 10px;
    pointer-events: none;
}

/* Image */
.director-image-frame .about-main-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-height: 600px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 9px;
    background: #e9edf3;
    box-shadow: 0 18px 42px rgba(20, 39, 70, 0.14);
}

/* Cartouche de présentation */
.director-image-caption {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: calc(100% - 36px);
    margin: -38px auto 0;
    padding: 19px 22px;
    border-left: 4px solid var(--amamus-pink);
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 39, 70, 0.11);
}

.director-caption-name {
    color: var(--amamus-navy);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
}

.director-caption-role {
    color: #687386;
    font-size: 13px;
    line-height: 1.6;
}

/* ==========================
   TABLETTES
========================== */

@media (max-width: 991px) {
    .about-director-section {
        padding: 65px 0;
    }

    .about-director-content {
        padding: 0;
    }

    .about-director-content h2 {
        font-size: clamp(28px, 4vw, 36px);
    }

    .director-image-frame {
        max-width: 500px;
        margin: 45px auto 25px;
    }
}

/* ==========================
   MOBILES
========================== */

@media (max-width: 575px) {
    .about-director-section {
        padding: 45px 0;
    }

    .about-director-content .about-section-label {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .about-director-content h2 {
        margin-bottom: 18px;
        font-size: 29px;
        letter-spacing: -0.4px;
    }

    .about-director-content .about-content-divider {
        margin-bottom: 24px;
    }

    .director-message p {
        margin-bottom: 17px;
        font-size: 14px;
        line-height: 1.85;
    }

    .director-message .director-greeting {
        font-size: 17px;
    }

    .director-message .director-quote {
        padding: 17px;
        font-size: 14px;
    }

    .director-signature {
        margin-top: 25px;
        padding-top: 20px;
    }

    .director-signature .director-name {
        font-size: 16px;
    }

    .director-image-frame {
        margin-top: 35px;
        padding-right: 10px;
    }

    .director-image-frame .about-image-decoration {
        left: 20px;
        border-width: 2px;
    }

    .director-image-caption {
        width: calc(100% - 20px);
        padding: 15px;
    }

    .director-caption-name {
        font-size: 15px;
    }
}


/* ==========================================
   PRINCIPES FONDAMENTAUX DE LA MUTUALITÉ
========================================== */

.amn-principles-section {
    padding: 75px 0;
    background: #f7f9fc;
}

.amn-principles-header {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.amn-principles-label {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--amamus-pink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.amn-principles-heading {
    margin: 0 0 18px;
    color: var(--amamus-navy);
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.3;
}

.amn-principles-heading i {
    margin-right: 8px;
    color: var(--amamus-pink);
}

.amn-principles-intro {
    margin: 0;
    color: #657184;
    font-size: 15px;
    line-height: 1.8;
}


.amn-principles-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 22px;
}

/* Première ligne : 3 cartes */
.amn-principle-card:nth-child(-n+3) {
    grid-column: span 4;
}

/* Deuxième ligne : 4 cartes */
.amn-principle-card:nth-child(n+4) {
    grid-column: span 3;
}

/* Tablettes */
@media (max-width: 991px) {
    .amn-principles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .amn-principle-card:nth-child(n) {
        grid-column: span 1;
    }
}

/* Mobiles */
@media (max-width: 575px) {
    .amn-principles-grid {
        grid-template-columns: 1fr;
    }
}


.amn-principle-card {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 26px 18px;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    box-shadow: 0 5px 20px rgba(20, 39, 70, 0.04);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.amn-principle-card:hover {
    transform: translateY(-5px);
    border-color: rgba(200, 55, 104, 0.4);
    box-shadow: 0 14px 30px rgba(20, 39, 70, 0.09);
}

.amn-principle-icon {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    border-radius: 50%;
    background: #fcecf2;
    color: var(--amamus-pink);
    font-size: 23px;
}

.amn-principle-card h4 {
    margin: 0;
    color: var(--amamus-navy);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.65;
}

/* Tablettes */
@media (max-width: 991px) {
    .amn-principles-section {
        padding: 60px 0;
    }

    .amn-principles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

/* Mobiles */
@media (max-width: 575px) {
    .amn-principles-section {
        padding: 45px 0;
    }

    .amn-principles-header {
        margin-bottom: 28px;
    }

    .amn-principles-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .amn-principle-card {
        min-height: auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: 16px;
        padding: 18px;
        text-align: left;
    }

    .amn-principle-icon {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        margin: 0;
        font-size: 20px;
    }

    .amn-principle-card h4 {
        font-size: 14px;
    }
}

.amn-activities-list-section { padding: 60px 0; background: #f7f9fb; }

.amn-activities-list {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.amn-activities-list-item {
	display: flex; align-items: flex-start; gap: 16px;
	height: 100%; /* les cartes de la même ligne ont la même hauteur */
	background: #fff; border-radius: 8px; padding: 14px 18px;
	border-left: 4px solid transparent;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
	transition: transform .3s ease, box-shadow .3s ease,
	            border-color .3s ease, background-color .3s ease;
}
.amn-activities-list-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(30,115,199,.18);
	border-left-color: #1e73c7;
	background: #f8fbff;
}

.amn-activities-list-num {
	flex: 0 0 34px; height: 34px; border-radius: 50%;
	background: #1e73c7; color: #fff; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	transition: transform .3s ease, background-color .3s ease;
}
.amn-activities-list-item:hover .amn-activities-list-num {
	transform: scale(1.12) rotate(-6deg);
	background: #155a9c;
}

.amn-activities-list-text {
	line-height: 1.5; padding-top: 5px;
	transition: color .3s ease;
}
.amn-activities-list-item:hover .amn-activities-list-text { color: #155a9c; }

/* Apparition progressive au défilement */
.amn-activities-list-item.reveal {
	opacity: 0;
	transform: translateY(20px);
}
.amn-activities-list-item.reveal.visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .6s ease, transform .6s ease,
	            box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}

/* Sur mobile : 1 seule colonne */
@media (max-width: 768px) {
	.amn-activities-list { grid-template-columns: 1fr; }
}
/*# sourceMappingURL=style.css.map */