@layer fonts{
	@font-face {
		font-display: swap;
		font-family: 'Space Mono';
		font-style: normal;
		font-weight: 700;
		src: url('./assets/fonts/space-mono-v17-latin-700.woff2') format('woff2');
	}

	@font-face {
		font-display: swap;
		font-family: 'Lexend Deca';
		font-style: normal;
		font-weight: 400;
		src: url('./assets/fonts/lexend-deca-v25-latin-regular.woff2') format('woff2');
	}

	:root{
		--ff-mono: 'Space Mono', 'Courier New', Courier, monospace;
	    --fs-56: calc(56 / 16 * 1rem);
	    --fs-48: calc(48 / 16 * 1rem);
	    --fs-40: calc(40 / 16 * 1rem);
	    --fs-32: calc(32 / 16 * 1rem);
	    --fs-24: calc(24 / 16 * 1rem);
	    --fs-20: calc(20 / 16 * 1rem);
        --fs-15: calc(15 / 16 * 1rem);
	}

	h1{
	  font-size: var(--fs-40);
	  letter-spacing: -1.79px;

	  @media (width >= calc(700 / 16 * 1rem)) {
		font-size: var(--fs-56);
		letter-spacing: -2.5px;
	  }
    }

    h2{
	  font-size: var(--fs-32);
	  letter-spacing: -1.43px;

	  @media (width >= calc(700 / 16 * 1rem)) {
		font-size: var(--fs-48);
		letter-spacing: -2.14px;
	  }
    }

    h3{
	  font-size: var(--fs-20);
	  letter-spacing: -0.89px;

	  @media (width >= calc(700 / 16 * 1rem)) {
		font-size: var(--fs-24);
		letter-spacing: -0.89px;
	  }
    }

    h4{
    	font-size: var(--fs-15);
    	letter-spacing: -0.50px;
    }
}

    @layer colors {

	    :root {
		    --c-white: #fff hsl(0, 0%, 100%);
		    --c-yellow:/*#fcb72b*/ hsl(40, 97%, 58%);
		    --c-xdark-navy:/*#495567*/ hsl(215, 14%, 23%);
		    --c-dark-navy:/*#495567*/ hsl(216, 17%, 35%);
		    --c-dim-grey:/*#939caa*/ hsl(217, 12%, 62%);
		    --c-light-grey:/*#66b2cc*/ hsl(212, 41%, 93%);
		    --c-snow:/*#f2f5f9*/ hsl(214, 37%, 96%);
		    --c-light-yellow:/*#fff4df*/ hsl(39, 100%, 94%);
		    --c-black-overlay: hsla(0, 0%, 0%, 75%);
	    }
    }

    @layer global {
    *,
    *::before, 
    *::after{
	  box-sizing: border-box;
    }

    body{
	    margin: 0;
	    font-family: 'Lexend Deca', 'Arial', 'Helvetica', sans-serif;
	    font-size: var(--fs-15);

	     /* 1. Mobile-specific background (applied to all screens by default) */
        background: url('./assets/images/Background-mobile-img.png') repeat scroll;
        background-size: 100vw 100vh;
	    

	    @media (width >= calc(700 / 16 * 1rem)) {
	    	background:url('./assets/images/Background-tablet-img.png') repeat scroll; 
	    	background-size: 100vw 100vh;
	        background-attachment: fixed;    
		}

		@media (width >= calc(1000 / 16 * 1rem)) {
			background:url('./assets/images/Background-img.jpg') repeat scroll;
			background-size: 100vw 100vh; 
	        background-attachment: fixed;
		}
    }

    img {
	    display: grid;
	    max-width: 100%;
	    height: auto;
    }

    h1,  
    h2, 
    h3,
    p {
	    text-wrap: balance;
    }
    h1,  
    h2, 
    h3 {
	    font-family: var(--ff-mono);
	    margin: 0;
	    line-height: 1.1;
    }

    p{
	    line-height: 1.6;
	    margin: 0;
    }

    a {
    	font-family: var(--ff-mono);
    	color: var(--c-xdark-navy);
	    text-decoration: none;
    }

    header ul, 
    footer ul {
	    margin: 0;
	    padding: 0;

	    li{
		    list-style-type: none;
	    }
    }    

    .visually-hidden {
	    position: absolute;
	    left: -10000px;
	    top: auto;
	    width: 1px;
	    height: 1px;
	    overflow: hidden;
    }
  }

    @layer layout {
    	.wrapper {    		
		display: grid;
		grid-template-columns: 1fr calc(100% - 64px) 1fr;


		@media (width >= calc(700 / 16 * 1rem)) {
			grid-template-columns: 1fr min(calc(100% - 80px), calc(1100 / 16 * 1rem)) 1fr;
		}

		/* &.fd-col {
			display: grid;
			grid-template-columns: 1fr repeat(3, calc(calc(100% - 64px) / 3)) 1fr;

			@media (width >= calc(700 / 16 * 1rem)) {
				grid-template-columns: 1fr repeat(6, calc(calc(100% - 80px) / 6)) 1fr;
			}

			@media (width >= calc(1000 / 16 * 1rem)) {
				grid-template-columns: 1fr repeat(12, calc(calc(1100 / 16 * 1rem) / 12)) 1fr;
			}
		} */

		&.small {
			@media (width >= calc(700 / 16 * 1rem)) and (width < calc(1000 / 16 * 1rem)) {
			  grid-template-columns: 1fr min(calc(100% - 200px), calc(1100 / 16 * 1rem)) 1fr;
		  }
		}

		> * {
			grid-column: 2;
		}

		/* > .fullbleed {
			grid-column: 1/-1;
		} */
	}
  }

    @layer button {
	    .button {
		    display: block;
		    background: /* var(--c-yellow) */#b2beb5;
		    width: fit-content;
		    padding: 12px 38px;
		    color: /* var(--c-xdark-navy) */var(--c-white);
		    font-family: var(--ff-mono);
		    border: 3px solid /* var(--c-yellow) */#b2beb5;
		    transition: 150ms ease-in-out;
		    transition-property: color, border-color, background-color;

		    &:hover {
			    background: transparent;
			    border: 3px solid var(--c-xdark-navy);
		    }

		    /* &:hover-white {
			    background: transparent;
			    border: 3px solid var(--c-white);
		    } */
	    }
    }

    @layer header {
        .header {
	        padding-block: 20px;
	        align-items: center;

	       /*  @media (width >= calc(1000 / 16 * 1rem)){
	  		    margin-top: 100px;
	  	    } */
        }

        .header {
  	        .header-logo-link,.header-links {
  			    grid-row: 1;		
  	        }

	        .header-logo-link {
	  	        z-index: 12;
	  	        justify-self: center;
	  	        width: calc(75 / 16 * 1rem);

	  	        @media (width >= calc(700 / 16 * 1rem)){
	  		        justify-self: start;
	  		        width: calc(108 / 16 * 1rem);
	  	        }

	  	        &:hover path {
	  		        fill: var(--c-xdark-navy);
	  	        }
	        }
	    .header-links {
	  	    justify-self: start;
	  	    display: grid;
	  	    align-items: center;

	  	    @media (width >= calc(700 / 16 * 1rem)){
	  		    padding-left: 167px;
	  		    width: 100%;
	  	    }
	    }
      }
    }

    @layer topnav {
	    .topnav {
		    z-index: 10;
        /*display: flex;
        justify-content: end;
        align-items: center;
        padding-block: 0.5rem;*/

        &::before{
        	content: "";
  	        position: fixed;
  	        inset: 64px 0 0 0;
  	        background: var(--c-black-overlay);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease-in-out;
        }

        &:has(.topnav__open[aria-expanded='true'])::before {
  	        opacity: 1;
  	        pointer-events: auto; /* Added to block underlying clicks when open */

        }
    }
  
    .topnav button {
	    /*display: block;*/
	    translate: 0 2px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;

        @media (width >= calc(700 / 16 * 1rem)) {
            display: none;
        }
    }

    .topnav__open[aria-expanded='true'] {
	    display: none;

        + .topnav__menu .topnav__menu-content {
        	opacity: 1; /* Fixed from 0 to 1 so text shows when open */
            translate: 0; 
            pointer-events: auto; /* Added */

            @media (prefers-reduced-motion) {
            	/* opacity: 1; */
            	transition: none;
            }
        }

        + .topnav__menu-content::before{
        	opacity: 1;
        }

        + .topnav__menu .topnav__close {
        	display: block;
        }
    }

    .topnav__close {
    	display: none;
        margin-inline-start: auto;
        margin-block-end: 8rem;
        position: absolute;
        top: 18px;
        /*translate: 0 -100%;*/

        img {
        	width: 2.5rem;
        }
    }

    /* .topnav__menu{
    	@media (width < calc(700 / 16 * 1rem)){
    		position: fixed;
    		inset: 0;
    		padding: 1.5rem;
    		background-color: hsl(256, 100%, 33%);
    		translate: 100vw 0;
    		transition: translate 0.5s ease-in-out;
    	}
    	@media (width < calc(700 / 16 * 1rem)){
    		translate: 0;
    		opacity: 0;
    		transition: opacity 500ms ease-in-out;
    	}
    } */

    .topnav__menu-content {
	    display: flex;
        justify-content: space-between;

        @media (width < calc(700 / 16 * 1rem)) {
        	opacity: 0;
            flex-direction: column;
            position: fixed;
            inset: 64px 120px 0 0;
            padding: 64px 32px 24px;
            background-color: var(--c-xdark-navy);
            translate: -100vw 0;
            transition: translate 0.5s ease-in-out;
            transition-property: opacity;
        }

        @media (width < calc(700 / 16 * 1rem)) and (prefers-reduced-motion) {
        	translate: 0;
            opacity: 0;
            transition: opacity 500ms ease-in-out;
        }
    }

    .topnav__links {
    	display: flex;
        align-items: center;
        gap: 1rem;
        /*align-items: center;*/
        margin: 0;
        padding: 0;

        @media (width < calc(700 / 16 * 1rem)) {
            flex-direction: column;
            align-items: stretch;
        }
    }

    .topnav__item {
    	list-style-type: none;

      &:last-child {
  	    @media (width < calc(700 / 16 * 1rem)) {
  		    display: block;
            margin-top: 200px;
        }

  	    @media (width >= calc(700 / 16 * 1rem)) {
  	        margin-inline-start: 80px;
  	    }

  	    @media (width >= calc(1000 / 16 * 1rem)) {
  	        margin-left: auto;
  	    }
      }

    .topnav__link {
	    font-family: var(--ff-mono);
	    font-weight: 700;
        color: var(--c-light-grey);
        transition: color 150ms ease-in-out;
        
        @media (width < calc(700 / 16 * 1rem)){
		    color: var(--c-white);
	    }

	    @media (width >= calc(700 / 16 * 1rem)){
		    color: var(--c-dim-grey);
	    }

	    &:hover {
		    color: var(--c-dark-navy);
	    }
    }
}

@layer what-is-ABA {
	

    .aba-into {
        background-color: transparent;
        backdrop-filter: blur(20px);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        width: 950px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        padding: 1.5em 0 1.5em 0;
        background-color: rgba(0,0,0,0.2);
        padding: 3em 3em 3em 3em;

        @media (width < calc(700 / 16 * 1rem)){
        	width: 80vw;
        }
    }

    .aba-into h1 {
        font-size: 20px;
        text-decoration: underline;
        color: black;
        text-align: center;
    }

    .aba-into p {
        margin-top: 20px;
        font-size: 16px;
        text-align: center;
    }

    /* CHANGED TO GRID: Automatically handles 3 per row and spacing */
    .ABA-fields-img {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        justify-items: center; 
        justify-content: center;
        gap: 20px; 
        width: 950px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        background-color: rgba(0,0,0,0.2);
        padding: 3em 3em 3em 3em;

        @media (width < calc(700 / 16 * 1rem)){
        	width: 80vw;
        }
    }

    /* CHANGED: Removed flex limits; layout is now handled by the parent grid */
    .fields-img {
        display: flex;
        flex-direction: column; 
        align-items: center; 
        text-align: center;
        width: 100%;
    }

    .fields-img img {
        height: 185px;
        width: 250px;
        object-fit: cover; 
        border-radius: 20px;
    }

    .fields-img a {
        text-decoration: none;
        color: black;
    }

    .fields-img h1 {
        font-size: 20px;
        text-decoration: none;
        color: black;
    }

    .insight {
    	display: grid;
    	grid-template-rows: repeat(2, 1fr);
    	width: 950px;
    	height: auto;
    	margin: 50px auto 0 auto;
    	background-color: #ffffff;

    	@media (width < calc(700 / 16 * 1rem)){
        	width: 80vw;
        }
    }

    .insight-content{
    	width: 100%;
    	/* margin: 0 auto 0 auto; */
    	height: auto;

    	> * {
    		grid-row: 1;
    	}
    }

    .insight-content h3{
    	text-align: center;
    }

    .insight-content p{
    	text-align: center;
    	font-size: 12px;
    	color: var(--c-grey);
    }

    .insight-connect{
    	display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center;  
    	width: 100%;
    	height: auto;
    	margin: 15px auto 0 auto;

    	> * {
    		grid-row: 2;
    	}
    }


    /* .why-choose-ABA {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    /* gap: 2rem; /* Spacing between text and image */
    /*align-items: center; /* Vertically centers the content */
    /*max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.why-choose-ABA-img img {
    width: 100%;
    height: auto;
    object-fit: cover; */
/*} */

/* Responsive adjustment for screens smaller than 768px */
/* @media (max-width: 768px) {
    .why-choose-ABA {
        grid-template-columns: 1fr; /* Stacks the content and image vertically */
        /* gap: 1.5rem; */
    }
/* } */


    .why-choose-ABA{
    	display: grid;
    	grid-template-columns: repeat(2, 1fr);
    	width: 950px;
    	margin: 50px auto;
    }

    .why-choose-ABA-content{
	    background-color: #24262b;
	    padding: 3em 0 3em 0;
	    width: 100%;

	    > * {
	    	grid-column: 1;
	    }
    }

    .why-choose-ABA-content h3{
	    font-size: 30px;
	    font-weight: 600;
	    color: white;
	    text-align: left;
    }

    .why-choose-ABA-content p{
	    font-size: 16px;
	    color: white;
	    padding: 2em 2em 2em 2em;
	    text-align: justify;
    }

    .why-choose-ABA-img{
    	background-color: var(--c-white);
    	display: flex;
    	justify-content: center;

    	> *{
    		grid-column: 2;
    	}
    }

    /* --- Media Query --- */
@media (width < calc(700 / 16 * 1rem)) {
    .why-choose-ABA {
        width: 80vw;
        grid-template-columns: 1fr; /* Stacks the content and image vertically */
    }

    .why-choose-ABA-content > *, 
    .why-choose-ABA-img > * {
        grid-column: 1; /* Aligns both items to the same single column */
    }
}
}

