@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

 :root {
   /*=======Main theme colors=======*/
   --first-color: #0e2431;
   --second-color: #ff4400;
   --third-color: #777;

   /*=======Hover colors=======*/
   --hover-color: #614fd0;

   /*=======Background colors=======*/
   --body-bg-color: #fefefe;
   --card-bg-color: #fff;
   --modal-bg-color: #fff;
   --bg-transparent-color: rgba(0, 0, 0, 0.1);
   --bg-transparent-color-01: rgba(0, 0, 0, 0.1);
   --bg-transparent-color-02: rgba(106, 89, 209, 0.1);
   --line-color: #d7d7d7;

   /*=======Color Filter=======*/
   --color-filter: invert(1);

   /*=======Box shadow=======*/
   --box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.175);

   /*=======Font size=======*/
   --small-font-size: 0.9em;
   --normal-font-size: 1em;
   /*=======Scroll bar colors=======*/
   --scroll-bar-color: #c5cadf;
   --scroll-thumb-color: #70768a;
   --scroll-thumb-hover: #454f6b;
 }
::selection{
  background: var(--second-color);
  color: #fff;
}

:required {
  color: red;
}

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   color: var(--first-color);
   background: var(--body-bg-color);
   margin: 2rem 0 0 0;
   transition: .5s ease;
 }

 a {
   text-decoration: none;
 }

 li {
   list-style: none;
 }

 /*=======Scroll to top button=======*/
 .scrollToTop-btn {
   z-index: 99999;
   position: fixed;
   right: 0;
   bottom: 20px;
   width: 45px;
   height: 45px;
   background: var(--second-color);
   color: #fff;
   font-size: var(--small-font-size);
   border: 2px solid var(--body-bg-color);
   border-radius: 50%;
   cursor: pointer;
   opacity: 0;
   transition: .5s ease;
 }

 .scrollToTop-btn.active {
   right: 20px;
   pointer-events: all;
   opacity: 1;
 }



 /*=======Scroll bar=======*/

 ::-webkit-scrollbar {
   width: 10px;
   background: var(--scroll-bar-color);
 }

 ::-webkit-scrollbar-thumb {
   background: var(--scroll-thumb-color);
   border-radius: 2em;
 }

 ::-webkit-scrollbar-thumb:hover {
   background: var(--scroll-thumb-hover);
 }

 /*=======Header=======*/
 header {
   z-index: 99999;
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background: var(--body-bg-color);
   transition: .6s ease;
 }

 header.sticky {
   box-shadow: var(--box-shadow);
 }

 .nav-bar {
   position: relative;
   height: calc(4rem + 1rem);
   max-width: 1250px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-left: auto;
   margin-right: auto;
   padding: 0 20px;
   transition: .6s ease;
 }

 header.sticky .nav-bar {
   height: calc(2.5rem + 1rem);
 }

 .nav-bar .logo {
   color: var(--first-color);
   font-size: 1.3em;
   font-weight: 600;
 }

 .nav-items a {
   color: var(--first-color);
   font-size: var(--normal-font-size);
   font-weight: 500;
 }

 .nav-items a.active {
   color: var(--second-color);
 }

 .nav-items a:not(:last-child) {
   margin-right: 50px;
 }

 .nav-items a:hover {
   color: var(--second-color);
 }

 .nav-menu-btn {
   display: none;
 }

 /*=======Home section=======*/
 .home {
   position: relative;
   max-width: 1250px;
   min-height: 100vh;
   margin-left: auto;
   margin-right: auto;
   padding: 4rem 2rem;
   flex-direction: column;
 }

 .home .home-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 }

 .home-container .media-icons {
   display: flex;
   flex-direction: column;
   margin-right: 40px;
 }

 .home-container .media-icons a {
   color: var(--second-color);
   font-size: 1.5em;
   margin: 10px 0;
 }

 .home-container .media-icons a:hover {
   color: var(--hover-color);
 }

 .home-container .info h2 {
   font-size: 4em;
   font-weight: 600;
   line-height: 70px;
 }

 .home-container .info h3 {
   color: var(--third-color);
   font-feature-settings: 1.3em;
   font-weight: 600;
   line-height: 50px;
 }

 .home-container .info p {
   color: var(--third-color);
   font-size: var(--normal-font-size);
   max-width: 350px;
 }

 .btn {
   background: var(--second-color);
   color: #fff;
   font-size: var(--normal-font-size);
   font-weight: 500;
   display: inline-block;
   margin-top: 25px;
   padding: 20px 30px;
   letter-spacing: 1px;
   border-radius: 10px;
 }

 .btn:hover {
   background: var(--hover-color);
 }

 .home-container .home-img {
   position: relative;
 }

 .home-container .home-img img {
   width: 90%;
   transform: translate(0, 0);
 }

 .home .scroll-down {
   color: var(--first-color);
   font-size: var(--normal-font-size);
   font-weight: 500;
   margin-top: 20px;
 }

 .info a i, svg {
   animation: arrow-right ease 2s infinite;
 }

 @keyframes arrow-right {
   0% {
     transform: translate(0);
   }

   30% {
     transform: translate(10px);
   }
 }

 .home .scroll-down i {
   color: var(--second-color);
   font-size: 1.2em;
   animation: arrow-down ease 2s infinite;
 }

 @keyframes arrow-down {
   0% {
     transform: translateY(0);
   }

   30% {
     transform: translateY(10px);
   }
 }

 /*=======Common styles for all sections=======*/
 .flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .section {
   position: relative;
   max-width: 1150px;
   margin-left: auto;
   margin-right: auto;
   padding: 6rem 2rem 2rem;
 }

 .sub-section {
   position: relative;
   max-width: 1150px;
   margin-left: auto;
   margin-right: auto;
   padding: 6rem 0;
 }

 .section-title-01 {
   font-size: 4.5em;
   font-weight: 800;
   margin-bottom: 2rem;
   background: linear-gradient(to top, transparent 0%, var(--first-color) 70%);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   opacity: 0.1;
 }

 .section-title-02 {
   font-size: 2.5em;
   font-weight: 700;
   transform: translateY(-80px);
 }

 .section-title-02:before {
   content: '';
   position: absolute;
   width: 70px;
   height: 5px;
   right: 0;
   bottom: 0;
   background: var(--second-color);
 }

 .container {
   position: relative;
   flex-direction: column;
 }

 /*=======About section=======*/
 .about .container .content {
   column-gap: 40px;
   width: 100%;
 }

 .about-img {
   position: relative;

 }

 .about-img img {
   max-width: 100%;
   min-width: 500px;
   border-radius: 20px;
 }

 .about-info .description {
   max-width: 600px;
 }

 .about-info .description h3 {
   font-size: 2em;
   font-weight: 600;
   margin-bottom: 10px;
 }

 .about-info .description h4 {
   font-size: 1.3em;
   font-weight: 600;
   margin-bottom: 10px;
 }

 .about-info .description h4 span {
   color: var(--second-color);
 }

 .about-info .description p {
   color: var(--third-color);
   font-size: var(--normal-font-size);
   margin-bottom: 15px;
   padding-bottom: 25px;
   border-bottom: 2px solid var(--line-color);
 }

 .about-info .professional-list {
   display: flex;
   column-gap: 30px;
 }

 .about-info .professional-list .list-item {
   display: flex;
   justify-content: center;
   align-items: center;
   column-gap: 15px;
   margin-bottom: 20px;
 }

 .about-info .professional-list .list-item h3 {
   font-size: 2.5em;
   font-weight: 700;
 }

 .about-info .professional-list .list-item span {
   color: var(--third-color);
   font-size: var(--small-font-size);
 }

 .about-info a i {
   color: #fff;
   margin-left: 30px;
 }

 /*=======Skills section=======*/

 .skills .container .content {
   width: 100%;
 }

 .skills-description {
   max-width: 700px;
   margin-bottom: 50px;
 }

 .skills-description h3 {
   font-size: 2em;
   margin-bottom: 5px;
 }

 .skills-info {
   max-width: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 20px;
   margin: 0 auto;
 }

 .skills-info h4 {
   margin-bottom: 20px;

 }

 .skills-info h4 label {
   background: var(--second-color);
   color: #fff;
   font-size: var(--normal-font-size);
   padding: 5px 15px;
   border-radius: 5px;
 }

 .education-all {
   margin-bottom: 80px;
 }

 .edu-list .item {
   background: var(--card-bg-color);
   box-shadow: var(--box-shadow);
   border-bottom: 3px solid var(--second-color);
   padding: 20px;
   margin-top: 15px;
   border-radius: 6px;
   transition: .3s ease;
 }

 .edu-list .item .year {
   font-size: var(--small-font-size);
   margin-bottom: 5px;
 }

 .skills-info a i {
   color: var(--second-color);
   font-size: 1.3em;
   margin-left: 30px;
 }

 .fa-download:hover {
   transform: translateY(10px);
   transition: .3s ease;
 }

 .edu-list .item p {
   color: var(--third-color);
   font-size: var(--small-font-size);
 }

 .edu-list .item p span {
   color: var(--first-color);
   font-size: var(--small-font-size);
   font-weight: 500;

 }

 .bar {
   background: var(--card-bg-color);
   box-shadow: var(--box-shadow);
   margin-bottom: 10px;
   padding: 20px;
   border-radius: 6px;
   transition: .3s ease;
 }

 .bar .info {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 5px;
   font-size: var(--small-font-size);
 }

 .certificats .item {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .bar .info span {
   font-weight: 500;
 }

 .bar .line {
   position: relative;
   width: 100%;
   height: 7px;
   background: #c5cadf;
   border-radius: 2px;
 }

 .bar .line::before {
   content: '';
   position: absolute;
   height: 100%;
   top: 0;
   left: 0;
   background: var(--second-color);
   border-radius: 2px;
   width: 90%;
 }

 .bar .php::before {
   width: 50%;
 }

 .bar .javascript::before {
   width: 50%;
 }

 .bar .css::before {
   width: 75%;
 }

 .bar .html::before {
   width: 95%;
 }

 .experience-card {
   background: var(--card-bg-color);
   border-bottom: 3px solid var(--second-color);
   padding: 35px;
   border-radius: 6px;
   box-shadow: var(--box-shadow);
   transition: .3s ease;
 }

 .experience-card .upper {
   line-height: 30px;
 }

 .experience-card h3 {
   font-size: 1.3em;
   font-weight: 700;
 }

 .experience-card h5 {
   font-size: var(--small-font-size);
   font-weight: 500;
   font-style: italic;
 }

 .experience-card span {
   color: var(--third-color);
 }

 .experience-card .hr {
   width: 100%;
   height: 2px;
   background: var(--line-color);
   margin: 10px 0 22px;
 }


 .edu-list .item:hover,
 .bar:hover,
 .experience-card:hover {
   transform: scale(1.03);
 }


 /*=======Services section=======*/

 .services .container .content {
   width: 100%;
 }

 .services-description h3 {
   font-size: 2em;
   margin-bottom: 50px;
 }

 .services-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
   max-width: 100%;
   margin: 0 auto;
   gap: 20px;
 }

 .services-card {
   background: var(--card-bg-color);
   border-bottom: 3px solid var(--second-color);
   padding: 50px;
   border-radius: 6px;
   box-shadow: var(--box-shadow);
 }

 .services-card>i {
   color: var(--second-color);
   font-size: 3em;
   margin-bottom: 30px;
 }

 .services-card h3 {
   font-size: 1.3em;
   font-weight: 700;
   line-height: 30px;
   margin-bottom: 20px;
 }

 .services-card .learn-more-btn {
   color: var(--third-color);
   cursor: pointer;
   transition: .3s ease;
 }

 .services-card .learn-more-btn i {
   transition: .3s ease;
 }

 .services-card:hover .learn-more-btn i {
   transform: translateX(10px);
 }

 .services-modal {
   z-index: 99999;
   position: fixed;
   width: 100%;
   height: 100vh;
   top: 0;
   left: 0;
   background: var(--bg-transparent-color);
   backdrop-filter: blur(10px);
   visibility: hidden;
   transition: .1s ease;
 }

 .services-modal.active {
   visibility: visible;
   opacity: 1;
   transition: .1s;
 }

 .services-modal-body {
   position: relative;
   background: var(--modal-bg-color);
   max-width: 600px;
   margin: 20px;
   padding: 40px;
   border-radius: 10px;
   box-shadow: var(--box-shadow);
   transition: .1s ease;
 }

 .services-modal.active .services-modal-body {
   transform: translateY(0);
 }

 .services-modal-body .modal-close-btn {
   position: absolute;
   top: 0;
   right: 0;
   margin: 20px;
   cursor: pointer;
 }

 .services-modal-body h3 {
   font-size: 2em;
 }

 .services-modal-body h4 {
   font-size: 1.3em;
   font-weight: 600;
   margin: 15px 0 10px;
 }

 .services-modal-body ul li {
   margin-top: 15px;
 }


 .services-modal-body ul li i {
   color: var(--second-color);
 }



 /*=======Portfolio section=======*/
 .portfolio .container .content {
   width: 100%;
 }

 .portfolio-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   max-width: 100%;
   gap: 35px;
   margin: 0 auto;
 }

 .portfolio-list .img-card {
   position: relative;
   max-width: 100%;
   height: 360px;
   border-radius: 10px;
   box-shadow: var(--box-shadow);
   overflow: hidden;
   cursor: pointer;
   border-bottom: 5px solid var(--second-color);
   border-right: 5px solid var(--second-color);
 }

 .portfolio-list .img-card .overlay {
   transition: 1s ease;
 }

 .portfolio-list .img-card:hover .overlay {
   z-index: 777;
   position: absolute;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
 }

 .portfolio-list .img-card .info {
   z-index: 777;
   position: absolute;
   bottom: 0;
   left: 0;
   margin: 20px;
   color: #fff;
   transform: translateY(20px);
   opacity: 0;
   transition: .5s ease;
 }

 .portfolio-list .img-card:hover .info {
   transform: translateY(0);
   opacity: 1;
 }

 .portfolio-list .img-card .info h3 {
   font-size: 1.2em;
 }

 .portfolio-list .img-card .info span {
   font-size: 1.2em;
 }

 .portfolio-list .img-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .porfolio-modal {
  z-index: 999999;
  position: fixed;  
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: var(--bg-transparent-color-01);
  backdrop-filter: blur(20px);
  visibility: hidden;
  transition: .3s ease;
  overflow: scroll;
 }


 .porfolio-modal.active {
   visibility: visible;
   opacity: 1;
   transition: .1s ease;
 }

 .portfolio-modal-body {
   position: relative;
   background: var(--modal-bg-color);
   max-width: 600px;
   margin: auto;
   padding: 40px;
   border-radius: 10px;
   box-shadow: var(--box-shadow);
   transition: .1s ease;
 }

 .porfolio-modal.active .portfolio-modal-body {
   transform: translateY(0);
 }

 .portfolio-close-btn {
   position: absolute;
   top: 0;
   right: 0;
   margin: 20px;
   cursor: pointer;
 }

 .portfolio-modal-body h3 {
   font-size: 1.5em;
   margin: auto;
 }

 .portfolio-modal-body img {
   width: 100%;
   margin: 20px 0;
   border-radius: 10px;
 }


 /*=======Get-in-touct=======*/
 .get-in-touch {
   margin-top: 70px;
 }

 .get-in-touch .container .content {
   width: 100%;
 }

 .get-in-touch .contact-card {
   position: relative;
   width: 90%;
   background: var(--card-bg-color);
   box-shadow: var(--box-shadow);
   padding: 50px;
   border-radius: 10px;
   column-gap: 50px;
 }

 .contact-card .title {
   text-transform: uppercase;
   line-height: 60px;
 }

 .contact-card .title h4 {
   font-size: 1.2em;
   font-weight: 300;
   line-height: 20px;
 }

 .contact-card .title h3 {
   font-size: 2.3em;
   font-weight: 400;
 }

 .contact-card .title h2 {
   font-size: 4.2em;
   font-weight: 700;
   background: linear-gradient(to top, transparent 0%, var(--first-color) 30%);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   opacity: .9;
 }

 /*=======Our Clients=======*/

 .our-client .container {
   flex-direction: column;
 }

 .our-client .container .content {
   width: 100%;
 }

 .client-swiper .swiper-wrapper {
   margin-bottom: 30px;
 }

 .client-swiper .swiper-slide {
   gap: 50px;
   margin: 20px 0;
   box-shadow: var(--box-shadow);

 }

 .client-img {
   width: 250px;
   height: 250px;
   overflow: hidden;
   border-radius: 10px;
   margin-bottom: 50px;
 }

 .client-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .client-details {
   max-width: 500px;
   margin-left: 50px;
   margin-bottom: 50px;
 }

 .client-details p {
   font-size: 1em;
   color: var(--third-color);
   padding-bottom: 15px;
   margin-bottom: 10px;
   border-bottom: 2px solid var(--line-color);
 }

 .fa-chevron-left,
 .fa-chevron-right {
   color: var(--second-color);
   font-size: 1rem;
 }

 .client-details h3 {
   color: var(--fisrt-color);
   font-size: 1.5em;
 }

 .client-details span {
   color: var(--third-color);
   font-size: 1.1em;
 }

 .carousel-control-next:after,
 .carousel-control-prev:after {
   content: '';
 }

 /*=======Contact section=======*/
 .contact .container .content {
   display: flex;
   justify-content: space-between;
   width: 100%;
 }

 .contact-left{
  margin-right: 15px;
 }

 .contact-left h2 {
   font-size: 1.6em;
   font-weight: 800;
   margin-bottom: 40px;
 }

 .contact-list li {
   margin-bottom: 40px;
 }

 .contact-list li h3 {
   font-size: 1.3em;
   font-weight: 600;
   margin-bottom: 10px;
 }

 .contact-list li h3 i {
   color: var(--second-color);
   font-size: 1.3em;
   margin-right: 10px;
 }

 .contact-list li span {
   color: var(--third-color);
   margin-left: 40px;
 }

 .contact-list li span a {
   color: var(--third-color);
 }

 .contact-right p {
   color: var(--third-color);
   font-size: 1.5em;
   margin-bottom: 30px;
 }

 .contact-right p span {
   color: var(--first-color);
   font-weight: 700;
 }

 .contact-form input,
 .contact-form textarea {
   border: none;
   color: var(--first-color);
   background: var(--bg-transparent-color);
   font-size: var(--normal-font-size);
   margin-bottom: 20px;
   padding: 20px 40px 40px 20px;
   border-radius: 5px;
   outline: none;
 }

 .contact-form textarea {
   width: 100%;
   resize: none;
 }

 ::placeholder {
   color: var(--first-color);
 }

 .contact-form .first-row input {
   width: 100%;
 }

 .contact-form .second-row {
   display: flex;
   justify-content: space-between;
 }

 .contact-form .second-row input {
   width: 48%;
 }

 .contact-form .btn {
   border: none;
   margin-top: 0;
   border-radius: 5px;
   cursor: pointer;
 }


 /*=======Footer=======*/
 footer {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   background: var(--second-color);
   width: 100%;
   margin-top: 50px;
   padding: 3rem 2rem;
   color: #fff;
 }

 footer a {
   color: #fff;
 }

 .footer-container {
   display: flex;
   justify-content: space-between;
   width: 100%;
   max-width: 1150px;
 }

 .footer-container .about h2 {
   font-size: 3em;
   font-weight: 600;
   background: linear-gradient(to top, transparent 0%, #fff 50%);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   opacity: .8;
 }

 .footer-container .about p {
   font-size: var(--normal-font-size);
   font-weight: 300;
   margin-bottom: 30px;
 }

 .footer-container .info,
 .footer-container .follow {
   display: flex;
   align-items: center;
   flex-direction: column;
 }

 .footer-container .info h3,
 .footer-container .follow h3 {
   font-size: 1.1em;
   font-weight: 500;
   margin-bottom: 30px;
 }

 .footer-container .info ul,
 .footer-container .follow ul {
   display: flex;
 }

 .footer-container .info a {
   margin: 20px;
 }

 .footer-container .follow a {
   font-size: 1.5em;
   margin: 20px;
 }

 .footer-copyright p {
   font-size: var(--normal-font-size);
   font-weight: 300;
   margin-top: 50px;
 }

 /*=======Media query max-width 1070px=======*/
 @media screen and (max-width: 1070px) {

   /*=======Header navigation menu=======*/
   .navigation {
     position: fixed;
     width: 100%;
     height: 100vh;
     top: 0;
     left: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     background: var(--bg-transparent-color-01);
     visibility: hidden;
     opacity: 0;
     transition: .3s ease;
   }

   .navigation.active {
     visibility: visible;
     opacity: 1;
   }

   .nav-items {
     position: relative;
     background: var(--modal-bg-color);
     width: 600px;
     max-width: 600px;
     display: flex;
     align-items: center;
     flex-direction: column;
     margin: 20px;
     padding: 40px;
     border-radius: 10px;
     box-shadow: var(--box-shadow);
     transform: translateY(-50);
     transition: .3s ease;
   }

   .navigation.active .nav-items {
     transform: translateY(0);
   }

   .nav-items a {
     margin: 15px 50px;
   }

   .nav-close-btn {
     position: absolute;
     background: url(../images/close-btn.png)no-repeat;
     filter: var(--color-filter);
     background-size: 12px;
     background-position: center;
     width: 40px;
     height: 40px;
     top: 0;
     right: 0;
     margin: 10px;
     cursor: pointer;
   }


   .nav-menu-btn {
     background: url(../images/menu-btn.png)no-repeat;
     filter: var(--first-color);
     background-size: 30px;
     background-position: center;
     width: 40px;
     height: 40px;
     cursor: pointer;
     display: block;
   }

   /*=======Home section=======*/
   .home .home-container .info {
     font-size: 0.85rem;
     width: 100%;
     row-gap: 20px;
   }

   /*=======About section=======*/
   .about .container .content {
     display: grid;
   }

   .about-img img {
     min-width: 0;
     width: 100%;
   }

   .about-info {
     min-width: 0;
     width: 100%;
   }

   .about-info .professional-list {
     flex-direction: column;
   }

   .about-info .professional-list .list-item {
     justify-content: start;
   }


   /*=======Contact=======*/
   .get-in-touch .contact-card {
     display: grid;
     width: 100%;
   }

   .contact-card .title {
     font-size: 0.8rem;
     line-height: 50px;
   }

   /*=======Nos partenaires=======*/
   .swiper-slide{
    flex-direction: column;
   }
.client-details{
  text-align: center;
}


   /*=======Contact section=======*/
.contact .content{
  flex-direction: column;
  font-size: 0.9rem;
}

.contact .contact-left{
  margin-bottom: 40px;
}

.contact-form .second-row{
  flex-direction: column;
}
.contact-form .second-row input{
  width: 100%;
}


   /*=======Footer=======*/
   footer .footer-container{
    flex-direction: column;
   }

   .footer-container .group, .footer-container .info{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 50px;
   }


   .footer-container .info ul{
    justify-content: center;
    align-items: center;
    flex-direction: column;
   }

   .footer-container .info ul li{
    align-items: center;
    justify-content: center;
    margin: 5px;
   }

   .footer-container .hr{
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 10px 0 22px;
   }
 }

 /*=======Media query max-width 730px=======*/
 @media screen and (max-width: 730px) {
   /*=======Common styles for all sections=======*/
body{
  margin: 5rem 0 0 0;
}

.section-title-01{
  font-size: 3em;
}

.section-title-01{
  font-size: 3em;
  transform: translateY(-65px);
}

   /*=======Home section=======*/
.home .home-container{
  display: grid;
}

.home-container .home-img{
  position: absolute;
}

.home-container .home-img img{
  width: 65%;
  transform: translate(80px, -160px);
}

.home .home-container .info{
  font-size: 0.8rem;
}

.media-icons{
  margin-bottom: 80px;
}
   /*=======Get-in-touch section=======*/
.get-in-touch .contact-card{
  display: grid;
}

.contact-card .title{
  font-size: 0.6rem;
  line-height: 40px;
}

.contact-card .contact-btn .btn{
  font-size: 0.8rem;
}

 }