/*!
Theme Name: Code Sakane
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: Hi. I'm a starter theme called <code>Code Sakane</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: Code Sakane
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Code Sakane is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap");
:root {
  --blue-color: #009ee0;
  --orange-color: #e85412;
  --color-black: #1A171B;
  --color-blanc: #ffffff;
  --border-radius: 6px;
  --background-blue : #F6FCFF;
  --primary-bg-color: #FFFBF9;
  --secondary-bg-color: #FAD9CA;
  --text-color: #3F4955;
  --section-padding: 100px 20px;
  --section-padding-medium: 60px 20px;
  --section-padding-small: 50px 20px;
  --margin-large: 60px;
  --margin-medium: 40px;
  --margin-small: 30px;
}

/*Global CSS CIH Bank*/
h1{font-family: "Cairo", sans-serif;font-size: 64px;font-style: normal;font-weight: 800;line-height: normal;}
h2{font-family: "Cairo", sans-serif;font-size: 34px;font-style: normal;font-weight: 700;line-height: normal;}
h3{font-family: "Cairo", sans-serif;font-size: 24px;font-style: normal;font-weight: 700;line-height: normal;}
h4{font-family: "Cairo", sans-serif;font-size: 22px;font-style: normal;font-weight: 700;line-height: normal;}
h5{font-family: "Cairo", sans-serif;font-size: 16px;font-style: normal;font-weight: 700;line-height: normal;}
h6{font-family: "Cairo", sans-serif;font-size: 14px;font-style: normal;font-weight: 700;line-height: normal;}

.p_20_regular{font-size: 20px;font-style: normal;font-weight: 400;line-height: normal;}
.p_20_medium{font-size: 20px;font-style: normal;font-weight: 500;line-height: normal;}
.p_20_semi_bold{font-size: 20px;font-style: normal;font-weight: 600;line-height: normal;}
.p_20_bold{font-size: 20px;font-style: normal;font-weight: 700;line-height: normal;}

.p_18_regular{font-size: 18px;font-style: normal;font-weight: 400;line-height: normal;}
.p_18_medium{font-size: 18px;font-style: normal;font-weight: 500;line-height: normal;}
.p_18_semi_bold{font-size: 18px;font-style: normal;font-weight: 600;line-height: normal;}
.p_18_bold{font-size: 18px;font-style: normal;font-weight: 700;line-height: normal;}

.p_16_regular{font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;}
.p_16_medium{font-size: 16px;font-style: normal;font-weight: 500;line-height: normal;}
.p_16_semi_bold{font-size: 16px;font-style: normal;font-weight: 600;line-height: normal;}
.p_16_bold{font-size: 16px;font-style: normal;font-weight: 700;line-height: normal;}

.p_14_regular{font-size: 14px;font-style: normal;font-weight: 400;line-height: normal;}
.p_14_medium{font-size: 14px;font-style: normal;font-weight: 500;line-height: normal;}
.p_14_semi_bold{font-size: 14px;font-style: normal;font-weight: 600;line-height: normal;}
.p_14_bold{font-size: 14px;font-style: normal;font-weight: 700;line-height: normal;}