@layer produits-services{
	.produits-services{
		background-color: transparent;
	    backdrop-filter: blur(20px);
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	    width: 950px;
	    height: auto;
	    margin-left: auto;
	    margin-right: auto;
    }
    .p-s-content{
    	padding: 20px 20px 20px 20px;
    	background-color: transparent;
    	border-radius: .5em;
    	text-align: center;
    	display: grid;
    	grid-template-columns: 1fr 1fr 1fr 1fr;
    	gap: .5em;
    }

    .grid-box{
    	display: grid;
    	grid-template-rows: 1fr 20px 30px;
    	border: 2px solid var(--c-dark-navy);
    	border-radius: 2em;
    	gap: 2em;
    	place-items: center;
    }

    .grid-box .button{
    	place-self: center;
    }

    .grid-box img{
    	padding: .2em;
    	width: 80%;
    	place-self: center;
    	border-radius: .5em;
    }

    /* --- RESPONSIVE MEDIA QUERIES --- */
    
    /* For tablets and medium-sized screens */
    @media (max-width: 992px) {
        .produits-services {
            width: 90%; /* Fluid width for smaller viewports */
        }
        .p-s-content {
            grid-template-columns: 1fr 1fr; /* Switch to 2 columns */
        }
    }

    /* For mobile screens */
    @media (max-width: 576px) {
        .produits-services {
            width: 95%;
        }
        .p-s-content {
        	grid-template-columns: 1fr;
        }
    }   
}

