/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : May 13, 2025, 9:59:28 AM
    Author     : DELL
*/
@media (max-width: 768px) {
.image-display{
    width: 100%;
    z-index: 1;
    height: 100px;
}
.image-display img{
    width: 100%;
    margin-left: -0.2%;
    height: 120px;
    z-index: 1;
}
.image-display::before {
    content: "";
    position: absolute;
    top: 100px; left: 0;
    width: 100%; height: 120px;
    background-color: #00aeef; /* Blue with 40% opacity */
    opacity: 0.8;
    z-index: 2;
}
.image-display div:nth-child(2){
    position: absolute;
    top:210px;
    left: 2%;
    z-index: 4;
    width: 100%;
}
.image-display div:nth-child(3){
    position: absolute;
    top:20%;
    left: 5%;
    z-index: 4;
}
.image-display div:nth-child(2) p{
    font-family: Bahnschrift;
    font-size: 1.5em;
    color: #00aeef;
    font-weight: bolder;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    /*background: linear-gradient(90deg, #00C9FF, #92FE9D);*/
    background-color: #00aeef;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    text-align: center;
}
.image-display div:nth-child(3) p{
    font-family: Bahnschrift;
    font-size: 14px;
    color: #00aeef;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: fullsize-kana;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    /*background: linear-gradient(90deg, #00C9FF, #92FE9D);*/
    background-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: white;
    display: inline-block;
    margin: 20px;
}
.contain{
   position: relative;
   margin-top: 20%;
   padding: 0%;
   width: 100%;
   margin-left: 0;
   display: block;
   height: fit-content;
}
.contain .img{
    box-sizing: border-box;
    width: 100%;
    padding: 0%;
    display: block;
    margin-left: -1%;
}
.contain .caption{
    box-sizing: border-box;
    position: absolute;
    top: 43%;
    left:0.3%;
    background-color: black;
    opacity: 0.4;
    width: 99.7%;
    height: 20%;
    color: white;
    z-index: 5;
}
.contain h3{
    color: white;
    position: absolute;
    top:46%;
    left: 5%;
    z-index: 6;
}
.contain p{
    color: white;
    position: absolute;
    top:53%;
    left: 5%;
}
.contain .img img{
    width: 100%;
}
.contain .img img:hover{
    opacity: 0.8;
}
.contain .text{
    position: relative;
    width: 90%;
    margin-top:5%;
    padding: 4%;
    display: block;
}
.contain .text h1{
    font-family: 'Titillium Web', sans-serif;
    font-size: 1.5em;
    font-weight: bolder;
    position: relative;
    text-align: center;
    text-justify: inter-word;
    text-transform: capitalize;
    margin-top:0%;
}
.contain .text p{
    text-align: justify;
    word-wrap: normal;
    hyphens: auto;
    color: black;
    top:65%;
    font-size: 18px;
    padding: 2%;
}
.zoom-section{
  position: relative;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.6s ease-out;
  background-color: white;
  z-index: 1;
}
.zoom-section.visible {
  opacity: 1;
  transform: scale(1);
}
.zoom-section:nth-of-type(2){
    background-color: #00aeef;
    height: 450px;
}
.section {
      position: relative;
      background: #f4f4f4;
      padding: 5% 1%;
      text-align: center;
      overflow: hidden;
      margin-top: 100%;
    }

    .section::before {
      content: "15 YEARS EXPERIENCES";
      position: absolute;
      top: 1%;
      left: 40%;
      transform: translate(-50%, -50%);
      font-size: 4em;
     color: transparent; /* No fill */
      -webkit-text-stroke: 2px #00aeef; /* Outline in blue */
      text-align: center;
      font-weight: bold;
      border: transparent  outset 10px;
      border-radius: 50%;
      padding:13% 0%;
      white-space: normal;
      pointer-events: none;
      text-transform: capitalize;
      z-index: 0;
      opacity: 0.3;
      transform: rotate(45deg);
      transform-origin: top left;
    }

    .section-content {
      position: relative;
      z-index: 1;
      font-size: 20px;
      text-align: justify;
      color: #333;
      padding: 8%;
    }
    .section-content h1{
        font-size: 1em;
        text-align: center;
        margin-top:-10%;
    }
    .section-content p{
        line-height: 1.6;
        text-align: justify;
        word-wrap: normal;
        hyphens: auto;
    }
}
@media (min-width: 768px) {
.image-display{
    width: 100%;
    z-index: 3;
    height: 200px;
    background-color: #00aeef;
}
.image-display img{
    width: 100%;
    height: 300px;
    z-index: 2;
}
.image-display::before {
    content: "";
    position: absolute;
    top: 24.6%; left: 0;
    width: 100%; height: 300px;
    background-color: #00aeef; /* Blue with 40% opacity */
    opacity: 0.8;
    z-index: 3;
}
.image-display div:nth-child(2){
    position: absolute;
    top:40%;
    left: 2%;
    z-index: 4;
    width: 100%;
}
.image-display div:nth-child(3){
    position: absolute;
    top:30%;
    left: 5%;
    z-index: 4;
}
.image-display div:nth-child(2) p{
    font-family: Bahnschrift;
    font-size: 3em;
    color: white;
    font-weight: bolder;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    /*background: linear-gradient(90deg, #00C9FF, #92FE9D);*/
    background-color: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin: 10%;
}
.image-display div:nth-child(3) p{
    font-family: Bahnschrift;
    font-size: 25px;
    color: #00aeef;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: fullsize-kana;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    /*background: linear-gradient(90deg, #00C9FF, #92FE9D);*/
    background-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: white;
    display: inline-block;
    margin: 20px;
}
.contain{
   position: relative;
   margin-top: 10%;
   padding: 2%;
   width: 100%;
   display: inline-block;
}
.contain .img{
    box-sizing: border-box;
    width: 40%;
    padding: 2%;
    display: inline-block;
}
.contain .caption{
    box-sizing: border-box;
    position: absolute;
    bottom: 13.5%;
    background-color: black;
    opacity: 0.4;
    width: 34.5%;
    height: 20%;
    color: white;
}
.contain h3{
    color: white;
    position: absolute;
    bottom:20%;
    left: 5%;
}
.contain p{
    color: white;
    position: absolute;
    bottom:15%;
    left: 5%;
}
.contain .img img{
    width: 100%;
}
.contain .img img:hover{
    opacity: 0.8;
}
.contain .text{
    position: absolute;
    width: 40%;
    margin-top:0px;
    padding: 2%;
    display: inline-block;
}
.contain .text h1{
    font-family: 'Titillium Web', sans-serif;
    font-size: 3.5em;
    font-weight: 800;
    position: relative;
    text-align: center;
    text-justify: inter-word;
    text-transform: capitalize;
    margin-top:-2%;
}
.contain .text p{
    color: black;
    top:65%;
    font-size: 18px;
}
.zoom-section{
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.6s ease-out;
  background-color: white;
  z-index: 1;
}
.zoom-section.visible {
  opacity: 1;
  transform: scale(1);
}
.zoom-section:nth-of-type(2){
    background-color: #00aeef;
    height: 450px;
}
.section {
      position: relative;
      background: #f4f4f4;
      padding: 60px 30px;
      text-align: center;
      overflow: hidden;
    }

    .section::before {
      content: "15 YEARS EXPERIENCES";
      position: absolute;
      top: 1%;
      left: 40%;
      transform: translate(-50%, -50%);
      font-size: 9em;
     color: transparent; /* No fill */
      -webkit-text-stroke: 2px #00aeef; /* Outline in blue */
      text-align: center;
      font-weight: bold;
      border: transparent  outset 10px;
      border-radius: 50%;
      padding:13% 0%;
      white-space: normal;
      pointer-events: none;
      text-transform: capitalize;
      z-index: 0;
      opacity: 0.3;
      transform: rotate(45deg);
      transform-origin: top left;
    }

    .section-content {
      position: relative;
      z-index: 1;
      font-size: 20px;
      text-align: justify;
      color: #333;
      padding: 8%;
    }
    .section-content h1{
        font-size: 2.4em;
        text-align: center;
        margin-top:-10%;
    }
    .section-content p{
        line-height: 1.6;
    }
}