p {font-family: "Cairo", sans-serif;font-size:18px;font-weight:300;color:#3F4955}
button{font-family: "Cairo", sans-serif;}
a{font-family: "Cairo", sans-serif;text-decoration:none}
ul, body{font-family: "Cairo"}
/*AND Global CSS CIH Bank*/
/*Btn CIH Bank*/
.cih_btn_small {background: linear-gradient(to left, var(--orange-color) 50%, #EB672C 50%);background-size: 200% 100%;background-position: right;color: var(--color-blanc);font-size: 12px;font-weight: 300;border-radius: var(--border-radius);padding: 10px 14px;display: inline-block;transition: background-position 0.4s ease;}
.cih_btn_small:hover {background-position: left;}
.cih_btn_large{background: linear-gradient(to left, var(--blue-color) 50%, #32bcf5 50%);background-size: 200% 100%;background-position: right;color: var(--color-blanc);font-size: 16px;font-weight: 300;border-radius: var(--border-radius);padding: 16px 18px;display: inline-block;transition: background-position 0.4s ease;}
.cih_btn_large:hover {background-position: left;}
.cih_btn_medium{background: linear-gradient(to left, var(--orange-color) 50%, #EB672C 50%);background-size: 200% 100%;background-position: right;color: var(--color-blanc);font-size: 16px;font-weight: 300;border-radius: var(--border-radius);padding: 16px 18px;display: inline-block;transition: background-position 0.4s ease;}
.cih_btn_medium:hover {background-position: left;}
.cih_btn_blue_large{color: var(--blue-color);font-size: 16px;font-weight: 300;border-radius: var(--border-radius);padding: 16px 18px;background-color:#F6FCFF}
/*END Btn CIH Bank*/

/*HEADER CSS*/
header{position: fixed;width: 100%;background: #fff;z-index: 999;top:0}
.custom-logo-link img{width: 117px;height: auto;}
.header {padding: 15px 0;border-bottom: 0.8px solid var(--Slate-100, #E8EAEE);}
.header .navbar {margin-bottom: 0;padding: 0;}
.header .navbar li {cursor: pointer;list-style: none;}
.nav-link{color:#1A171B;font-size:14px;font-weight:600;}
.navbar li.active a{color:var(--blue-color);} 
.hamburger_menu {position: inherit;left: 5%;display: none;z-index: 2;top:20px;}
.hamburger_menu span {width: 34px;height: 4px;background-color: #000;border-radius: 60px;display: block;margin-bottom: 5px;transition: all 0.3s linear;}
.hamburger_menu.active span:nth-child(1) {transform: rotate(45deg);margin-bottom: -3px;}
.hamburger_menu.active span:nth-child(2) {transform: translateX(-60px);opacity: 0;}
.hamburger_menu.active span:nth-child(3) {transform: rotate(-45deg);margin-top: -10px;}
/*AND HEADER CSS*/

/* Style général du menu Lang */
.lang-menu .navbar-nav {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: row;gap: 15px;position: relative;}
.lang-menu .navbar-nav > li > a {text-decoration: none;color: #000;font-size: 14px;padding: 0px;display: block;transition: background 0.3s ease;}
.lang-menu .navbar-nav li .sub-menu {display: none;position: absolute;list-style:none;top: 100%;left: -40px;min-width: 140px;background-color: white;box-shadow: 0 2px 6px rgba(0,0,0,0.15);padding: 10px;border-radius: 6px;text-align: center;z-index: 1000;}
.lang-menu .navbar-nav li:hover > .sub-menu {display: block;}
.lang-menu > .navbar-nav > li{padding-top:10px;padding-bottom:10px;}
.lang-menu .navbar-nav li .sub-menu li a {padding: 10px 15px;display: block;font-size: 14px;color: #333;text-decoration: none;white-space: nowrap;}
.lang-menu .navbar-nav li .sub-menu li:hover{background-color: #F6FCFF;border-radius: 6px;}
.lang-menu .navbar-nav li .sub-menu li:hover a{color: #009EE0;}
.lang-item-ar > a{font-family: "Cairo", sans-serif !important;}
.lang-menu .navbar-nav li.menu-item-has-children > a::after {content: "";display: inline-block;width: 10px;height: 10px;margin-right: 3px;background-image: url('img/arrows.svg');background-size: contain;background-repeat: no-repeat;vertical-align: middle;background-position: center;}
.lang-menu .navbar-nav li.menu-item-has-children > a::before {content: "";display: inline-block;width: 15px;height: 15px;margin-left: 2px;background-image: url('img/lang.svg');background-size: contain;background-repeat: no-repeat;vertical-align: middle;background-position: center;}
/* END Style général du menu Lang */

/*Hero Section*/
.hero-section {margin-top: 40px;}
.text-orange{color: var(--orange-color);}
.hero-section{background-image: url('/wp-content/uploads/2025/04/CIH-BANK-CODE-Sakane-Hero-CODE-Sakane-RTL-min.png');background-position: left;background-size: contain;background-repeat: no-repeat;height: 580px;}
.hero-slider-text{color: color:#6B7B8F;font-size:20px;}
/*ANd Hero Section*/

/*partenaires*/
.partenaires .logo-carousel {overflow: hidden;position: relative;background-color: #f8f9fa;padding: 20px 0;}
.partenaires .logo-track {display: flex;animation: scroll 25s linear infinite;width: max-content;}
.partenaires .logo-carousel img {max-height: 60px;margin: 0 30px;filter: grayscale(100%);opacity: 0.7;transition: all 0.3s ease;width: 98px;}
.partenaires .logo-carousel a{vertical-align: middle;display: flex;}
.partenaires .logo-carousel img:hover {filter: grayscale(0%);opacity: 1;transform: scale(1.05);}
@keyframes scroll {0% { transform: translateX(0); }100% { transform: translateX(-50%); }}
/*AND partenaires*/

/*Section code sakane*/
.code-sakane-section {padding: 100px 20px 50px 20px;}
.code-sakane-title {margin-bottom:40px;}
.code-sakane-right{background-color:var(--background-blue);padding: 30px;}
/*ANd Section code sakane*/

/*Avantages code sakane*/
.avantages-section {background-color:var(--background-blue);padding: 40px 0px;text-align: center;}
.avantages-section h2 {margin-bottom: 40px;}
.avantages-section h2 .text-blue{color: var(--blue-color);}
.card-avantage {background-color: #fff;border: 1px solid #D1F1FF;border-radius: 12px;padding: 30px;box-shadow: 0 4px 10px rgba(0,0,0,0.03);transition: transform 0.3s ease;height: 100%;text-align: left;}
.card-avantage:hover {transform: translateY(-5px);}
.card-avantage img {width: 48px;height: 48px;margin-bottom: 15px;}
.card-avantage h3 {color: #009EE0;margin-bottom: 10px;font-size: 20px;font-style: normal;font-weight: 700;}
.card-avantage p {margin: 0;}
/*And avantages code sakane*/

/*section Caractairistique*/
.caracteristiques-section {padding: 100px 20px;}
.caracteristiques-title {margin-bottom: 40px;}
.caracteristiques-list {list-style: none;padding: 0;font-weight: 300;}
.caracteristiques-list li {display: flex;align-items: flex-start;margin-bottom: 20px;color: #1e1e1e;font-size: 18px;}
.caracteristiques-list img {width: 22px;height: 22px;margin-left: 10px;margin-top: 4px;}
.cta-buttons {margin-top: 40px;gap: 20px;}
/*ENd Section caractairistiques*/

/*Guide code sakane*/
.hero_guide_code_sakane,.le-guide-du-1er-achat-immobilier {background-image: url(/wp-content/uploads/2025/04/Hero-Background.png);background-position: center;background-size: cover;background-repeat: no-repeat;padding: var(--section-padding);}
.trouver-le-bien-ideal,.videos-explicatives {padding: var(--section-padding);}
.finaliser-l-achat{padding: 100px 20px 50px 20px;}
.preparer-l-acquisition,.dernieres-etapes-et-demenagement,.le-guide-du-1er-achat-immobilier {padding: var(--section-padding-medium);}
.dernieres-etapes-et-demenagement{padding: var(--section-padding-small);}
.videos-explicatives {padding: 50px 20px}
.video-thumbnail {position: relative;display: inline-block;}
.hover-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.4); /* Calque noir transparent */opacity: 0;transition: opacity 0.3s ease;z-index: 2;border-radius:12px;}
.play-btn-codesakane {width: 50px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 3;transition: opacity 0.3s ease;}
.popup-youtube:hover .hover-overlay {opacity: 1;}
.popup-youtube:hover .play-btn-codesakane {content: url('/wp-content/uploads/2025/05/Play-Button-Hover.svg');}
.icon-step-head-line {margin-left: 10px;}
.identifier-vos-criteres-essentiels-row,.preparer-l-acquisition-row,.finaliser-l-achat-row,.dernieres-etapes-et-demenagement-row,.videos-explicatives-row {margin-top: var(--margin-large);}
.essentiels-row-3{margin-bottom:20px !important;}
.identifier-vos-criteres-essentiels-row {margin: 80px 20px;}
.identifier-vos-criteres-essentiels h3,.finaliser-l-achat-text h3,.dernieres-etapes-et-demenagement-text h3 {margin-top: var(--margin-medium);}
.identifier-vos-criteres-essentiels h3 {margin-bottom: var(--margin-medium);}
.preparer-l-acquisition-title {margin-bottom: var(--margin-small);}
.preparer-l-acquisition-img {margin-bottom: var(--margin-small);}
.essentiels-2 {padding-right: 55px;}
.preparer-l-acquisition {background-color: var(--primary-bg-color);}
[dir="rtl"] .preparer-l-acquisition-row .col-md-4:not(:last-child) {border-left: 1px solid var(--secondary-bg-color);padding-left: 1rem;}
.identifier-vos-criteres-essentiels-img img,.finaliser-l-achat-img img,.dernieres-etapes-et-demenagement-img img {width: 100%;max-width: 570px;height: auto;display: block;; border-radius:12px}
.identifier-vos-criteres-essentiels-img img {max-width: 560px; border-radius:12px}
.le-guide-du-1er-achat-immobilier-img img {width: 320px;}
.img-vide-popup {width: 100%;border-radius: 12px;height:auto;}
.videos-explicatives h3 {color: var(--text-color); min-height: 88px;margin-top:15px;font-size: 22px;}
.margin-left-img {margin-right: auto;}
.margin-right-img {margin-left: auto;}
.le-guide-du-1er-achat-immobilier {margin-bottom: 100px;}
/*End guide code skane*/


/*CSS Page Contact*/
.contact-form-image > img{
 width: 570px;
    border-radius: 12px;
    display: block;
    margin-right: auto;
}
.block-contact-form{
  padding:100px 20px;
}
.formulaire-de-contact-7 label{
  font-weight: 600;
    font-size: 18px;
    color: #3F4955;
}
.formulaire-de-contact-7 .form-control{
  padding:16px !important;
}

/* Couleur des placeholders */
::placeholder {
  color: #C8CED6;
  opacity: 1;
  font-weight: 300;
  font-size: 16px;
}

/* Pour compatibilité avec tous les navigateurs */
.formulaire-de-contact-7 input::placeholder,
.formulaire-de-contact-7 textarea::placeholder {
  color: #C8CED6;
  font-weight: 300;
  font-size: 16px;
}

.formulaire-de-contact-7 input::-webkit-input-placeholder,
.formulaire-de-contact-7 textarea::-webkit-input-placeholder {
  color: #C8CED6;
  font-weight: 300;
  font-size: 16px;
}

.formulaire-de-contact-7 input:-ms-input-placeholder,
.formulaire-de-contact-7 textarea:-ms-input-placeholder {
  color: #C8CED6;
  font-weight: 300;
  font-size: 16px;
}

.formulaire-de-contact-7 input::-ms-input-placeholder,
.formulaire-de-contact-7 textarea::-ms-input-placeholder {
  color: #C8CED6;
  font-weight: 300;
  font-size: 16px;
}
.formulaire-de-contact-7 .cih_btn_large{
  width:100%;
}
.formulaire-de-contact-7 .cih_btn_large:hover{
  color:var(--color-blanc);
}

.wpcf7-not-valid-tip {
    font-size: 10px !important;
}
.contenu-text-contact{
  margin-bottom:40px;
}
/*And CSS page Contact*/

/*Css Footer*/
footer{box-shadow: 0 -4px 8px -6px #33333369;-moz-box-shadow: 0 -4px 8px -6px #33333369;-webkit-box-shadow: 0 -4px 8px -6px #33333369;}
.text-copy-right{font-size: 10px;}
.social-media-footer{gap: 20px;justify-content: flex-end;}
.social-media-footer a img{width:25px;height:auto}
/*End footer*/

@media only screen and (max-width: 1024px) {
  .header .navbar {
    position: fixed;
    right: 0;
    opacity: 1;
    visibility: visible;
    min-height: 100%;
    min-width: 100%;
    background: var(--color-blanc);
    right: -110%;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-transform: uppercase;
    padding-top: 10%;
    transition: all 0.3s linear;
  }
  .header .navbar li {
    background-color: #F9FAFB;
        border-radius: 8px;
        padding-top: 20px;
        padding-bottom: 20px;
  }
  .header .navbar li.active{
        background: #F6FCFF;
  }
  .header .navbar li:hover{
        background: #F6FCFF;
  }
  .header .navbar li:hover a{
        color: #009EE0;
  }

  .mobile-lang ul li{
    background-color: #009EE0 !important;
    padding: 15px 40px !important;
    width: 170px;
        text-align: center;
  }
  .mobile-lang ul li a{
    color:var(--color-blanc);
    font-size:14px;
    font-weight:600;
  }
  .mobile-lang ul li:hover a{
    color:var(--color-blanc) !important;
  }
  .hr-entre-menu{
    width:90%;
  }
  .hamburger_menu {
    display: block;
  }
  .header .navbar.active {
    right: 0;
    opacity: 1;
    visibility: visible;
    z-index:999;
  }
  #menu-menu-principal-ar{
    padding: 20px;
  }
  #menu-langue-mobile{
    padding: 0px 0px;
  }
  #navbarNav{
  	width:100%;
  	text-align: center;
  }
  .custom-logo-link img {
    margin-right: 15px;
  }
  .i_m_interesed, .col_lang_menu{
    display:none !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 899px) and (orientation: portrait) {
  .hero-section {
    margin-top: 40px;
  }
  .hero-slider-text {
    width: 300px;
  }
  .code-sakane-section {
    padding: 20px 0px;
}
.caracteristiques-section {
    padding: 70px 20px;
}
.identifier-vos-criteres-essentiels-row {
    margin: 60px 0px;
}
section.videos-explicatives > div > div.head-line-step1 > h2{
  text-align:center;
}
.videos-explicatives h4 {
    min-height: 122px;
	margin-top:10px;
}
.le-guide-du-1er-achat-immobilier-img img {
    width: 220px;
}
section > div > div > div.col-md-6.contact-form-content,section > div > div > div.col-md-6.contact-form-image{
  width:100%;
}
section > div > div > div.col-md-6.contact-form-image img{
  margin-left:auto;
  margin-right:auto;
}
}
@media (max-width: 768px) {
  h1{font-size: 42px !important;font-weight: 800 !important;}
  h3{font-size: 20px !important;font-weight: 700 !important;}
  #homepage > div > div > div > section.hero-section > div > div > div.col-lg-6.py-5.text-end > h1{
    text-align:center;
  }
	#homepage > div > div > section.hero-section > div > div > div{
		padding-top:0px !important;
	}
	#homepage > div > div > section.c-est-quoi-code-sakane > div{
		margin-bottom:0px !important;
	}
  /*partenaires*/
  .partenaires  .logo-carousel img {
    margin: 0 30px;
    max-height: 40px;
  }
  /*AND partenaires*/
        .caracteristiques-img {
        margin-top: 30px;
        text-align: center;
      }

      .btn-outline-custom {
        margin-left: 0;
        margin-top: 15px;
      }

      .cta-buttons {
        display: flex;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 2rem;
      }
  .hero-section{
    padding: 290px 30px 30px 30px;
    background-position: top;
  }
  section.hero-section > div > div > div.col-lg-6{
    text-align:center;
  }
  .hero-slider-text {
    margin-right: 0px;
    text-align:center;
  }
  section.hero-section > div > div > div.col-lg-6.py-5.text-end{
    text-align:center !important;
  }
  #homepage > div > div > div.col-md-12 .g-0 {
    margin-top: 0px;
}
	.code-sakane-title {
		margin-top:20px;
	}

  .code-sakane-section {
    padding: 40px 20px 0px 20px;
    text-align: center;
    flex-flow: column-reverse;
}
.code-sakane-title {
    margin-bottom: 15px;
    text-align: center;
}
.code-sakane-text{
  text-align:center;
}
.card-avantage {
    text-align: center !important;
}
section.avantages-section > div > div{
      gap: 30px;
      padding-left: 20px;
        padding-right: 20px;
}
.card-avantage img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.caracteristiques-title {
    text-align: center;
}
.caracteristiques-section {
    padding: 60px 30px;
    text-align: center;
}
.caracteristiques-list li{
  text-align:right !important;
}
.code-sakane-right img{
  margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
}
.caracteristiques-list {
    text-align: left;
    padding: 0px;
    margin-bottom:0px;
}
section.caracteristique-section > div > div{
  flex-flow: column-reverse;
}
.site-footer{
  text-align:center;
}
.social-media-footer{
      justify-content: center;
    align-items: center;
    flex-wrap: wrap !important;
    gap: 1rem;
    margin-top: 10px;
    margin-bottom: 10px;
}
#colophon > div > div > div.col-md-8.text-center{
  margin-top: 10px;
}
div.col-md-6.caracteristiques-img.text-center > img{
  margin-bottom: 20px;
}
#homepage > div > div > div{
      margin-top: 70px;
	width:100% !important;
}
.hero_guide_code_sakane{
  padding: 60px 20px 60px 20px;
}
.head-line-step1 h2{
  flex-flow: column;
  text-align: center;
}
.icon-step-head-line {
    margin-right: auto;
    width: 60px;
    margin-left: auto;
    display: block;
    margin-bottom: 15px;
}
.trouver-le-bien-ideal{
  text-align:center;
}
.identifier-vos-criteres-essentiels-row {
    margin: 30px 0px;
    
}
#guide-code-sakane > div > div > div > section.trouver-le-bien-ideal > div > div:nth-child(2),#guide-code-sakane > div > div > div > section.trouver-le-bien-ideal > div > div.row.align-items-center.identifier-vos-criteres-essentiels-row.essentiels-row-3,#guide-code-sakane > div > div > div > section.dernieres-etapes-et-demenagement > div > div.row.align-items-center.dernieres-etapes-et-demenagement-row{
  flex-direction: column-reverse;
}
section.trouver-le-bien-ideal > div > div:nth-child(2),section.trouver-le-bien-ideal > div > div.row.align-items-center.identifier-vos-criteres-essentiels-row.essentiels-row-3{
		flex-direction: column-reverse;
	}
	.cih_btn_medium{
		padding: 16px 10px;
	}
.identifier-vos-criteres-essentiels h3 {
    margin-bottom: 20px;
}

.identifier-vos-criteres-essentiels h3, .finaliser-l-achat-text h3, .dernieres-etapes-et-demenagement-text h3 {
    margin-top: 20px;
    text-align:center;
}
.essentiels-2 {
    padding-right: 10px;
}
.trouver-le-bien-ideal, .videos-explicatives {
    padding: 60px 20px;
}
.preparer-l-acquisition-img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.preparer-l-acquisition-title {
    text-align: center;
}
.finaliser-l-achat {
    padding: 60px 20px 20px 20px;
}
.dernieres-etapes-et-demenagement {
    padding: 0px 20px;
}
.identifier-vos-criteres-essentiels-img {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
 .videos-explicatives h4 {
    text-align: center !important;
	margin-top:10px;
}

.head-line-step1{
  text-align: center;
}
.le-guide-du-1er-achat-immobilier-img img {
    width: 300px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.contact-form-image > img {
    width: 100%;
  }
#coontact > div > div > div > section > div > div{
  flex-flow: column-reverse;
}
.contact-text-content{
  text-align:center;
}
.contact-text-content h1{
  margin-top:30px;
}
}