@layer our-catalogues{
	.our-catalogues{
		background-color: transparent;
	    backdrop-filter: blur(20px);
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	    width: 950px;
	    height: auto;
	    margin-left: auto;
	    margin-right: auto;
	}

	.our-catalogues img{
    	border-radius: 25px;
    } 

    @media (max-width: 992px) {
        .our-catalogues {
            width: 90%; 
        }
    }
}

@layer eng-res-content{
	.eng-res-content{
		background-color: transparent;
	    backdrop-filter: blur(20px);
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	    width: 950px;
	    height: auto;
	    margin-left: auto;
	    margin-right: auto;
    }

    .eng-res-content img{
    	border-radius: 25px;
    } 

    @media (width < calc(700 / 16 * 1rem)) {
    	.eng-res-content{
    		width: 90%;
    	}
    }


}

@layer getInTouch{
	.getInTouch {
		overflow-x: clip;
	}

	> * {
			grid-row: 1;
	}

	.getInTouch-picture {
		max-height: 32vh;
		overflow: clip;
	}

	.getInTouch-img {
		width: 100%;
	}

	@media (width  <= calc(700 / 16 * 1rem)) and (width < calc(1000 / 16 * 1rem)){
		.getInTouch-img{
			display: none;
		}
	}

	@media (width >= calc(1000 / 16 * 1rem)) {
		.getInTouch-mobile-img{
			display: none;
		}
	}
}

