@charset "utf-8";

body {
	background-color: #d5ebf5;
	line-height: 1.3;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}


p, li {
	text-wrap: pretty;
}

/* END OF CSS TEMPLATES */

.container {
    background-color: #FFFFFF;
    max-width: 1160px;
    min-width: 350px;
	margin: 0 auto;
	
}

.menu-bottom {
    width: 100%;
    z-index: auto;
    font-display: auto;
    color: #FFF;
    margin-left: auto;
	padding: 10px 0 10px 10px;
    background-color: black;
    font-size: 20px;
	float: left;
	text-decoration: none;
   }

.menu-bottom a {
	text-decoration: none;
}

.footer {
	font-size: 18px;
	padding: 3rem 0 1rem 0;
	text-align: center;
	background-color: gray;
	color: white;
}

    nav {
      background: #000;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem 1rem;
      position: relative;
	  padding-right: 1rem;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .logo-box {
      width: 150px;
      height: 150px;
      background: #fff;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

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

    .dc-name {
      font-size: 2.0rem;
      font-weight: bold;
    }

    .nav-bar {
      list-style: none;
      display: flex;
      gap: 8px;
    }

    .nav-bar li {
      margin-left: 0;
    }

    .nav-bar a {
      color: #fff;
      text-decoration: none;
      transition: color 0.3s ease;
      font-size: 20px;
    }

    .nav-bar a:hover {
      color: #ddd;
    }

    /* Hamburger */
    .hamburger {
      display: none !important;
      flex-direction: column;
      cursor: pointer;
    }

    .hamburger span {
      height: 3px;
      width: 25px;
      background: #fff;
      margin: 4px 0;
      display: block;
    }

.main {
    width: 100%;
    height: auto;
    background-color: aqua;
    margin: 0px;
	padding-bottom: 2em;
}

.banner {
	color: white;
	border-width: 10px;
	border-style: solid;
	border-image-source: linear-gradient(hsl(240 100% 50% / .2), hsl(0 100% 50% / .2));
	border-image-slice: fill 1;
	text-align: center;
	padding: 4rem 0;
	background-image: url("../images/web-hands.jpg");
	background-repeat: none;
	background-size: cover;
	background-position: center center;
}

.banner, h1 {
	font-size: clamp(1.875rem, 2.3vw + 1rem, 3.75rem);
}

.banner, h6 h1{
	text-shadow: 
		0.025em 0.025em 0 black,
		0.05em 0.05em 0 blue;
}

.welcome {
	padding: 3em;
}	

.welcome p {
	font-size: 25px;
	text-align: justify;
	font-weight: 700;
}

.section-all {
	width: 75%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	background: linear-gradient(gray, black);
	font: "Times New Roman";
	border-radius: 4%;
}

.section-all p {
	font-size: clamp(1.185rem, 1.75vw, 1.3rem);
	color: white;
	text-align: justify;
	font-weight: 700;
}

.section-all h2 {
	font-size: 30px
}

.section-all img {
    border-radius: 5%;
    border: thick double #FFFFFF;
}

.box1a, .box2b {
	grid-column: span 4;
	min-width: 300px;
	padding: 1rem;
}

.box1b, .box2a {
	grid-column: span 6;
	padding: 1rem;
	flex: 1;
}

.sr-page {
	width: 80%;
	margin: 0 auto;
	padding: 3em;
	font-size: 22px;
}

.sr-page a {
	color: blue;
	text-decoration: none;
	line-height: 1.6;	
}

    /* Responsive */
@media (max-width: 1090px) {
	.section-all p {
		font-size: 18px;
		}
	}


@media (max-width: 900px) {
	.section-all p {
		font-size: 21px;
	}
}


	
@media (max-width: 900px) {
	
	.section-all {
		
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		border-radius: 0;
		margin: 0 auto;
		width: 80%;
	}

	
	.section-all h2 {
		font-size: 22px
	}
	.section-all img {
		padding: 2em;
	}
}


    @media (max-width: 650px) {
      .nav-bar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #333;
        flex-direction: column;
        align-items: center;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }

      .nav-bar li {
        margin: 0.75rem 2px;
      }


      .hamburger {
        display: flex !important;
      }
   

      .nav-bar li {
        margin: 1rem 0;
      }

      .nav-bar.active {
        max-height: 250px;
      }

      
    }