/*reset styles */
	html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: baseline;
	color: #333333;
}
html, body {
min-height: 101%;
}
body {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background-image: url();
	background-repeat: repeat-x;
	font-family: 'Fustat', sans-serif;
    min-height: 100vh; /* Make sure the body takes the full height of the viewport */
    display: flex;
    flex-direction: column;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* end reset styles */


/* Index Page */

/* <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 800 */

.fustat {
  font-family: "Fustat", system-ui;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

 .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #DD530F;
            color: #fff;         
	 font-family: 'Fustat', sans-serif;
	font-size: 16px;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
	 z-index: 1000;
            transition: transform 0.3s ease; /* Smooth transformation */
        }

.content{
	background-image: linear-gradient(#02233E, #276FB7);
    width: 100%;
	/*height: 100vh;*/
}

.logo{
	width: 100%;
	height:125px;
	background-image:url("img/logo-bkg.png");
	background-repeat: repeat-x;
	text-align: center;
	padding:0;
	margin:0;
	
}

.logo img{
	width:120px;
	height:120px;
}

.navigation {
	width: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
	padding-top:40px;
	padding-bottom:40px;
}

/* Menu styles */
nav {
	padding: 10px;
    border-radius: 8px;
}

.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.menu-item {
    color: #DD530F;
	font-family: 'Fustat', sans-serif;
	font-size: 24px;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

/* Default state */
.menu-item {
    background-color: #fff;
}

/* Hover (rollover) state */
.menu-item:hover {
    color: #fff;
	background-color: #02233E;
}

/* Active state */
.menu-item.active {
	color: #fff;
    background-color: #DD530F;
}

.secondary-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.secondary-menu-item {
    color: #DD530F;
    font-family: 'Fustat', sans-serif;
    font-size: 16px; 
    text-decoration: none;
    padding: 6px 12px; 
    border-radius: 5px;
    transition: background-color 0.3s ease;
    background-color: #fff; 
}

/* Hover state */
.secondary-menu-item:hover {
    color: #fff;
    background-color: #66BAFF;
}

/* Active state */
.secondary-menu-item.active {
    color: #fff;
    background-color: #DD530F;
}




.title {
    font-family: 'Fustat', sans-serif;
	width:100%;
	color:#fff;
	font-size: 14px;
    letter-spacing: 2.8px;
	display: flex;
    justify-content: center;
    align-items: center;
	text-transform: uppercase;
	padding-top:26px;
	padding-bottom:10px;
}

.title-type {
    font-family: 'Fustat', sans-serif;
	width:100%;
	color:#66BAFF;
	font-size: 12px;
    letter-spacing: 2.8px;
	display: flex;
	text-transform: uppercase;
	padding-top:0px;
	padding-bottom:0px;
}

#intro{
	width: 100%;
    max-width: 950px;
    margin: 0 auto;
	padding-bottom:48px;
}

.white{
	color:#fff;
}

h1{
	font-family: 'Fustat', sans-serif;
	font-weight:800;
	color:#66BAFF;
	font-size:70px;
	line-height:82px;
	text-align:center;
}

h1 .white{
	font-family: 'Fustat', sans-serif;
	font-weight:800;
	color:#FFF;
	font-size:70px;
}

h2{
	font-family: 'Fustat', sans-serif;
	font-weight:300;
	color:#66BAFF;
	font-size:48px;
	padding-bottom:10px;
}

h3{
	font-family: 'Fustat', sans-serif;
	font-weight:300;
	color:#FFF;
	font-size:68px;
	padding-bottom:10px;
}

h4{
	font-family: 'Fustat', sans-serif;
	font-weight:300;
	color:#fff;
	font-size:20px;
}

h5{
	font-family: 'Fustat', sans-serif;
	font-weight:600;
	color:#fff;
	font-size:30px;
}

h6{
    font-family: 'Fustat', sans-serif;
	font-weight:400;
	color:#66BAFF;
	font-size:14px;
    letter-spacing: 2px;
	text-transform: uppercase;
}

.project-content h3{
	font-family: 'Fustat', sans-serif;
	font-weight:300;
	color:#02233E;
	font-size:68px;
	padding-bottom:10px;
}




p{
	font-family: 'Fustat', sans-serif;
	color:#FFF;
	font-size:16px;
	padding-bottom:10px;
}

.post-info p{
    font-family: 'Fustat', sans-serif;
	color:#FFF;
	font-size:20px;
	padding-bottom:30px;
}

ul, ol {
            padding-left: 40px; /* Indentation for the list */
        }

 ul {
            list-style-type: disc; /* Default bullet points for unordered list */
        }

ol {
            list-style-type: decimal; /* Default numbered format for ordered list */
        }

li {
            
    margin-bottom: 10px; /* Space between each list item */
            font-family: 'Fustat', sans-serif;
			color:#FFF;
			font-size:16px;
	
        }



  .breadcrumb-container {
            width: 100%;
            max-width: 950px;
            margin: 0 auto;
            padding: 10px 0px;
            box-sizing: border-box;
        }

        /* Breadcrumb container */
        .breadcrumb {
			font-size: 16px;
            color: white;
            display: flex;
            align-items: center;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* Breadcrumb link */
        .breadcrumb a {
            font-family: 'Fustat', sans-serif;
			font-size: 16px;
			color: white;
            text-decoration: underline;
            transition: color 0.3s ease;
        }

.breadcrumb li{
	font-family: 'Fustat', sans-serif;
	font-size:16px;
}

        /* Chevron separator */
        .breadcrumb .separator {
        font-family: 'Fustat', sans-serif;
		font-size:16px;
			margin: 0 8px;
            color: white;
        }

        /* Static title text */
        .breadcrumb .current {
            color: white;
        }

        /* Link hover effect */
        .breadcrumb a:hover {
            text-decoration:none;
        }

.divider{
			width: 100%;
			max-width: 950px; /* Optional: max-width for better alignment */
            margin: 0 auto; /* Center the header */
            height: 1px; /* Height of the line */
            background-color: #66BAFF; /* Line color */
            margin-bottom: 20px; /* Space below the line */
}


/* Responsive YouTube Video Wrapper */
        .video-container {
            position: relative; /* Needed for the absolute positioning */
            width: 100%; /* Full width of the container */
            padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 * 100) */
            height: 0; /* Height is managed by padding-bottom */
            overflow: hidden; /* Hide any overflow */
        }

        /* Make iframe responsive */
        .video-container iframe {
            position: absolute; /* Absolute positioning inside the container */
            top: 0;
            left: 0;
            width: 100%; /* Full width inside the container */
            height: 100%; /* Full height inside the container */
            border: 0; /* Remove default iframe border */
        }

      .full-width {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
		  	padding:20px 0
          
        }

        /* Content inside the full-width div */
        .full-width-content {
            text-align: center;
           
        }

   .prj-container {
            width: 100%;
	   		max-width:950px;
            margin: 0 auto; /* Center the header */
            text-align: left; /* Center align text */
            padding-bottom: 40px;
        }

.prj-title {
            width:100%;
            color: #fff; /* Title color */
        }

        /* Blue line */
        .blue-line {
            width: 100%; /* Full width line */
            height: 1px; /* Height of the line */
            background-color: #66BAFF; /* Line color */
            margin-bottom: 20px; /* Space below the line */
        }

        /* Text style */
        .subtext {
            width:100%;
            font-size: 20px; /* Subtext font size */
            color: #fff; /* Subtext color */
        }


.prj-text {
            max-width: 640px; /* Optional: max-width for better alignment */
            margin: 0 auto;
            text-align: left;
			padding: 20px 0;
         
        }


.bio{
	width: 100%;
    max-width: 950px;
    margin: 0 auto;
	padding-bottom:48px;
}

.container {
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 950px;
            margin: 0 auto;
			
        }

        .column {
            flex: 1;
            margin: 0 20px;
            text-align: center;
        }

        .column h3 {
            font-family: 'Fustat', sans-serif;
			font-weight:600;
			color:#FFF;
			font-size:30px;
			
			margin: 0;
        }

        .line {
            width: 50%;
            height: 1px;
            background-color: #66BAFF;
            margin: 10px auto; /* Center the line */
        }

        .items {
            list-style-type: none;
            padding: 0;
        }

        .items li {
            font-family: 'Fustat', sans-serif;
			color:#FFF;
			margin: 10px 0;
            font-size: 20px;
        }

.trust-logos {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Three equal columns */
            grid-template-rows: auto auto;
            gap: 4px;
            padding: 4px;
            max-width: 950px; 
            margin: 0 auto;
        }

        .trust-logos-item {
            display: flex;
    		justify-content: center;
    		align-items: center;
			padding: 20px;
            text-align: center;
        }
.padding{
	padding-top:40px;
}



 /* Full-width container */
        .outer {
            width: 100%;
            padding: 20px 0;
            position: relative;
            text-align: left;
            overflow: hidden; /* Ensure the color overlays stay within the div */
            transition: background-color 0.3s ease;
        }

        /* Blue line at the top of the outer div */
        .outer::before {
            content: "";
            display: block;
            width: 100%;
            height: 1px;
            background-color: #66BAFF; /* Blue line */
            position: absolute;
            top: 0;
            left: 0;
        }

        /* Centered inner content with max-width of 950px */
        .inner {
            max-width: 950px;
            margin: 0 auto;
            padding: 20px;
            font-size: 18px;
            position: relative;
            z-index: 2; /* Ensure the text stays on top */
            color: #000; /* Default text color */
            transition: color 0.3s ease; /* Smooth text color transition */
        }

        /* Rollover effect - add two overlapping layers on hover */
        .outer::after, .outer .hover-layer-1, .outer .hover-layer-2 {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            transition: opacity 0.5s ease;
            pointer-events: none; /* Disable pointer events for these layers */
            opacity: 0; /* Initially hidden */
        }

       .outer .hover-layer-1 {
            background-color: rgba(2, 35, 62, 0.5); /* Blue layer */
        }

        .outer .hover-layer-2 {
            background-color: rgba(102, 186, 255, 0.5); /* Light Blue layer */
        }

        .outer:hover .hover-layer-1 {
            opacity: 1; /* Show red on hover */
        }

        .outer:hover .hover-layer-2 {
            opacity: 0.7; /* Show green on hover with some transparency */
        }

        /* Change text color on hover */
		.outer-div:hover .inner-div h4 {
            color: #02233E; /* Change to blue on hover */
        }

        /* Make the entire outer div clickable */
        a.outer-link {
            text-decoration: none;
            color: inherit; /* Inherit color from parent */
            display: block; /* Ensure it takes up full div space */
        }

        /* On hover, change the cursor */
        a.outer-link:hover {
            cursor: pointer;
        }

.section {
            width:100%;
	max-width: 950px;
            margin: 0 auto;
        }

        /* Section 1: Text at the top, image below */
        .section-1 {
            text-align: left;
			padding: 40px 0;
        }

        .section-1 img {
            width: 100%;
            height: auto;
        }

 /* Section 2: Text left, image right */
        .section-2 {
            display: flex;
            flex-wrap: wrap;
            align-items: top;
            justify-content: space-between;
			padding: 40px 0;
        }

 .section-2 .text {
    width: 30%; /* Text occupies 30% of the width */
	 
}

.section-2 img {
    width: 65%; /* Image occupies 65% of the width */
    height: auto; /* Maintain aspect ratio */
}

        /* Section 3: Two images side by side */
        .section-3 {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
			padding: 40px 0;
        }

        .section-3 img {
            width: 48%;
            height: auto;
        }

        /* Section 4: Centered image */
        .section-4 {
            text-align: left;
			padding: 40px 0;
        }

        .section-4 img {
            width: 100%;
            height: auto;
        }

        /* Section 5: Two rows, two columns images */
        .section-5 {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Two columns */
            grid-template-rows: repeat(2, auto); /* Two rows */
            gap: 20px;
			padding: 40px 0;
        }

        .section-5 img {
            width: 100%;
            height: auto;
        }


 /* Section 6: Title on top, two rows, two columns of images */
        .section-6 {
            min-width: 950px;
			display: grid;
            grid-template-columns: repeat(2, 1fr); /* Two columns */
            grid-template-rows: auto repeat(2, auto); /* Title row + two rows for images */
            gap: 20px; /* Space between items */
            margin: 0px; /* Optional margin for spacing around the section */
			padding: 0px 0;
        }

        .section-6 .text{
            grid-column: span 2; /* Make the title span both columns */
            text-align: left;
            font-size: 24px; /* Title font size */
        }

        .section-6 img {
            width: 100%; /* Full width for images */
            height: auto; /* Maintain aspect ratio */
        }

/* Section 7: Text on the left, two columns of images on the right */
      .section-7 {
            display: flex; /* Use flexbox layout */
            gap: 20px; /* Space between text and images */
            align-items: center; /* Vertically center the items */
            padding: 40px 0;
        }

        .section-7 .text {
            width: 25%; /* Set text width */
        }

        .section-7 .images {
            display: grid; /* Use grid for the images */
            grid-template-columns: repeat(2, 1fr); /* Two columns */
            gap: 20px; /* Space between images */
            width: 75%; /* Set width for the images section */
        }

        .section-7 img {
            width: 100%; /* Full width for images */
            height: auto; /* Maintain aspect ratio */
        }

/* Section 8: Three images in a row using flexbox */
        .section-8 {
            display: flex; /* Use flexbox for layout */
            justify-content: space-between; /* Space images evenly */
            padding: 40px 0;
        }

        .section-8 img {
            width: 32%; /* Set each image to occupy 32% of the width */
            height: auto; /* Maintain aspect ratio */
            border-radius: 8px; /* Optional styling for rounded corners */
        }

/* Section 9: One image on the left, two stacked images on the right */
        .section-9 {
            width:100%;
			display: grid;
            grid-template-columns: 1fr .62fr; /* Two columns */
            gap: 20px; /* Space between columns */
            padding: 40px 0;
        }

        /* Left image takes full height */
        .section-9 .left-image {
            grid-row: 1 / 3; /* Span two rows */
        }

        .section-9 img {
            width: 100%; /* Full width for all images */
            height: auto; /* Maintain aspect ratio */
           /* border-radius: 8px; /* Optional styling for rounded corners */
        }

        /* Right-side images stacked */
        .section-9 .right-image-top, 
        .section-9 .right-image-bottom {
            width: 100%; /* Full width for right images */
        }


/* Section 10: Layout with text left, three stacked images on right */
        .section-10 {
            display: flex; /* Use flexbox for layout */
            flex-wrap: wrap; /* Allow wrapping for smaller screens */
            justify-content: space-between; /* Space between text and images */
            align-items: top; /* Align items vertically */
            padding: 40px 0; /* Padding around the section */
        }

        .section-10 .text {
            width: 25%; /* Text occupies 25% of the div */
            font-size: 18px; /* Font size for text */
            font-family: Arial, sans-serif; /* Font styling */
        }

        .section-10 .images {
            width: 65%; /* Images occupy 75% of the div */
            display: flex; /* Create flex container for images */
            flex-direction: column; /* Stack the images vertically */
            gap: 20px; /* Space between stacked images */
        }

        .section-10 .images img {
            width: 100%; /* Images take up full width of their container */
            height: auto; /* Maintain aspect ratio */
         
        }



/* Section 11: Text on top, images below in two columns */
        .section-11 {
            width: 100%;
            margin: 0 auto;
            text-align: left;
			
        }

        .section-11 .text {
            margin-bottom: 20px; /* Space between text and images */
        }

        .section-11 .images {
            display: grid; /* Use CSS Grid for the images */
            grid-template-columns: repeat(2, 1fr); /* Two columns */
            grid-template-rows: repeat(2, auto); /* Two rows */
            gap: 20px; /* Space between images */
        }

        .section-11 .images img {
            width: 100%; /* Make images responsive */
            height: auto; /* Maintain aspect ratio */
            border-radius: 8px; /* Optional rounded corners */
        }

.footer {
            width: 100%;
			height:110px;
            color: white;
			background-color:#276FB7;
            padding: 20px 0;
            position: relative;
			bottom:0;
        }

        .footer .line {
            width: 100%;
            height: 1px;
            background-color: #66BAFF; 
            position: absolute;
            top: 0;
            left: 0;
        }

        .footer .container {
            display: flex;
            justify-content: center; /* Centers the icons */
            align-items: center;
            width:72px;
			height: 60%; 
        }

        .footer .column {
            margin: 0 10px;
        }

        .footer .icon {
            width: 24px;
            height: 24px;
        }

        .footer p {
            text-align: center;
            font-size: 14px;
        }
   /* Make the footer stick to the bottom */
        /*.footer {
            margin-top: auto; /* Pushes the footer to the bottom of the page */

 .email-link {
    color: #66BAFF;
    font-size: 48px; 
    font-family: Arial, sans-serif; 
    text-decoration: underline; 
	 
  }

  /* Hover effect */
  .email-link:hover {
    text-decoration: none; /* Add underline on hover */
  }

.email{
	width: 100%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  text-align: center;
	padding-bottom: 20px;
}

.social {
  display: flex;            
  justify-content: center;   
  gap: 20px;                 
  padding-top: 20px;
	padding-bottom: 250px;
}

.social img {
  width: 56px;               
  height: 56px;              
  object-fit: contain;       
}

/* wrk page */
.work-section {
      padding: 40px 20px;
    }

    .work-section h2 {
      text-align: center;
      margin-bottom: 40px;
      font-size: 2em;
    }

    /* Grid Container */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 32px);

    width:100%;
  max-width: 950px;
  margin: 0 auto;
}

    /* Individual Project Tiles */