@layer contact{
	.contact{
		background-color: transparent;
	    backdrop-filter: blur(20px);
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	    /* display: flex;
	    flex: 3; */
	    /* width: 950px; */
	    width: min(100%, 950px);
	    height: auto;
	    margin-top: 75px;
	    margin-left: auto;
	    margin-right: auto;
	    padding: 10px 10px 10px 10px;

	}

	.contact-us-grid{
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.contact-us-l{
		padding: 10px 10px 10px 10px;
		> * {
			grid-column: 1;
		}
	}

	.contact-us-l img{
		border-radius: 20px;
	}

	.contact-us-r{
		> * {
			grid-column: 2;
		}
	}

    .contact-links{
		place-items: center;
		text-decoration: underline;
	}

	@media (max-width: 768px) {
        .contact-us-grid {
            grid-template-columns: 1fr; /* Changes grid to a single column */
        }

        .contact-us-l, .contact-us-r {
        	text-align: center;
            > * {
                grid-column: 1; /* Forces all elements into the single column */
            }

        }
        
        .contact {
        	width: 90%;
            margin-top: 20px; /* Reduces top margin on smaller screens */
        }

        .contact-us-l img{
		border-radius: 5px;
	}
    }
}

/* @layer footer{

	/* @media (width  <= calc(700 / 16 * 1rem)) and (width < calc(1000 / 16 * 1rem)){
		.footer{
			width: 100vw;
		}
	} */

	/* .footer-container{
		max-width: 800px;
		margin: auto; */
    
    /* @media (width  <= calc(700 / 16 * 1rem)) and (width < calc(1000 / 16 * 1rem)){
			width: 100vw;
		
	} */

	/* @media (width < calc(700 / 16 * 1rem)){
        	width: 80vw;
        }

	}

	.footer-row{
		display: flex;

		/* @media (width < calc(700 / 16 * 1rem)){
        	display: flex;
        	flex-direction: columns;
        } */
	/* } */ 

	/* .footer-links {
		list-style: none;
		display: inline;
	}

	.footer{
		background-color: #24262b;
		padding: 70px 0;
		background-color: rgba(53, 57, 53);
	    padding: 70px 0;
	    width: 820px;
	    margin: auto;
	    margin-top: 75px;
	    margin-bottom: 50px;
	    font-family: "Poppins", sans-serif;
	    font-size: 16px;
	    border-radius: 25px;

	    @media (width  <= calc(700 / 16 * 1rem)) and (width < calc(1000 / 16 * 1rem)){
			width: 80vw;		
	    }
	}

	.footer-col{
		width: 25%;
		padding: 0 15px;
	}

	.footer-col h4{
		font-size: 18px;
		color: #ffffff;
		text-transform: capitalize;
		margin-bottom: 35px;
		font-weight: 500;
		position: relative;
	}

	.footer-col h4::before{
		content: '';
		position: absolute;
		left: 0;
		bottom: -10px;
		background-color: #e91e63;
		height: 2px;
		box-sizing: border-box;
		width: 50px;
	}

	.footer-col ul li:not(:last-child){
		margin-bottom: 10px;
	}

	.footer-col ul li a{
		font-size: 16px;
		text-transform: capitalize;
		color: #ffffff;
		text-decoration: none;
		font-weight: 300;
		color: #bbbbbb;
		display: block;
		transition: all 0.3s ease;
	}

	.footer-col ul li a:hover{
		color: #ffffff;
		padding-left: 10px;
	}

	.footer-col .social-links a{
		display: inline-block;
		height: 40px;
		width: 40px;
		background-color: rgba(255, 0255, 0255, 0.2);
		margin: 0 10px 10px 0;
		text-align: center;
		line-height: 40px;
		border-radius: 50%;
		color: #ffffff;
		transition: all 0.3s ease;
	}

	.footer-col .social-links a:hover{
		color: #24262b;
		background-color: #ffffff;
	} */

/* } */

@layer footer {
    .footer {
        background-color: #24262b;
        background-color: rgba(53, 57, 53);
        width: 820px;
        max-width: 100%;
        padding: 70px 0;
        margin: 75px auto 50px auto;
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        border-radius: 25px;
    }

    .footer-container {
        max-width: 800px;
        margin: auto;
    }

    .footer-row {
        display: flex;
        flex-wrap: wrap; /* Ensures columns wrap nicely on smaller screens */
    }

    .footer-col {
        width: 25%;
        padding: 0 15px;
    }

    .footer-col h4 {
        font-size: 18px;
        color: #ffffff;
        text-transform: capitalize;
        margin-bottom: 35px;
        font-weight: 500;
        position: relative;
    }

    .footer-col h4::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -10px; /* Fixed syntax error (removed quotes) */
        background-color: #e91e63;
        height: 2px;
        box-sizing: border-box;
        width: 50px;
    }

    .footer-links {
        list-style: none;
        display: inline;
    }

    .footer-col ul li:not(:last-child) {
        margin-bottom: 10px;
    }

    .footer-col ul li a {
        font-size: 16px;
        text-transform: capitalize;
        color: #bbbbbb; /* Avoided overriding color multiple times */
        text-decoration: none;
        font-weight: 300;
        display: block;
        transition: all 0.3s ease;
    }

    .footer-col ul li a:hover {
        color: #ffffff;
        padding-left: 10px;
    }

    .footer-col .social-links a {
        display: inline-block;
        height: 40px;
        width: 40px;
        background-color: rgba(255, 255, 255, 0.2); /* Fixed typo (0255 -> 255) */
        margin: 0 10px 10px 0;
        text-align: center;
        line-height: 40px;
        border-radius: 50%;
        color: #ffffff;
        transition: all 0.3s ease;
    }

    .footer-col .social-links a:hover {
        color: #24262b;
        background-color: #ffffff;
    }

    /* --- Media Queries (Placed outside individual selectors in @layer) --- */
    
    @media (width <= 43.75rem) { /* 700px / 16 = 43.75rem */
        .footer {
            width: 80vw;
        }
        .footer-container {
            width: 80vw;
        }
    }

    @media (max-width: 43.75rem) { /* 700px in rem equivalent for flex wrapping */
        .footer-row {
            flex-direction: column; /* Stacks footer columns vertically */
        }
        .footer-col {
            width: 100%; /* Makes each column span the full width */
            margin-bottom: 30px;
        }
    }
}