*{box-sizing: border-box; outline: none; border: none;}
:root{
--bg-color:#e6ebf2;
--white-color:#ffffff;
--text-color:#202226;
--main-color:#1a73e9;
--second-color:#72a4e5;
--shadow-color:rgba(0, 0, 0, 0.2);
--error-bg: #fff0f1;
--error-border: #ff4d4f;
--error-text: #d32f2f;
--h1-size: clamp(2.5rem, 2.5vw + 1rem, 3.5rem);
--h2-size: clamp(2rem, 2vw + 0.8rem, 2.5rem);
--h3-size: clamp(1.8rem, 1.5vw + 0.6rem, 2rem);
--body-size: clamp(1.6rem, 1vw + 0.2rem, 2rem);
--fs-special: clamp(1.4rem, 0.8vw + 0.4rem, 1.6rem); 
}
@font-face {
font-family: 'Manrope';
src: url('../fonts/Manrope-VariableFont_wght.woff2') format('woff2-variations');
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('../fonts/PlusJakartaSans-VariableFont_wght.woff2') format('woff2-variations');
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('../fonts/PlusJakartaSans-Italic-VariableFont_wght.woff2') format('woff2-variations');
font-weight: 200 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('../fonts/SpaceGrotesk-VariableFont_wght.woff2') format('woff2-variations');
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
.line-clamp{
overflow: hidden; 
display: -webkit-box; 
-webkit-box-orient: vertical; 
line-clamp: 3; 
-webkit-line-clamp: 3;
}
.dark-mode{--bg-color:#0b061f; --text-color:#fdfdfd; --shadow-color:rgba(0, 0, 0, 0.7);}
html{scroll-behavior: smooth; overflow-x: hidden; font-size: 50%;}
html, body {height: 100%; margin: 0; padding: 0;}
body{
width: 100%;
max-width: 1600px;
margin-inline: auto;
display: flex;
flex-direction: column;
min-height: 100dvh;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: var(--body-size); 
font-optical-sizing: auto;
background-color: var(--bg-color); 
color: var(--text-color);
transition: background-color 0.5s ease, color 0.5s ease;
}
main{flex: 1;}
h1{font-family: "Manrope", sans-serif; font-size: var(--h1-size);} 
h2{font-family: "Manrope", sans-serif; font-size: var(--h2-size);} 
h3{font-family: "Manrope", sans-serif; font-size: var(--h3-size);}
.section-accent{
font-family: "Space Grotesk", sans-serif; 
font-style: italic;
font-weight: 600;
text-transform: capitalize;
font-size: var(--fs-special);
color: var(--main-color);
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.section-accent .line-style{
width: 6rem;
height: 2px;
background-color: var(--main-color);
border-radius: 8px;
}
a{text-decoration: none; white-space: nowrap;} 
h1, h2, h3, h4, h5, h6{text-transform: capitalize;}
h1, h2{text-wrap: balance;}
h1{font-weight: 800; color: var(--main-color);}
h2{font-weight: 700; max-width: 1000px;}
h3{color: var(--main-color);}
h3, a{font-weight: 600;}
.main-color{color: var(--main-color); font-weight: 700; text-transform: capitalize;}
.bold-text{font-weight: 700; text-transform: capitalize;}
p{line-height: 1.5; text-wrap: pretty;}
/* ================ HEADER ================ */
.my-header-home .logo-link img,
.my-header .logo-link img{width: 6rem;}
.my-header-home,
.my-header{
width: 100%; 
max-width: 1600px;
max-height: 100px;
padding: 1rem 5%;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
transition: all 0.3s ease-in-out;
}
:target{scroll-margin-top: 120px;}
.my-header-home.sticky,
.my-header.sticky{
background-color: var(--bg-color);
border-bottom: 4px solid var(--bg-color);
box-shadow: 0 0 8px var(--shadow-color);
}
.my-header-home .left,
.my-header .left{display: flex; align-items: center;}
.my-header-home #darkMode-icon,
.my-header #darkMode-icon{
font-size: 2.8rem;
color: var(--main-color);
margin-left: 2rem;
transition: transform 0.3s ease;
}
.my-header-home #darkMode-icon.bx-sun,
.my-header #darkMode-icon.bx-sun {transform: rotate(90deg);}
.my-header-home .my-nav,
.my-header .my-nav{
position:absolute;
top: 0;
left: -100%;
width: 80%;
height: 100dvh;
background-color: var(--bg-color);
opacity: 0.9;
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
padding: 10rem 3%;
border-right: .1rem solid var(--shadow-color);
box-shadow: 0 .5rem 1rem var(--shadow-color);
transition: all .5s ease-in-out;
}
.my-header-home .my-nav.show-menu,
.my-header .my-nav.show-menu{left: 0;}
.my-header-home .my-nav ul,
.my-header .my-nav ul{list-style: none;}
.my-header-home .my-nav ul li,
.my-header .my-nav ul li{border-bottom: 1px solid var(--text-color);}
.my-header-home .my-nav ul li a,
.my-header .my-nav ul li a{
display: inline-block;
width: 100%;
height: 100%;
padding-top: 2.5rem;
color: var(--text-color);
text-transform: capitalize;
}
.my-header-home #menu-icon,
.my-header #menu-icon{
font-size: 3.8rem; 
padding: 2rem; 
color: var(--text-color); 
transition: transform 0.3s ease;
}
.my-header #menu-icon{color: var(--bg-color);}
.my-header.sticky #menu-icon{color: var(--text-color);}
.my-header-home #menu-icon.bx-x,
.my-header #menu-icon.bx-x {transform: rotate(90deg);}
/* ================ HOME ================ */
.main-container-index .my-home{
width: 100%; 
min-height: 100dvh;
display: flex;
align-items: center;
padding: 120px 0 5%;
} 
.main-container-index .my-home .description{
margin-top: 100px;
padding: 0 5%;
max-width: 55rem;
}
.main-container-index .my-home .description h1,
.main-container-index .my-home .description h2,
.main-container-index .my-home .description p{margin-bottom: 2rem;}
.main-container-index .my-home .description .social-media-container{
display: flex; 
justify-content: space-evenly;
margin-bottom: 4rem;
}
.main-container-index .my-home .description .social-media-container a{
width: 2rem;
height: 2rem;
padding: 1.5em;
border: 2px solid var(--main-color);
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
}
.main-container-index .my-home .description .social-media-container a i{font-size: 1.5em;}
/* ALL SECTION BUTTONS */
.my-home .description .request-a-free-quote,
.section-about .about-item a,
.section-services .cta-buttons .pricing,
.section-services .cta-buttons .all-services,
.section-blog .blog-read-all a,
.section-portfolio .portfolio-read-more a,
.section-contact .contact-form-container #contactForm button,
.my-footer .footer-lead button,
.main-container-about .about-us a,
.main-container-portfolio .header-portfolio a,
.main-container-services .header-services a,
.main-container-testimony .header-testimony a,
.main-container-blog .header-blog a,
.main-container-contact .header-contact a{
padding: 1em 2em;
width: min-content;
margin-inline: auto;
background-color: var(--main-color);
color: var(--white-color);
border-radius: 5px;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
text-transform: capitalize;
}
.main-container-index .my-home .img-home{display: none;}
.main-container-index .my-home .service-container{
position: absolute;
top: 50%;
right: max(0px, calc((100vw - 1600px) / 2));
transform: translateY(-50%);
width: 768px;
height: 768px;
overflow: hidden;
pointer-events: none;
}
.main-container-index .service-container .service-box{
position: absolute;
top: 0;
right: 0;
width: 768px;
height: 768px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
animation: serviceRotate 13s ease-out infinite;
}
@keyframes serviceRotate{
0%, 20%{
    transform: rotate(0deg);
}
25%, 45%{
    transform: rotate(-90deg);
}
50%, 70%{
    transform: rotate(-180deg);
}
75%, 95%{
    transform: rotate(-270deg);
}
100%{
    transform: rotate(-360deg);
}
}
.main-container-index .service-container .service-box .service{
position: absolute;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: rotate(calc(360deg / 4 * var(--i)));
transform-origin: 384px;
background: var(--bg-color);
color: var(--main-color);
padding: 13px 5px;
}
.main-container-index .service-container .service-box .circle{
width: 600px;
height: 600px;
border: 3px solid var(--main-color);
border-radius: 50%;
z-index: -1;
}
.main-container-index .service-container .overlay{    
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 384px solid var(--main-color);
border-right: 384px solid var(--main-color);
border-bottom: 384px solid var(--main-color);
border-left: 384px solid transparent;
}
.main-container-index .service-container .service-box .service h3{
font-family: "Space Grotesk", sans-serif;
line-height: 1; 
font-size: var(--h3-size);
}
/* ALL INDEX SECTION PADDING */
.section-about,
.section-services,
.section-portfolio, 
.section-testimonies, 
.section-blog,
.section-contact{padding: 10% 5%;}
.section-about .about-container .about-photo{
margin-inline: auto;
overflow-x: hidden;
}
.section-about .about-container .about-photo figcaption{
margin-bottom: 6em; 
font-size: 1.4rem;
text-align: center;
}
.section-about .about-container .about-photo img{width: 100%; object-fit: cover;}
/* ALL SECTION TITLES */
.section-about h2,
.section-services h2,
.section-portfolio h2,
.section-testimonies h2,
.section-blog h2,
.section-contact h2{margin: 0; padding: 2rem 0;}
.section-about .about-item a{display: inline-block; margin: 1em 0;}
/* ALL SECTION CONTAINERS */
.section-services .services-container,
.section-portfolio .portfolio-container,
.section-testimonies .testimonies-container,
.section-blog .blog-container,
.section-contact .contact-form-container{margin-top: 3rem;}
.section-services .services-container,
.section-blog .blog-container,
.section-portfolio .portfolio-container{
display: flex;
flex-direction: column; 
gap: 2rem;
}
.section-services .services-container .services-item,
.section-blog .blog-container .blog-article,
.section-portfolio .portfolio-container .portfolio-item,
.section-contact .contact-form-container{
width: 100%;
max-width: 550px;
margin-inline: auto;
padding: 1.5em;
border: 2px solid var(--bg-color);
border-radius: 10px;
box-shadow: 0 0 8px var(--shadow-color);
}
.section-services .services-container .services-item img,
.section-blog .blog-container .blog-article img,
.section-portfolio .portfolio-container .portfolio-item img{
width: 100%;
object-fit: cover;
}
.section-services .cta-buttons,
.section-blog .blog-read-all,
.section-portfolio .portfolio-read-more{
margin-top: 4rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.section-services .cta-buttons .all-services{
border: 2px solid var(--main-color);
color: var(--text-color);
background-color: transparent;
}
.section-portfolio .portfolio-container .portfolio-item img{border-radius: 10px;}
.section-portfolio .portfolio-container .portfolio-item h3{font-size: var(--fs-special);}
.section-portfolio .portfolio-container .portfolio-item .portfolio-title{
display: flex;
justify-content: space-between;
align-items: center;
}
.section-portfolio .portfolio-container .portfolio-item .portfolio-title .like-btn{
display: flex;
align-items: center;
padding: 0.3em 1em;
background-color: rgba(32, 34, 38, 0.1);
border-radius: 5px;
}
.section-portfolio .portfolio-container .portfolio-item .portfolio-title .like-btn i{margin-right: 0.3em;}
.section-portfolio .portfolio-container .portfolio-item .portfolio-title .like-btn i,
.section-portfolio .portfolio-container .portfolio-item .portfolio-title .like-btn .like-count{color: var(--text-color);}
.section-portfolio .portfolio-container .portfolio-item .portfolio-title .like-btn.liked{color: var(--main-color);}
.section-testimonies .testimonies-container .testimonies-carousel,
.section-testimonies .testimonies-container .testimonial-item{
width: 100%;
max-width: 550px;
margin-inline: auto;
}
.section-testimonies .testimonies-container .testimonial-item .img{
width: 10rem;
height: 10rem;
border: 10px solid var(--main-color);
border-radius: 10rem;
margin-bottom: 2em;
margin-inline: auto;
position: relative;
}
.section-testimonies .testimonies-container .testimonial-item .img .testimonial-author{
position: absolute;
top: 135%;
left: 50%;
transform: translateX(-50%);
width: max-content;
white-space: nowrap;
text-align: center;
}
.section-testimonies .testimonies-container .testimonial-item .img img{
width: 100%; 
height: auto; 
object-fit: cover; 
border-radius: 10rem;
}
.section-testimonies .testimonies-container .testimonial-item blockquote{
background-color: var(--main-color);
color: var(--white-color);
border-radius: 5px;
padding: 2em 1em;
margin: 5em 0 3em 0;
}
.section-testimonies .testimonies-container .testimonial-item blockquote div{
display: flex;
align-items: baseline;
margin-bottom: 0.5em;
}
.section-testimonies .testimonies-container .testimonial-item blockquote div i{font-size: 2em;}
.section-testimonies .testimonies-container .testimonial-item blockquote div .hr{
width: 100%;
height: 2px;
border-radius: 3px;
background-color: var(--white-color);
}
.section-testimonies .testimonies-container .swiper-button-prev,
.section-testimonies .testimonies-container .swiper-button-next {opacity: 0; visibility: hidden;}
.section-contact .contact-form-container{padding: 2em 0.5em;}
.section-contact .contact-form-container #contactForm button{width: 100%;}
#contactForm label span{color: var(--error-text);}
body.dark-mode #contactForm .input-group{color: #0b061f;}
#contactForm input,
#contactForm textarea,
#contactForm button{width: 100%;}
#contactForm input,
#contactForm textarea{
font-size: 16px;
padding: 1em 2.5em; 
border-radius: 5px;
border: 1px solid #ddd;
transition: all 0.2s ease;
}
#contactForm input:focus,
#contactForm textarea:focus {
border-color: var(--main-color, #4f46e5);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
outline: none;
transform: translateY(-1px);
}
.error-text {font-size: 1em; display: block;}
.is-invalid{
border: 2px solid var(--error-border);
outline: 1px solid var(--error-border);
background-color: var(--error-bg);
transition: all 0.25s ease;
}
/* Message d'erreur */
.invalid-feedback {
display: block;
color: var(--error-text);
margin-top: 0.5em;
animation: fadeIn 0.3s ease;
}
#contactForm .form-grid {
border: none;
padding: 0;
margin: 0;
margin-bottom: 2em;
display: grid;
grid-template-columns: 1fr;
gap: 1.5em;
}
#contactForm .form-grid legend {
margin-bottom: 1rem;
text-transform: capitalize;
font-weight: bold;
}
#contactForm .form-grid .form-group{    
display: flex;
flex-direction: column;
gap: 0.4em;
}
#contactForm .form-grid .form-group .input-group{position: relative;}
#contactForm .form-grid .form-group .input-group i{
position: absolute;
top: 1em;
left: 1em;
font-size: 2rem;
}
.iti,
.iti input {width: 100%;}
.iti {position: relative;}
.iti__flag-container {
display: flex;
align-items: center;
padding-right: 4.5em !important;
}
.iti-mobile .iti__country-list {
border-radius: 10px;
width: 90% !important;
/* max-height: 60rem !important; */
top: 12rem !important;
left: 0 !important;
z-index: 900 !important;
}
/* ================ ABOUT ================ */
/* ALL HEADER PAGES */
.main-container-about > header,
.main-container-services > header,
.main-container-portfolio > header,
.main-container-testimony > header,
.main-container-blog > header,
.main-container-contact > header{
min-height: 50dvh;
padding: 12em 5% 1em 5%;
text-align: center;
background-image: url(../images/image-banner.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-blend-mode: multiply;
background-color: rgba(0, 0, 0, 0.8);
color: var(--white-color);
}
.main-container-request-free-quote > header{
min-height: 30dvh; 
padding: 2em 5%;
text-align: center;
background-color: var(--main-color);
color: var(--white-color);
}
.main-container-request-free-quote .request-a-free-quote h1{margin-top: 2em; color: var(--white-color);}
.main-container-request-free-quote .sub-header{
background-color: #0b061f;
color: var(--white-color);
padding: 2em;
text-align: center;
}
.main-container-request-free-quote .sub-header p{
max-width: 300px; 
margin-inline: auto;
}
.main-container-request-free-quote .container{
padding: 5%;
max-width: 900px;
margin-inline: auto;
}
.main-container-request-free-quote .section-contact{padding-top: 0;}
/* ALL H1 PAGES */
.main-container-about .about-us,
.main-container-portfolio .header-portfolio,
.main-container-services .header-services,
.main-container-testimony .header-testimony,
.main-container-blog .header-blog,
.main-container-contact .header-contact{text-align: center;}
.main-container-about .about-us h1,
.main-container-portfolio .header-portfolio h1,
.main-container-services .header-services h1,
.main-container-testimony .header-testimony h1,
.main-container-blog .header-blog h1,
.main-container-contact .header-contact h1{
color: var(--white-color); 
max-width: 800px; 
margin-inline: auto;
}
.main-container-about .about-us a,
.main-container-portfolio .header-portfolio a,
.main-container-services .header-services a,
.main-container-testimony .header-testimony a,
.main-container-blog .header-blog a,
.main-container-contact .header-contact a{display: inline-block; margin: 1em 0;}
/* ================ BLOG ================ */
.main-container-blog .blog-layout{
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.main-container-blog .section-blog{padding: 5% 5%;}
.main-container-blog .blog-container{display: block !important;}
.main-container-blog .blog-container .blog-article{
max-width: 100% !important;
margin-inline: auto;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
}
.main-container-blog .blog-container .blog-page{
border: 1px dashed var(--main-color);
border-radius: 10px;
margin-bottom: 2em;
padding: 1em;
}
.main-container-blog .blog-container .blog-page .content-right .meta div{
display: flex;
justify-content: space-between;
align-items: baseline;
}
.main-container-blog .blog-container .blog-page .content-right .meta .category,
.main-container-blog .blog-container .blog-page .content-right .meta time{
font-weight: 900;
margin-block: 1em;
}
.main-container-blog .blog-container .blog-page .content-right .meta time{color: var(--main-color);}
.main-container-blog .blog-layout .blog-sidebar{padding: 5% 5% 10% 5%;}
.main-container-blog .blog-layout .blog-sidebar h2{font-size: var(--h4-size); text-transform: uppercase;}
.main-container-blog .blog-layout .blog-sidebar .blog-categories .categories-list button{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
border: 1px dashed var(--main-color);
background: none;
color: var(--main-color);
font-weight: 600;
width: 100%;
text-align: left;
border-radius: 10px;
margin-block: 0.5em;
padding: 1em 0.5em;
}
body.dark-mode .main-container-blog .blog-layout .blog-sidebar .blog-categories .categories-list .number{
background-color: var(--main-color);
}
.main-container-blog .blog-layout .blog-sidebar .blog-categories .categories-list .number{
background-color: #0b061f;
color: white;
padding: 0.5em 1em;
border-radius: 5px;
}
/* ================ FOOTER ================ */
.my-footer {
padding: 1em 5%;
text-align: center;
background-image: url(../images/image-banner.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-blend-mode: multiply;
background-color: rgba(11, 6, 31, 0.8);
color: var(--white-color);
}
.my-footer a {color: var(--white-color);}
.my-footer .contact-address a{color: var(--main-color);}
.my-footer .footer-description,
.my-footer .social-media-container,
.my-footer .contact-address,
.my-footer .footer-lead {padding: 1.5em 0; text-align: left;}
.my-footer .footer-lead button{width: max-content;}
.my-footer .footer-description{
margin-bottom: 0; 
padding-right: 2em;
display: flex; 
flex-direction: column; 
gap: 1.5em;
}
.my-footer .footer-description img{width: 5em;}
.my-footer .social-media-container{
display: flex;
gap: 2.6rem;
}
.my-footer .social-media-container a{
width: 2rem;
height: 2rem;
padding: 1.5em;
display: inline-flex;
justify-content: center;
align-items: center;
border: 2px solid var(--white-color);
border-radius: 50%;
}
.my-footer .social-media-container a i{font-size: 1.5em;}
.my-footer .contact-address span,
.my-footer .footer-lead p{font-weight: 700;}
.my-footer .contact-address p{margin: 1em;}
.my-footer .footer-lead p{text-transform: capitalize;}
.my-footer .footer-lead p,
.my-footer .footer-lead input{margin-bottom: 1em;}
.my-footer .footer-lead input{
width: 100%; 
font-size: 16px;
padding: 1em; 
border-radius: 5px;
border: 1px solid #ddd;
transition: all 0.2s ease;
}
.my-footer .footer-lead input:focus{
border-color: var(--main-color, #4f46e5);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
outline: none;
transform: translateY(-1px);
}
/* =+=+=+=+=+=+=+=+=+=+=+=+=+= 
        BREAKPOINTS MIN
=+=+=+=+=+=+=+=+=+=+=+=+=+= */
@media (min-width: 451px){html {font-size: 55%;}}
@media (min-width: 500px){
    .main-container-index .my-home{padding-bottom: 25rem;}
    .section-about .about-container .about-photo{width: 75%;}
    .section-about .about-container .about-photo figcaption{margin-top: -4rem; margin-bottom: 0;}
}
@media (min-width: 600px){
    .section-about .about-container .about-photo figcaption{margin-top: 0; margin-bottom: 4rem;}
    .section-about .about-container .about-photo{width: 65%;}
}
@media (min-width: 668px){
    .section-about,
    .section-services,
    .section-portfolio, 
    .section-testimonies, 
    .section-blog,
    .section-contact{padding: 5%;}
}
@media (min-width: 768px){
    .main-container-index .my-home{padding: 0;}
    .section-about .about-container{
    display: grid; 
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    }
    .section-about{padding-top: 12%;}
    .main-container-about .section-about{padding-top: 5%;}
    .section-about .about-container .about-photo{width: 90%;}
    .section-about .about-container .about-photo figcaption{margin-bottom: 0; margin-top: -3em;}
    .section-about .about-container .about-photo img{object-fit: contain;}
    #contactForm .form-grid {grid-template-columns: repeat(2, 1fr);}
    #contactForm .form-grid .full {grid-column: 1 / -1;}
    .my-footer {display: grid; grid-template-columns: repeat(2, 1fr);}
    .my-footer .copyright{grid-column: 1 / -1;}
    .my-footer .social-media-container{
    align-items: flex-end;
    justify-content: flex-end;
    }
}
@media (min-width: 850px){
    .section-services .services-container,
    .section-portfolio .portfolio-container,
    .section-blog .blog-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    }
    .section-services .services-container .services-item,
    .section-portfolio .portfolio-container .portfolio-item,
    .section-blog .blog-container .blog-article{max-width: 400px;}
    .section-testimonies .testimonies-container .swiper-button-prev,
    .section-testimonies .testimonies-container .swiper-button-next {opacity: 1; visibility: visible;}
    .section-testimonies .testimonies-container .swiper-button-prev{left: 30%; transform: translate(-40px, -60px);}
    .section-testimonies .testimonies-container .swiper-button-next{right: 30%; transform: translate(40px, -60px);}
    .main-container-about .about-us p,
    .main-container-portfolio .header-portfolio p,
    .main-container-services .header-services p,
    .main-container-testimony .header-testimony p,
    .main-container-blog .header-blog p,
    .main-container-contact .header-contact p{width: 700px; margin-inline: auto;}
    .main-container-blog .blog-layout{grid-template-columns: minmax(0, 2fr) 350px;}
}
@media (min-width: 1024px){
    .section-contact{display: flex; gap: 4rem;}
    .main-container-request-free-quote .sub-header p{max-width: 100%;}
    .main-container-blog .blog-container .blog-page{display: flex;}
    .main-container-blog .blog-container .blog-page .content-right{width: 65%;}
}
@media (min-width: 1200px){
    html {font-size: 62.5%;}
    .my-header-home .my-nav,
    .my-header .my-nav{
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    background-color: transparent;
    opacity: 1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    border-right: none;
    box-shadow: none;
    transition: none;
    }
    .my-header-home .my-nav ul,
    .my-header .my-nav ul{display: flex; align-items: center; gap: 5rem;}
    .my-header-home .my-nav ul li,
    .my-header .my-nav ul li{border-bottom: 0;}
    .my-header-home .my-nav ul li a,
    .my-header .my-nav ul li a{
    display: inline;
    width: auto;
    padding-top: 0;
    color: var(--white-color);
    }
    .my-header-home .my-nav ul li:nth-child(1) a,
    .my-header-home .my-nav ul li:nth-child(2) a,
    .my-header-home .my-nav ul li:nth-child(3) a,
    .my-header-home .my-nav ul li:nth-child(4) a{color: var(--main-color);}
    .my-header-home.sticky .my-nav ul li a,
    .my-header.sticky .my-nav ul li a{color: var(--text-color);}
    .my-header-home #menu-icon,
    .my-header #menu-icon{display: none;}
    .main-container-index .my-home .img-home{display: none;}
    /* .main-container-index .my-home .img-home img{
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    pointer-events: none;
    } */
    .service-container{height: 768px;}
    .service-container .service-box{right: 0; height: 768px;}
    .service-container .overlay{right: 0;}
    .section-services .services-container,
    .section-portfolio .portfolio-container,
    .section-blog .blog-container{grid-template-columns: repeat(3, 1fr);}
    .section-services .cta-buttons a,
    .section-portfolio .portfolio-read-more{width: 40rem; margin-inline: auto;}
    .section-testimonies .testimonies-container .testimonies-carousel,
    .section-testimonies .testimonies-container .testimonial-item{max-width: 800px;}
    #contactForm .form-grid .form-group .input-group i{top: 0.8em;}
}
@media (min-width: 1301px){
    .my-header-home .my-nav ul li:nth-child(4) a{color: var(--white-color);}
    .my-header-home.sticky .my-nav ul li a{color: var(--text-color);}
}
@media (min-width: 1370px){
    .my-header-home .my-nav ul{gap: 6.2rem;}
}
@media (min-width: 1410px){
    .main-container-index .my-home .description{
    max-width: 64rem;
    }
}
@media (min-width: 1600px){
    .my-header-home .my-nav ul{gap: 5rem;}
}
@media (min-width: 1770px){
    .my-header-home .my-nav ul{gap: 4.2rem;}
}
/* =+=+=+=+=+=+=+=+=+=+=+=+=+= 
        BREAKPOINTS MAX
=+=+=+=+=+=+=+=+=+=+=+=+=+= */
@media (max-width: 1300px){
    .main-container-index .service-container{height: 85.8rem;}
    .main-container-index .service-container .service-box{right: -16rem; height: 85.8rem;}
    .main-container-index .service-container .overlay{right: -13rem;}
    .my-header-home.sticky .my-nav ul li a,
    .my-header.sticky .my-nav ul li a{color: var(--text-color);}
}
@media (max-width: 1120px){
    .main-container-index .service-container .service-box{right: -25rem;}
    .main-container-index .service-container .overlay{right: -19rem;}
}
@media (max-width: 1024px){
    .main-container-index .service-container .service-box{right: -45rem;}
    .main-container-index .service-container .overlay{right: -39.5rem;}
}
@media (max-width: 868px){
    .main-container-index .service-container .service-box{right: -55rem;}
    .main-container-index .service-container .overlay{right: -49.5rem;}
}
@media (max-width: 768px){
    .main-container-index .my-home{
    padding: 120px 5% 40rem 5%;
    justify-content: center;
    text-align: center;
    position: relative;
    } 
    .main-container-index .my-home .description{margin-top: 0; max-width: 100%;}
    .main-container-index .my-home .service-container{
    left: 0;
    top: 65%;
    width: 100% !important;
    height: 768px;
    }
    .main-container-index .service-container .service-box{
    position: fixed;
    top: 50%;
    left: 0;
    border-radius: 0;
    width: 100%;
    }
    .main-container-index .service-container .service-box .service{
    padding: 0 13px;
    left: auto; 
    transform-origin: 0;
    }
    .main-container-index .service-container .service-box .service:nth-child(1){
    transform: rotate(-90deg) translate(-100px, -225px);
    }
    .main-container-index .service-container .service-box .service:nth-child(2){
    transform: rotate(0deg) translate(0, -325px);
    }
    .main-container-index .service-container .service-box .service:nth-child(3){
    transform: rotate(90deg) translate(-75px, -410px);
    }
    .main-container-index .service-container .service-box .service:nth-child(4){
    transform: rotate(180deg) translate(-100%, -325px);
    }
    .main-container-index .service-container .overlay{
    position: fixed;
    top: 70rem;
    left: 50%;
    right: 0;
    transform: rotate(90deg) translate(-50%, 50%) scaleY(3);
    border-width: 23.9rem;
    }
    .main-container-index .service-container .service-box .circle{
    position: fixed; 
    width: 670px; 
    height: 670px; 
    z-index: -1;
    }
}
@media (max-width: 740px){
    .main-container-index .service-container .service-box .service:nth-child(1){
    transform: rotate(-90deg) translate(-100px, -230px);
    }
}
@media (max-width: 540px){
    .main-container-index .my-home .service-container{top: 60%; height: 668px;}
    .main-container-index .service-container .service-box{top: 55%;}
    .main-container-index .service-container .service-box .circle{
    width: 370px; 
    height: 370px; 
    }
}
@media (max-width: 530px){    
    .main-container-index .my-home .service-container{top: 65%; height: 668px;}
    .main-container-index .service-container .service-box{top: 45%;}
    .main-container-index .service-container .service-box .service:nth-child(1){
    transform: rotate(-90deg) translate(-85px, -78px);
    }
    .main-container-index .service-container .service-box .service:nth-child(2){
    transform: rotate(0deg) translate(0px, -170px);
    }
    .main-container-index .service-container .service-box .service:nth-child(3){
    transform: rotate(90deg) translate(-75px, -245px);
    }
    .main-container-index .service-container .service-box .service:nth-child(4){
    transform: rotate(180deg) translate(-100%, -170px);
    }
}
@media (max-width: 428px){
    .main-container-index .my-home .service-container{top: 62%;}
}
@media (max-width: 389px){
    .main-container-index .my-home .service-container{top: 55%;}
}
@media (max-width: 350px){
    .main-container-index .my-home .service-container{top: 60%;}
}