/*=============== FONT ===============*/
 @font-face {
     font-family: 'Tajawal';
     src: url('../fonts/Tajawal-Light.woff2') format('woff2');
     font-weight: 300;
 }

 @font-face {
     font-family: 'Tajawal';
     src: url('../fonts/Tajawal-Regular.woff2') format('woff2');
     font-weight: 400;
 }

 @font-face {
     font-family: 'Tajawal';
     src: url('../fonts/Tajawal-Medium.woff2') format('woff2');
     font-weight: 500;
 }

 @font-face {
     font-family: 'Tajawal';
     src: url('../fonts/Tajawal-Bold.woff2') format('woff2');
     font-weight: 700;
 }

 @font-face {
     font-family: 'Tajawal';
     src: url('../fonts/Tajawal-Black.woff2') format('woff2');
     font-weight: 900;
 }


 /*=============== VARIABLES CSS ===============*/
 :root {
     --header-height: 3.5rem;

     /*========== Colors ==========*/
     --yellow-light: #fdf7e9;
     --yellow-light-hover: #fcf3de;
     --yellow-light-active: #f9e7ba;
     --yellow-normal: #ebb220;
     --yellow-normal-hover: #d4a01d;

     --green-normal: #164670;
     --green-normal-hover: #143f65;

     --blue-light: #eaf1f7;
     --blue-light-hover: #dfebf4;
     --blue-light-active: #bdd5e7;
     --blue-normal: #2a77b3;
     --blue-normal-hover: #266ba1;

     --light-blue-light: #edf6fa;
     --light-blue-light-active: #c6e2f1;
     --light-blue-normal: #47a3d1;
     --light-blue-normal-hover: #4093bc;



     /*========== Font and typography ==========*/
     --body-font: 'Tajawal', sans-serif;
     --h1-font-size: 64px;
     --h2-font-size: 48px;
     --h3-font-size: 36px;
     --title-size: 32px;
     --paragraph-size: 20px;
     --note-size: 16px;

     /*========== Font weight ==========*/
     --font-regular: 400;
     --font-medium: 500;
     --font-semi-bold: 600;
     --font-bold: 700;

     /*========== z index ==========*/
     --z-tooltip: 10;
     --z-fixed: 100;
 }


 /*=============== BASE ===============*/
 * {
     box-sizing: border-box;
     padding: 0;
     margin: 0;
     font-family: var(--body-font);
 }

 html {
     scroll-behavior: smooth;
 }

 input,
 button {
     outline: none;
     border: none;
 }

 ul {
     list-style: none;
 }

 a {
     text-decoration: none;
 }

 .btn {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 body {
     position: relative;
 }

 /*=============== SCROLL BAR ===============*/
 ::-webkit-scrollbar {
     width: 0.6rem;
     background-color: hsl(24, 32%, 95%);
     border-radius: 0.2rem;
 }

 ::-webkit-scrollbar-thumb {
     background-color: var(--blue-normal);
     border-radius: 10px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background-color: var(--blue-normal-hover);
 }

 /*=============== REUSABLE CSS CLASSES ===============*/
 .container {
     max-width: 1320px;
     margin: 0 auto;
 }

 .section {
     padding-block: 5rem 3rem;
     padding-inline: 3rem;
 }

 /*=============== SINGLE BLOG ===============*/
 .single__blog {
     position: relative;
     padding-block: 65px 45px;

     .single__blog__container {
         .single__blog__content {
             display: flex;
             justify-content: space-between;
             align-items: start;
             width: 100%;

             .single__blog__right {
                 display: flex;
                 justify-content: start;
                 align-items: start;
                 flex-direction: column;
                 gap: 40px;
                 max-width: 750px;
                 width: 100%;

                 .single__blog__header {
                     display: flex;
                     justify-content: start;
                     align-items: start;
                     flex-direction: column;
                     gap: 21px;

                     .span {
                         padding: 4px 12px;
                         font-size: 12px;
                         line-height: 20px;
                         color: white;
                         background-color: var(--blue-normal);
                         font-weight: var(--font-medium);
                         border-radius: 999px;
                     }

                     h1 {
                         font-size: 36px;
                         font-weight: var(--font-bold);
                         color: #383838;
                     }

                     .alessra {
                         display: flex;
                         justify-content: start;
                         align-items: center;
                         gap: 12px;

                         .img__alessra {
                             width: 60px;
                             height: 60px;
                             border-radius: 50%;
                             box-shadow: 0px 1px 2px 0px #0000000D;

                             img {
                                 width: 100%;
                                 height: 100%;
                                 object-fit: cover;
                                 border-radius: 50%;
                             }
                         }

                         .alessra__text {
                             display: flex;
                             justify-content: center;
                             align-items: start;
                             flex-direction: column;
                             gap: 8px;

                             p {
                                 font-size: 18px;
                                 color: #444444;
                                 font-weight: var(--font-medium);
                             }

                             span {
                                 font-size: 16px;
                                 color: #6B6B6B;
                                 font-weight: var(--font-regular);
                             }

                         }
                     }

                     .img__blog {
                         max-width: 100%;
                         width: 100%;
                         height: 383px;
                         border-radius: 12px;
                         overflow: hidden;

                         img {
                             width: 100%;
                             height: 100%;
                             border-radius: 12px;
                             object-fit: cover;
                             box-shadow: 0px 1px 2px 0px #0000000D;
                         }
                     }

                     p {
                         font-size: 16px;
                         line-height: 1.6;
                         color: #464555;
                     }
                 }

                 .single__blog__body {
                     display: flex;
                     justify-content: start;
                     align-items: start;
                     flex-direction: column;
                     gap: 32px;

                     .text__blog {
                         display: flex;
                         justify-content: start;
                         align-items: start;
                         flex-direction: column;
                         gap: 23px;

                         h2 {
                             font-size: 32px;
                             font-weight: var(--font-bold);
                             color: #252641;
                         }

                         h3 {
                             font-size: 24px;
                             font-weight: var(--font-bold);
                             color: #0B1C30;
                         }

                         a {
                             font-size: 12px;
                             color: var(--yellow-normal);
                             font-weight: var(--font-regular);
                             transition: color 0.3s ease;
                             text-decoration: underline;

                             &:hover {
                                 color: var(--yellow-normal-hover);
                             }
                         }

                         .pre {
                             display: flex;
                             justify-content: center;
                             align-items: start;
                             flex-direction: column;
                             gap: 15px;
                             padding: 25.5px 30px;
                             border-right: 4px solid var(--blue-normal);

                             p {
                                 font-size: 20px;
                                 line-height: 1.6;
                                 color: #666666;
                                 font-weight: var(--font-medium);
                             }
                         }

                         .bannar {
                             display: flex;
                             justify-content: center;
                             align-items: center;
                             flex-direction: column;
                             text-align: center;
                             gap: 9px;
                             width: 100%;
                             padding: 27px;
                             border: 1px solid #27C840;
                             box-shadow: 0px 0px 14px 0px #B1AEAE1F;
                             border-radius: 16px;

                             span {
                                 font-size: 22px;
                                 color: #2F2F2F;
                                 font-weight: var(--font-bold);
                             }

                             p {
                                 font-size: 14px;
                                 line-height: 1.6;
                                 color: #444444;
                                 font-weight: var(--font-regular);
                                 width: 60%;
                             }

                             .btn {
                                 color: white;
                                 font-size: 20px;
                                 padding: 11px 26px;
                                 font-weight: var(--font-medium);
                                 border-radius: 8px;
                                 gap: 8px;
                                 background-color: #27C840;
                                 box-shadow: 0px 1px 4px 0px #27C840;
                                 margin-top: 7px;
                                 text-decoration: none;
                             }
                         }

                         .text {
                             display: flex;
                             justify-content: start;
                             align-items: start;
                             flex-direction: column;
                             gap: 15px;

                             span {
                                 font-size: 18px;
                                 color: #464555;
                                 font-weight: var(--font-bold);
                             }

                             p {
                                 font-size: 16px;
                                 line-height: 1.6;
                                 font-weight: var(--font-regular);
                                 color: #464555;
                             }

                             ul,
                             ol {
                                 display: flex;
                                 justify-content: start;
                                 align-items: start;
                                 flex-direction: column;
                                 gap: 1px;
                                 padding-right: 20px;

                                 li {
                                     font-size: 16px;
                                     line-height: 1.6;
                                     color: #464555;
                                 }
                             }

                             ul {
                                 list-style: disc;
                             }

                         }

                         .img {
                             display: flex;
                             justify-content: center;
                             align-items: center;
                             flex-direction: column;
                             gap: 12px;
                             width: 100%;
                             padding: 8px;
                             border-radius: 8px;
                             background-color: var(--blue-light);
                             border: 1px solid var(--light-blue-light-active);

                             img {
                                 max-width: 100%;
                                 width: 100%;
                                 height: 442px;
                                 border-radius: 8px;
                                 object-fit: cover;
                             }

                             .text__img {
                                 font-size: 12px;
                                 font-weight: var(--font-medium);
                                 color: #464555;
                             }
                         }

                     }
                 }
             }

             .single__blog__left {
                 position: sticky;
                 top: -150px;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 flex-direction: column;
                 gap: 32px;
                 padding-top: 200px;

                 .form {
                     display: flex;
                     justify-content: start;
                     align-items: start;
                     flex-direction: column;
                     gap: 32px;
                     max-width: 408px;
                     width: 100%;
                     box-shadow: 0px 1px 12px 0px #00000012;
                     border-radius: 12px;
                     padding: 40px;

                     p {
                         font-size: 24px;
                         color: #444444;
                         font-weight: var(--font-bold);
                     }

                     form {
                         display: flex;
                         justify-content: start;
                         align-items: start;
                         flex-direction: column;
                         gap: 23px;
                         width: 100%;

                         .form__group {
                             display: flex;
                             justify-content: start;
                             align-items: start;
                             flex-direction: column;
                             gap: 7px;
                             width: 100%;

                             label {
                                 font-size: 20px;
                                 color: #1E1E1E;
                                 font-weight: var(--font-regular);
                             }

                             input,
                             textarea {
                                 width: 100%;
                                 padding: 17.5px 16px;
                                 border-radius: 8px;
                                 outline: none;
                                 border: 1px solid transparent;
                                 background-color: #F6F7FB;
                                 font-size: 16px;
                                 color: #444444;
                                 font-weight: var(--font-regular);

                                 &::placeholder {
                                     color: #444444;
                                     font-weight: var(--font-regular);
                                 }

                                 &:focus {
                                     border-color: var(--blue-normal);
                                 }
                             }

                             textarea {
                                 margin-top: 10px;
                                 resize: none;
                                 height: 141px;
                             }
                         }

                         button {
                             width: 100%;
                             padding: 14px;
                             background-color: var(--blue-normal);
                             color: white;
                             font-size: 20px;
                             font-weight: var(--font-medium);
                             border-radius: 8px;
                             transition: background-color 0.3s ease;
                             cursor: pointer;

                             &:hover {
                                 background-color: var(--blue-normal-hover);
                             }
                         }
                     }
                 }

                 .group__blogs {
                     display: flex;
                     justify-content: start;
                     align-items: start;
                     flex-direction: column;
                     gap: 40px;
                     width: 100%;
                     box-shadow: 0px 10px 60px 0px #262D7614;
                     border-radius: 12px;
                     padding-block: 34px 40px;
                     padding-inline: 27.5px;
                     max-width: 408px;
                     width: 100%;

                     .last__blogs {
                         display: flex;
                         justify-content: start;
                         align-items: start;
                         flex-direction: column;
                         gap: 28px;
                         width: 100%;

                         .span {
                             font-size: 24px;
                             font-weight: var(--font-medium);
                             padding-bottom: 8px;
                             border-bottom: 1px solid #EEEEEF;
                             width: 100%;
                         }

                         .item {
                             display: flex;
                             justify-content: start;
                             align-items: center;
                             gap: 16px;

                             .img {
                                 width: 64px;
                                 height: 64px;
                                 border-radius: 4px;

                                 img {
                                     width: 100%;
                                     height: 100%;
                                     object-fit: cover;
                                     border-radius: 4px;
                                 }
                             }

                             .text {
                                 display: flex;
                                 justify-content: start;
                                 align-items: start;
                                 flex-direction: column;
                                 gap: 7px;
                                 width: 70%;

                                 h3 {
                                     font-size: 16px;
                                     color: #1E1E1E;
                                     font-weight: var(--font-bold);
                                 }

                                 span {
                                     font-size: 14px;
                                     color: #757575;
                                     font-weight: var(--font-regular);
                                 }
                             }
                         }

                         .span__yellow {
                             color: var(--yellow-normal-hover);
                         }

                         .span__blue {
                             color: var(--blue-normal);
                         }
                     }
                 }
             }
         }
     }

     .back__btn {
         position: absolute;
         top: 57px;
         left: 77px;
         border-radius: 999px;
         width: 176px;
         height: 48px;
         background-color: #EEEEEE;
         font-size: 20px;
         font-weight: var(--font-medium);
         color: #6B6B6B;
         gap: 15px;

         i {
             margin-top: 5px;
             font-size: 14px;
         }
     }

     .share {
         position: fixed;
         right: 25px;
         top: 67px;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         gap: 105px;
         color: #9CA3AA;
         z-index: 55;

         .icons {
             display: flex;
             justify-content: center;
             align-items: center;
             flex-direction: column;
             gap: 24px;
             font-size: 25px;

             button {
                 background-color: transparent;
                 cursor: pointer;
                 color: #9CA3AA;
             }
         }

         span {
             font-size: 15px;
             font-weight: var(--font-bold);
             color: #9CA3AA;
             transform: rotate(90deg);
         }

         &::after {
             position: absolute;
             content: '';
             width: 1.24px;
             height: 60px;
             background-color: #C7C4D8;
             top: 58%;
             left: 50%;
             transform: translate(-50%, -50%);
         }

     }
 }

 /*=============== OUR BLOG ===============*/
 .our__blog {
     padding-block: 65px;

     .our__blog__container {

         .our__blog__content {
             display: flex;
             justify-content: center;
             align-items: start;
             flex-direction: column;
             gap: 32px;

             h2 {
                 font-size: 32px;
                 font-weight: var(--font-bold);
                 color: #0B1C30;
             }

             .cards {
                 display: grid;
                 grid-template-columns: repeat(3, 1fr);
                 column-gap: 24px;
                 row-gap: 55px;
                 width: 100%;

                 .card {
                     display: flex;
                     justify-content: center;
                     align-items: start;
                     flex-direction: column;
                     width: 388px;
                     background-color: white;
                     border-radius: 12px;
                     box-shadow: 0px 1px 32px 0px #00000026;
                     transition: transform 0.3s ease-in-out;

                     .card__img {
                         width: 100%;
                         height: 192px;
                         overflow: hidden;
                         border-top-left-radius: 12px;
                         border-top-right-radius: 12px;

                         img {
                             width: 100%;
                             height: 100%;
                             object-fit: cover;
                             border-top-left-radius: 12px;
                             border-top-right-radius: 12px;
                         }
                     }

                     .card__content {
                         display: flex;
                         justify-content: center;
                         align-items: start;
                         flex-direction: column;
                         gap: 8px;
                         padding: 24px;

                         span {
                             font-size: 13px;
                             font-weight: var(--font-medium);
                             color: var(--blue-normal);
                             margin-bottom: 9px;
                         }

                         h3 {
                             display: -webkit-box;
                             -webkit-line-clamp: 2;
                             -webkit-box-orient: vertical;
                             overflow: hidden;
                             font-size: var(--paragraph-size);
                             font-weight: var(--font-bold);
                             color: #1E1E1E;
                         }

                         p {
                             display: -webkit-box;
                             -webkit-line-clamp: 2;
                             -webkit-box-orient: vertical;
                             overflow: hidden;
                             font-size: var(--note-size);
                             font-weight: var(--font-regular);
                             color: #6B6B6B;
                         }

                         .link {
                             margin-top: 15.5px;
                             gap: 5px;
                             font-size: var(--note-size);
                             font-weight: var(--font-medium);
                             color: var(--yellow-normal);
                         }
                     }

                     &:hover {
                         transform: translateY(-5px);
                     }
                 }
             }
         }
     }
 }

 /*==================== FOOTER ====================*/
 .footer {
     background-color: #F8FAFC;
     padding-top: 100px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     gap: 66px;

     .footer__container {
         width: 100%;

         .footer__content {
             display: flex;
             justify-content: center;
             align-items: center;
             flex-direction: column;
             gap: 100px;
             width: 100%;

             .bannar {
                 position: relative;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 padding: 80px 20px 40px 20px;
                 background-color: var(--blue-normal);
                 width: 90%;
                 border-radius: 20px;
                 overflow: hidden;
                 margin-bottom: 15px;

                 .bannat__content {
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     flex-direction: column;
                     text-align: center;
                     gap: 35px;

                     h2 {
                         font-size: var(--h2-font-size);
                         font-weight: var(--font-bold);
                         color: white;
                         width: 90%;
                     }

                     a {
                         display: flex;
                         justify-content: center;
                         align-items: center;
                         width: 420px;
                         height: 52px;
                         background-color: var(--yellow-normal);
                         border-radius: 8px;
                         color: white;
                         font-size: 24px;
                         font-weight: var(--font-medium);
                         transition: background-color 0.3s ease;

                         &:hover {
                             background-color: var(--yellow-normal-hover);
                         }
                     }

                 }

                 &::before {
                     position: absolute;
                     content: '';
                     width: 245.59387484535858px;
                     height: 245.59387484535858px;
                     background-color: transparent;
                     border: 7px solid #F1F5F9;
                     border-radius: 50%;
                     top: -45%;
                     left: -10%;
                     opacity: 0.2;
                     z-index: 0;
                 }

                 &::after {
                     position: absolute;
                     content: '';
                     width: 245.59387484535858px;
                     height: 245.59387484535858px;
                     background-color: transparent;
                     border: 7px solid white;
                     border-radius: 50%;
                     bottom: -45%;
                     right: -10%;
                     z-index: 0;
                 }
             }

             .footer__links {
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 gap: 47px;

                 a {
                     font-size: 21px;
                     font-weight: var(--font-medium);
                     color: #696984;
                     transition: color 0.3s ease;

                     &:hover {
                         color: var(--blue-normal);
                     }

                 }
             }

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

                 .mail__num {
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     gap: 13px;

                     .item {
                         display: flex;
                         justify-content: center;
                         align-items: center;
                         gap: 13px;

                         .icon {
                             display: flex;
                             justify-content: center;
                             align-items: center;
                             width: 41px;
                             height: 41px;
                             border: 1px solid #FCF3DE;
                             background-color: var(--yellow-normal);
                             border-radius: 50%;
                             color: white;
                             font-size: 22px;
                         }

                         a {
                             font-size: var(--paragraph-size);
                             font-weight: var(--font-medium);
                             color: #696984;
                             transition: color 0.3s ease;

                             &:hover {
                                 color: var(--blue-normal);
                             }
                         }
                     }
                 }

                 .social {
                     display: flex;
                     justify-content: center;
                     align-items: center;

                     a {
                         display: flex;
                         justify-content: center;
                         align-items: center;
                         width: 57.653629302978516px;
                         height: 57.653629302978516px;
                         border: 4px solid #FBFBFB;
                         background-color: var(--yellow-normal);
                         border-radius: 50%;
                         color: white;
                         font-size: var(--title-size);
                         transition: background-color 0.3s ease;

                         &:nth-child(1) {
                             background-color: var(--light-blue-normal);
                             margin-left: -12px;

                             &:hover {
                                 background-color: var(--light-blue-normal-hover);
                             }
                         }

                         &:nth-child(2) {
                             background-color: var(--blue-normal);
                             margin-left: -12px;

                             &:hover {
                                 background-color: var(--blue-normal-hover);
                             }
                         }

                         &:nth-child(3) {
                             background-color: var(--light-blue-normal-hover);

                             &:hover {
                                 background-color: var(--light-blue-normal);
                             }
                         }
                     }
                 }
             }
         }
     }

     .footer__copyright {
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         gap: 7px;
         padding-block: 18px 9px;
         background: linear-gradient(90deg, #2B669A 0%, #4093BC 100%);

         a {
             width: 147.8184px;
             height: 18.1514px;

             img {
                 width: 100%;
                 height: 100%;
             }
         }

         p {
             font-size: var(--note-size);
             font-weight: var(--font-medium);
             color: white;
         }
     }
 }

 /*=============== RESPONSIVE ===============*/
 @media (max-width: 1200px) {

     /*=============== SINGLE BLOG ===============*/
     .single__blog {
         .single__blog__container {
             .single__blog__content {
                 gap: 35px;

                 .single__blog__right {
                     max-width: 680px;

                     .single__blog__header {
                         h1 {
                             font-size: 32px;
                         }

                         .img__blog {
                             height: 350px;
                         }
                     }
                 }

                 .single__blog__left {

                     .form,
                     .group__blogs {
                         max-width: 360px;
                         padding-inline: 28px;
                     }
                 }
             }
         }

         .back__btn {
             left: 40px;
         }
     }

     /*=============== OUR BLOG ===============*/
     .our__blog {
         padding-block: 60px;

         .our__blog__container {
             .our__blog__content {
                 gap: 30px;

                 h2 {
                     font-size: 30px;
                 }

                 .cards {
                     gap: 24px;

                     .card {
                         width: 100%;
                     }
                 }
             }
         }
     }

     /*==================== FOOTER ====================*/
     .footer {
         padding-top: 90px;
         gap: 55px;

         .footer__container {
             padding-inline: 2rem;

             .footer__content {
                 gap: 80px;

                 .bannar {
                     padding: 70px 20px 35px;

                     .bannat__content {
                         gap: 28px;

                         h2 {
                             width: 100%;
                             font-size: calc(var(--h2-font-size) * 0.95);
                         }

                         a {
                             width: 360px;
                             height: 50px;
                             font-size: 20px;
                         }
                     }
                 }

                 .footer__links {
                     gap: 35px;

                     a {
                         font-size: 19px;
                     }
                 }

                 .footer__media {
                     .social {
                         a {
                             width: 52px;
                             height: 52px;
                         }
                     }
                 }
             }
         }
     }
 }


 @media (max-width: 991px) {

     /*=============== SINGLE BLOG ===============*/
     .single__blog {
         padding-block: 60px 45px;

         .single__blog__container {
             .single__blog__content {
                 flex-direction: column;
                 gap: 50px;

                 .single__blog__right {
                     max-width: 100%;

                     .single__blog__header {
                         h1 {
                             font-size: 30px;
                         }
                     }
                 }

                 .single__blog__left {
                     position: relative;
                     top: 0;
                     padding-top: 0;
                     width: 100%;

                     .form,
                     .group__blogs {
                         max-width: 100%;
                     }

                     .group__blogs {
                         flex-direction: row;
                     }
                 }
             }
         }

         .back__btn {
             top: 40px;
         }

         .share {
             display: none;
         }
     }

     /*=============== OUR BLOG ===============*/
     .our__blog {
         padding-block: 55px;

         .our__blog__container {
             .our__blog__content {
                 gap: 28px;

                 h2 {
                     font-size: 28px;
                 }

                 .cards {
                     grid-template-columns: repeat(2, 1fr);
                     row-gap: 35px;

                     .card {
                         width: 100%;
                     }
                 }
             }
         }
     }

     /*==================== FOOTER ====================*/
     .footer {
         padding-top: 80px;
         gap: 45px;

         .footer__container {
             .footer__content {
                 gap: 73px;

                 .bannar {
                     width: 100%;
                     padding: 60px 18px 30px;
                     margin-bottom: 12px;

                     .bannat__content {
                         h2 {
                             font-size: 24px;
                         }

                         a {
                             width: 270px;
                             height: 39px;
                             font-size: var(--note-size);
                         }
                     }

                     &::before,
                     &::after {
                         width: 168.3267629201328px;
                         height: 168.3267629201328px;
                     }
                 }

                 .footer__links {
                     flex-wrap: wrap;
                     gap: 35px;

                     a {
                         font-size: var(--note-size);
                     }
                 }

                 .footer__media {
                     gap: 25px;

                     .social {
                         a {
                             width: 40px;
                             height: 40px;
                             font-size: 18px;
                             border: 3px solid #FBFBFB;
                         }
                     }

                     .mail__num {
                         gap: 10px;

                         .item {

                             a {
                                 font-size: 15px;
                             }

                             .icon {
                                 width: 31px;
                                 height: 31px;
                                 font-size: 16px;
                             }
                         }
                     }
                 }
             }
         }
     }
 }


 @media (max-width: 768px) {

     /*=============== SINGLE BLOG ===============*/
     .single__blog {
         padding-block: 50px 40px;

         .single__blog__container {
             .single__blog__content {
                 gap: 40px;

                 .single__blog__right {
                     gap: 32px;

                     .single__blog__header {
                         gap: 18px;

                         h1 {
                             font-size: 26px;
                         }

                         .alessra {
                             .img__alessra {
                                 width: 50px;
                                 height: 50px;
                             }

                             .alessra__text {
                                 p {
                                     font-size: 16px;
                                 }

                                 span {
                                     font-size: 14px;
                                 }
                             }
                         }

                         .img__blog {
                             height: 300px;
                         }

                         p {
                             font-size: 14px;
                         }
                     }

                     .single__blog__body {
                         gap: 26px;

                         .text__blog {
                             gap: 20px;

                             h2 {
                                 font-size: 26px;
                             }

                             h3 {
                                 font-size: 21px;
                             }

                             .pre {
                                 padding: 22px 24px;

                                 p {
                                     font-size: 17px;
                                 }
                             }

                             .bannar {
                                 padding: 24px 18px;

                                 span {
                                     font-size: 19px;
                                 }

                                 p {
                                     width: 100%;
                                     font-size: 13px;
                                 }

                                 .btn {
                                     font-size: 17px;
                                 }
                             }

                             .text {
                                 span {
                                     font-size: 16px;
                                 }

                                 p {
                                     font-size: 14px;
                                 }

                                 ul,
                                 ol {
                                     li {
                                         font-size: 14px;
                                     }
                                 }
                             }

                             .img {
                                 img {
                                     height: 330px;
                                 }
                             }
                         }
                     }
                 }

                 .single__blog__left {
                     gap: 28px;

                     .form {
                         padding: 30px;

                         p {
                             font-size: 21px;
                         }

                         form {
                             .form__group {
                                 label {
                                     font-size: 17px;
                                 }
                             }

                             button {
                                 font-size: 17px;
                             }
                         }
                     }
                 }
             }
         }
     }

     /*=============== OUR BLOG ===============*/
     .our__blog {
         padding-block: 45px;

         .our__blog__container {
             .our__blog__content {
                 gap: 24px;

                 h2 {
                     font-size: 25px;
                 }

                 .cards {
                     column-gap: 18px;
                     row-gap: 28px;

                     .card {
                         .card__img {
                             height: 170px;
                         }

                         .card__content {
                             padding: 20px;

                             span {
                                 font-size: 10px;
                             }

                             h3 {
                                 font-size: 15px;
                             }

                             p {
                                 font-size: 12px;
                             }

                             .link {
                                 font-size: 12px;
                             }
                         }
                     }
                 }
             }
         }
     }

     /*==================== FOOTER ====================*/
     .footer {
         padding-top: 65px;
         gap: 35px;

         .footer__container {
             .footer__content {
                 gap: 65px;

                 .bannar {
                     padding: 50px 15px 25px;

                     .bannat__content {
                         gap: 23px;

                         h2 {
                             font-size: var(--paragraph-size);
                             line-height: 1.6;
                         }

                         a {
                             width: 100%;
                             max-width: 225px;
                             height: 39px;
                             font-size: 14px;
                         }
                     }

                     &::before,
                     &::after {
                         width: 104.89582824707031px;
                         height: 104.89582824707031px;
                     }
                 }

                 .footer__links {
                     gap: 35px;

                     a {
                         font-size: 14px;
                     }
                 }

                 .footer__media {

                     .mail__num {
                         gap: 15px;

                         .item {
                             gap: 9px;

                             .icon {
                                 width: 28px;
                                 height: 28px;
                                 font-size: 15px;
                             }

                             a {
                                 font-size: 14px;
                             }
                         }
                     }

                     .social {
                         a {
                             width: 35px;
                             height: 35px;
                             font-size: 18px;
                         }
                     }
                 }
             }
         }

         .footer__copyright {
             padding: 13px 15px;

             a {
                 width: 110px;
                 height: 14px;
             }

             p {
                 font-size: 12px;
             }
         }
     }
 }


 @media (max-width: 576px) {

     /*=============== SINGLE BLOG ===============*/
     .single__blog {
         padding-block: 40px 35px;

         .single__blog__container {
             .single__blog__content {
                 gap: 35px;

                 .single__blog__right {
                     gap: 28px;

                     .single__blog__header {
                         h1 {
                             font-size: 23px;
                         }

                         .img__blog {
                             height: 220px;
                         }
                     }

                     .single__blog__body {
                         .text__blog {
                             h2 {
                                 font-size: 22px;
                             }

                             h3 {
                                 font-size: 18px;
                             }

                             .pre {
                                 padding: 18px;
                             }

                             .bannar {
                                 .btn {
                                     width: 100%;
                                     justify-content: center;
                                     font-size: 15px;
                                 }
                             }

                             .img {
                                 img {
                                     height: 230px;
                                 }
                             }
                         }
                     }
                 }

                 .single__blog__left {
                     .form {
                         padding: 24px 18px;

                         p {
                             font-size: 18px;
                         }

                         form {
                             .form__group {
                                 label {
                                     font-size: 15px;
                                 }

                                 input,
                                 textarea {
                                     font-size: 14px;
                                     padding: 14px;
                                 }
                             }

                             button {
                                 font-size: 15px;
                             }
                         }
                     }

                     .group__blogs {
                         padding-inline: 18px;
                         flex-direction: column;

                         .last__blogs {
                             .span {
                                 font-size: 20px;
                             }

                             .item {
                                 .text {
                                     h3 {
                                         font-size: 14px;
                                     }

                                     span {
                                         font-size: 12px;
                                     }
                                 }
                             }
                         }
                     }
                 }
             }
         }

         .back__btn {
             width: 130px;
             height: 38px;
             font-size: 16px;
         }
     }

     /*=============== OUR BLOG ===============*/
     .our__blog {
         padding-block: 35px;

         .our__blog__container {
             .our__blog__content {
                 gap: 22px;

                 h2 {
                     font-size: 22px;
                 }

                 .cards {
                     grid-template-columns: 1fr;
                     row-gap: 24px;

                     .card {
                         width: 100%;

                         .card__img {
                             height: 190px;
                         }

                         .card__content {
                             padding: 18px;

                             span {
                                 font-size: 11px;
                             }

                             h3 {
                                 font-size: 16px;
                             }

                             p {
                                 font-size: 12px;
                             }

                             .link {
                                 font-size: 12px;
                             }
                         }
                     }
                 }
             }
         }
     }

     /*==================== FOOTER ====================*/
     .footer {
         padding-top: 55px;
         gap: 28px;

         .footer__container {
             .footer__content {
                 gap: 45px;

                 .bannar {
                     padding: 40px 12px 20px;

                     .bannat__content {
                         gap: 23px;
                         z-index: 1;

                         h2 {
                             font-size: 20px;
                         }

                         a {
                             max-width: 80%;
                             height: 32px;
                             font-size: 14px;
                         }
                     }

                     &::before,
                     &::after {
                         width: 90px;
                         height: 90px;
                     }

                     &::before {
                         top: -40%;
                         left: -19%;
                     }

                     &::after {
                         bottom: -40%;
                         right: -19%;
                     }
                 }

                 .footer__links {
                     row-gap: 22px;
                     column-gap: 35px;

                     a {
                         font-size: 12px;
                     }
                 }

                 .footer__media {
                     flex-direction: column-reverse;

                     .mail__num {
                         gap: 17px;

                         .item {
                             gap: 9px;

                             .icon {
                                 width: 28px;
                                 height: 28px;
                                 font-size: 15px;
                             }

                             a {
                                 font-size: 12px;
                             }
                         }
                     }

                     .social {
                         a {
                             width: 32px;
                             height: 32px;
                             font-size: 14px;

                             &:nth-child(2) {
                                 margin-left: -7px;
                             }

                             &:nth-child(3) {
                                 margin-left: -7px;
                             }

                         }
                     }
                 }
             }
         }

         .footer__copyright {
             padding-block: 13px 8px 7px 8px;

             p {
                 font-size: 12px;
             }
         }
     }

     .section {
         padding-inline: 1rem;
     }
 }