.project-tile {
  display: block; 
    cursor: pointer;
    text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.project-tile:hover {
    transform: translateY(-3px);
    transition: transform 0.2s ease;
}

.project-tile img {
  width: 100%;
  height: auto;
  display: block;
  background-color: #fff;
  border-radius: 8px;
  padding: 0; 
  margin-left: auto;
  margin-right: auto; 
}

.project-content {
  margin-top: 12px;
}


   /* Project Page */ 

 .post-top {
  width:100%;
    max-width: 950px;
    margin: 0 auto;
    padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-info {
  flex: 1;            
  text-align: left;
  margin: 0 ;
  padding: 0;
}

.post-img {
  width: 350px;
  height: 220px;
  padding: 20px;
  background-color: #ffffff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;    
}

.post-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.post-details {
  width:100%;
    max-width: 950px;
    margin: 0 auto;
    padding-bottom:20px;
}

.full-img-container {
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  padding-bottom:20px;
}

.full-img-container img {
  width: 100%;
  height: auto;
  display: block;
}

.mid-img-container {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding-bottom:20px;
}

.mid-img-container img {
  width: 100%;
  height: auto;
  display: block;
}

.three-img {
  display: flex;
  gap: 20px; /* space between images */
}

.three-img img {
  width: calc(33.333% - 13.33px);
  height: auto;
}


.four-img {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.four-img img {
  width: 100%;
  height: auto;
  display: block;
}


.triple{
    display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.triple img {
  width: 100%;
  height: auto;
  display: block;
}




@media (max-width: 480px) {
      .work-section {
        padding: 20px 10px;
      }

      .work-section h2 {
        font-size: 1.5em;
      }
    }




@media (max-width: 768px) {

	
h1, h1 .white{
font-size:45px;
line-height:52px;
}


h2, .email-link{

	font-weight:800;
	font-size:24px;
	padding-bottom:10px;
}
	

h3{
	font-weight:300;
	font-size:34px;
	padding-bottom:10px;
}
	
	.column h3{
		font-size:24px;
	}	

h4{

	font-weight:300;
	font-size:20px;
}
	
	.social {                 
  padding-top: 10px;
}



.title{
		width:100%;
	display:block;
	text-align:center;
	
	}	

	.subtext {
		width:90%;
	}

.prj-container {
            width: 90%;
        }

.prj-text {
            width:90%  
        }


        /* Blue line */
        .blue-line {
            width: 100%; /* Full width line */
        }


.prj-title {
           width: 90%;
            
         
        }
	.line{
		width:50%
	}
	
.navigation, .column, .items, .logo, .footer{
		width:100%;
	}
	
	
.post-img{display:none;}
	
	
#intro{
	width:90%;
}
	
	.bio{
		width:90%;
	}

	.divider{
		width:90%;
	}

.full-width {
            width: 100%;
            display: block;
        }


        /* Content inside the full-width div */
        .full-width-content img{
			width:100%;
			height:auto;
           
        }	
	

.mid-img-container {
  width: 90%;
  margin: 0 auto;
  padding-bottom:20px;
}

.section {
	width:90%;
	
}

.section-1, .section-2, .section-3, .section-4, .section-5, .section-5, .section-6, .section-7, .section-8, .section-9, .section-10, .section-11 {
width:100%;
display: block;
margin: auto 0;
padding: 20px 0;
	
}

.section-1 img, .section-2 img, .section-3 img, .section-4 img, .section-5 img, .section-7 img, .section-9 img, .section-10 img, .section-11 img
	{ width:100%;
	margin-bottom:10px;
	
	}	

	.content{
		width:100%;
		
	}
	
/* Section 2: Text left, image right */
        .section-2 {
            display: block;
           
        }

 .section-2 .text {
    width: 90%; 
	 
}	

/* Section 6: Title on top, two rows, two columns of images */
        .section-6 {
            
			display: block;
            grid-template-columns: repeat(1); /* Two columns */
            grid-template-rows: auto repeat(2, auto); /* Title row + two rows for images */
            
        }
	
/* Section 7: Text on the left, two columns of images on the right */
      .section-7 {
            display: block; /* Use flexbox layout */
            gap: 20px; /* Space between text and images */
            align-items: center; /* Vertically center the items */
            
        }	
	
.section-7 .text {
            width: 100%; /* Set text width */
        }

        .section-7 .images {
            display: block; /* Use grid for the images */
            gap: 20px; /* Space between images */
            width: 100%; /* Set width for the images section */
        }	
	
/* Section 10: Layout with text left, three stacked images on right */
        .section-10 {
            display: block;
            padding: 20px 0;
        }

        .section-10 .text {
            width: 100%; 
        }

        .section-10 .images {
            width: 100%; 
            display: block; 
        }

        .section-10 .images img {
            width: 100%; 
            height: auto; 
         
        }
	
.container, .column {
    width:90%;
	display:block;
	padding-bottom:40px;
	}
	.trust-logos {
                grid-template-columns: 1fr; /* Stack into one column */
                grid-template-rows: repeat(6, auto); /* Adjust rows to stack all items */
            }

.breadcrumb-container{
    width:90%;
    margin: 0 auto;}

.post-top {
    width:90%;
    margin: 0 auto;
    flex-direction: column;
    padding: 20px 0;
  }

  .post-info {
  flex: 1;
  text-align: center;
}

  .post-img {
    width: 100%;
    max-width: 350px;
  }

  .post-details {
    width:90%;
        flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

.full-img-container {
    width: 90%;
  }

 .three-img {
    flex-direction: column;
  }

  .three-img img {
    width: 100%;
  }

  .four-img {
    grid-template-columns: 1fr;
  }

/* Wrk page */
   .work-grid {
    grid-template-columns: 1fr;
   }
}