* {
   margin: 0;
   padding: 0;
}

body {
   background: #6B8B8A;
   /* url(imag/background.jpg) no-repeat;
    background-size: cover ;
    background-position: center; */
}

section {

   min-height: calc(100vh - 110px - 58.5px);
}

.main {
   display: flex;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   padding: 10% 0%;
   margin: 20px;
   background: #ffffff3b;
   border-radius: 20px;
}

.Breaks_main { 
   justify-content: center;
   /* flex-direction: column; */
   flex-wrap: wrap;
   align-items: center;
   padding: 10% 0%;
   margin: 20px;
   background: #ffffff3b;
   border-radius: 20px;

}

.imagS {
   display: none;
}

.Breaks_text {
   width: 90%;
   padding: 10% 0%;
}

.text {
   width: 90%;
   height: 500px;
   border-radius: 20px;


}
 
.Breaks_Title {
   display: flex;
   justify-content: center;
   font-size: 50px;
   margin-bottom: 50px;
   color: #fff;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.Title {
   display: flex;
   justify-content: center;
   font-size: 50px;
   margin-bottom: 50px;
   color: #f9f7f7;


}
.Breaks_imag { 
   height: 200px; 
   display: flex;
   justify-content: center;
   align-items: center;
}
.main img {
   width: 600px;
   height: 600px;

}

.mainTEXTP {
   font-size: 41px;
   display: flex;
   justify-content: center;
   text-align: center;
   margin-bottom: 50px;
   color: #f9f7f7;

}

.Communication {
   display: flex;
   justify-content: center;

   margin-bottom: 18px;

}

.Communication_cart {
   transition: 0.7s ease;
}

.Communication .Communication_cart:hover {
   color: #f9f7f7;
   transform: scale(1.5);

}

.title {
   color: #f9f7f7;
   display: flex;
   justify-content: center;
   font-size: 50px;
   margin-bottom: 50px;
}

.governorate {

   height: 400px;
   margin: 50px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
}

.governorate img {
   width: 100%;
   height: 100%;
   border-radius: 10px;
}

.viewcontainer {
   height:  500px;
   position: relative;
   margin: 17px;
   border-radius: 10px;
   overflow: hidden;
   /* text-align: center; */
   justify-content: center;
   align-items: center;
   /* background-color: rgba(255, 255, 255, 0.5); */
   margin-bottom: 10px;
}

.viewcontainer img {
   width: 100%;
   height: 100%;
   border-radius: 10px;
}

.texta {
   position: absolute;
   top: 0;
   right: 0;
   padding: 10px;
   font-size: 26px;
   background: #00000070;
   color: white;
   backdrop-filter: blur(5px);
   border-bottom-left-radius: 10px;
}

.map { 
 
   width: 75px;
   height: 75px;
   position: absolute;
   top: 85%;
   border-radius: 50%;
   padding: 10px;
   font-size: 26px;
   background-color: rgba(255, 255, 255, 0.0);
   /* background: rgba(255, 255, 255, 0.5); */
   border-bottom-left-radius: 10px;
}
.GoogleMap{
   width: 100%;
   height: 100%;
   background: #00000070;
   color: white;
   backdrop-filter: blur(5px);
   border-radius: 50%;
}
.cards {

   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   padding: 10% 0%;
   margin: 20px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 20px;
}

.content {
    display: flex;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   padding: 15% 0%;
   margin: 5px;
}

.cart {
   background: rgba(255, 255, 255, 0.5);
   height: 360px;
   width: 200px;
   box-shadow: o 5px 25px rgb(91, 81, 81);
   padding: 25px;
   margin: 15px;
   transition: 0.7s ease;
   margin-right: 30px;

   border-radius: 20px;
}
.cartChalet {
   background: rgba(255, 255, 255, 0.5);
   height: 300px;
   width: 200px;
   box-shadow: o 5px 25px rgb(91, 81, 81);
   padding: 25px;
   margin: 15px;
   transition: 0.7s ease;
   margin-right: 30px;

   border-radius: 20px;
}
.cartChalet:hover {

   transform: scale(1.1);

}
.cart:hover {

   transform: scale(1.1);

}

.icen {
   display: flex;
   margin-bottom: 20px;
}

.icen img {
   padding: 0% 15%;
   width: 100%;
   height: 100px;
   border-radius: 50%; 
   border-radius: 50%;
}

.info {
   display: flex;
   justify-content: center;
   font-size: 20px;
   width: 100%;
   height: 50px;
}
.info h3{

   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 20px;
 
}
.url a i {
   display: flex;
   justify-content: center;
   font-size: 35px;
   margin-bottom: 50px;
   color: #333333db;
}

.footer {
   height: 15px;
   background: rgba(255, 255, 255, 0.5);
   padding: 2em;
   justify-content: space-between;
   display: flex;

}

.footer-title {
   font-size: 1.3em;
   font-weight: 600;
}

.Communication2 {
   display: flex;
   justify-content: center;
   font-size: 30px;
}
 .titlecards {
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 20px;
   font-size: 36px;
   color: white;
}

.cartaddition {
   background: #6B8B8A;
   height: 250px;
   width: 60%;
   box-shadow: o 5px 25px rgb(91, 81, 81);
   padding: 25px;
   margin: 15px;
   transition: 0.7s ease;
   margin-right: 30px;

   border-radius: 20px;
}

.infocarth3 {
   text-align: center;
   font-size: 20px;
}
.infocart {
   /* display: flex; */
   justify-content: center;
   font-size: 20px;
   width: 100%;; 
   margin-bottom: 15px;
}

.cartaddition .infocart h3,
.cartaddition .url i {
   color: white;
}

.cartaddition:hover {

   transform: scale(1.1);

}
 
 
@media (max-width:1023px) {
     .text {
      flex: 1;
      width: 90%;
      height: 360px;
      border-radius: 20px;
      padding: 10px;
      text-align: center;
      margin: auto;
   }
   .main img {

      width: 300px;
      height: 300px;

   }

   .imagA {
      display: block;
   }

   .imagS {
      display: none;
   }

   section {

      margin-top: 10px;
      margin-left: 50px;
   }

   .main {
      height: 1000px;
    padding: 20% 0%;

   }

   .mainTEXTP {
      font-size: 21px;
      margin-bottom: 5px;
      margin: 10px;
   }

   .text {
      width: 90%;
      height: 360px;
      border-radius: 20px;

      padding: 10px;

   }

   .footer-title {
      font-size: 15px;
      font-weight: 400;
   }

   .Title {
      margin-bottom: 5px;
      font-size: 30px;


   }

   .Communication2 {

      font-size: 20px;
   }

 
}