/* Style for the entire body of the webpage */
body {
  /* Set a background with a linear gradient at a 45-degree angle 
     and a background image */
  background: linear-gradient(
      45deg,
      /* 45-degree gradient angle */ rgba(250, 255, 255, 0.1),
      /* Semi-transparent white as the starting color */ hsl(103, 65%, 61%)
        /* A shade of green as the ending color */
    ),
    url(images/selemanphotos.png); /* The background image URL */

  /* Ensure the background covers the entire viewport */
  background-size: cover;

  /* Keep the background image fixed in place when scrolling */
  background-attachment: fixed;

  /* Center the background image within the viewport */
  background-position: center;

  /* Prevent the background image from repeating */
  background-repeat: no-repeat;

  /* Set the body height to cover the full viewport height */
  height: 100vh;

  /* Remove any default margin around the body */
  margin: 0;

  /* Remove any default padding inside the body */
  padding: 0;

  /* Set the font family to Tahoma, with sans-serif as a fallback */
  font-family: "Tahoma", sans-serif;
}

/* Initial style for h1 */
h1 {
  font-size: 140px; /* Sets the font size to 50 pixels for a large heading */
  color: #ffffff; /* Sets the text color to white */
  text-align: center; /* Centers the text horizontally */
  font-family: "Arial", sans-serif; /* Uses Arial font, with sans-serif as a fallback */
  font-weight: bold; /* Makes the text bold */
  /* Fix the position of the button relative to the viewport 
     (stays in place while scrolling) */
  position: fixed;

  /* Position the button 2% from the bottom of the viewport */
  bottom: 65%;

  /* Position the button 2% from the right edge of the viewport */
  right: 45%;
  /* Creates a multicolor gradient background */
  background: linear-gradient(45deg, #ff0000, #ff9900, #00ff00, #0000ff);

  background-size: 300%; /* Enlarges the background size for animation effect */

  /* Clips the background to the text, making the gradient visible only on the text */
  -webkit-background-clip: text; /* Applies background clipping for WebKit browsers */
  background-clip: text; /* Applies background clipping for all other browsers */

  color: transparent; /* Makes the text color transparent to show the gradient background */

  /* Applies animation with a duration of 5 seconds, easing function, and infinite loop */
  animation: textAnimation 7s ease infinite;

  /* Smooth transition for hover effect */
  transition: transform 0.8s ease; /* Applies a smooth transition for the transform property */
}

/* Hover effect for h1 */
h1:hover {
  /* Scales the text to 1.1 times its size and rotates it by 5 degrees on hover */
  transform: scale(1.1) rotate(5deg);

  cursor: pointer; /* Changes the cursor to a pointer (hand icon) on hover */
}

/* Keyframes for text animation */
@keyframes textAnimation {
  0% {
    background-position: 0% 50%; /* Starts the background at the left */
  }
  50% {
    background-position: 100% 50%; /* Moves the background to the right */
  }
  100% {
    background-position: 0% 50%; /* Returns the background to the starting position */
  }
}

/* Initial style for h2 */
h2 {
  font-size: 100px; /* Sets the font size to 50 pixels for a large heading */
  color: #ffffff; /* Sets the text color to white */
  text-align: center; /* Centers the text horizontally */
  font-family: "Arial", sans-serif; /* Uses Arial font, with sans-serif as a fallback */
  font-weight: bold; /* Makes the text bold */

  /* Fix the position of the button relative to the viewport 
     (stays in place while scrolling) */
  position: fixed;

  /* Position the button 38% from the bottom of the viewport */
  bottom: 30%;

  /* Position the button 30% from the right edge of the viewport */
  right: 38%;
  /* Creates a multicolor gradient background */
  background: linear-gradient(45deg, #ffffff, #ff9900, #ffffff, #f5f5f8);

  background-size: 300%; /* Enlarges the background size for animation effect */

  /* Clips the background to the text, making the gradient visible only on the text */
  -webkit-background-clip: text; /* Applies background clipping for WebKit browsers */
  background-clip: text; /* Applies background clipping for all other browsers */

  color: transparent; /* Makes the text color transparent to show the gradient background */

  /* Applies animation with a duration of 5 seconds, easing function, and infinite loop */
  animation: textAnimation 7s ease infinite;

  /* Smooth transition for hover effect */
  transition: transform 0.8s ease; /* Applies a smooth transition for the transform property */
}

/* Hover effect for h1 */
h2:hover {
  /* Scales the text to 1.1 times its size and rotates it by 5 degrees on hover */
  transform: scale(1.1) rotate(5deg);

  cursor: pointer; /* Changes the cursor to a pointer (hand icon) on hover */
}

/* Keyframes for text animation */
@keyframes textAnimation {
  0% {
    background-position: 0% 50%; /* Starts the background at the left */
  }
  50% {
    background-position: 100% 50%; /* Moves the background to the right */
  }
  100% {
    background-position: 0% 50%; /* Returns the background to the starting position */
  }
}



.social-banner 
{
  position: fixed; /* Sticks the banner on the left */
  left: 0;
  top: 4%; /* Centers it vertically */
  /*transform: translateY(-50%); /* Centers vertically */
  display: flex;
  flex-direction: column; /* Stacks icons vertically */
  gap: 15px; /* Adds space between icons */
   
  
  /*background-color: #fff; /* Optional: background color */
  /*box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Optional: adds shadow */
}

 .software-development-icon 
 {
    filter: grayscale(0%) brightness(0%);
 }
.social-banner a img {
  width: 40px; /* Adjust the size of the icons */
  height: 40px;
  transition: transform 0.5s; /* Add hover effect */
}

.social-banner a img:hover 
{
 /* transform: scale(1.5); /* Slightly enlarge icons on hover */
   /* transform: rotate(360deg); /*  rotates the element by 45 degrees*/
  transform: scale(1.5) rotate(360deg);
}





/* Style for the 'seemore' button */
.seemore 
{
  /* Set the text color to white */
  color: rgb(255, 255, 255);

  /* Fix the position of the button relative to the viewport 
     (stays in place while scrolling) */
  position: fixed;

  /* Position the button 2% from the bottom of the viewport */
  top: 2%;

  /* Position the button 2% from the right edge of the viewport */
  right: 2%;

  /* Align the text inside the button to the right */
  text-align: right;

  /* Set the font size to 20px */
  font-size: 20px;

  /* Make the text bold */
  font-weight: bold;

  /* Set the background color of the button to green */
  background: rgb(0, 128, 0);

  /* Add rounded corners with a radius of 5px */
  border-radius: 5px;

  /* Add padding inside the button (top-bottom: 8px, left-right: 12px) */
  padding: 8px 12px;

  /* Change the cursor to a pointer when hovering over the button */
  cursor: pointer;

  /* Remove underline from the button text */
  text-decoration: none;

  /* Add a transition effect for the background color and text color */
  transition: background-color 0.3s, color 0.3s;
}

/* Hover effect for the 'seemore' button */
.seemore:hover {
  /* Darken the background color when hovering */
  background-color: rgb(25, 224, 25);

  /* Keep the text color white when hovering */
  color: rgb(252, 252, 250);
}


.important-links {
    position: fixed; /* Keeps the footer at the bottom even when scrolling */
    right: 0; /* Positions the container at the right of the viewport */
    bottom: 0; /* Positions the container at the bottom of the viewport */
    left: 0; /* Positions the container at the left of the viewport */
    width: 100%; /* Makes the container stretch across the full width of the page */
    background: linear-gradient(to right, #2a3118, #450606); /* Light gradient background */
    text-align: center; /* Centers the links horizontally */
    padding-top: 10px; /* Padding on the top */
    padding-right: 10px; /* Padding on the right */
    padding-bottom: 10px; /* Padding on the bottom */
    padding-left: 10px; /* Padding on the left */
    box-shadow: 0 -2px 5px rgba(241, 235, 235, 0.1); /* Adds a slight shadow for separation from the content above */
    border-top: 1px solid #e6b7b7; /* Adds a light top border */
    z-index: 1000; /* Ensures the footer is above other elements */
    font-family: Arial, sans-serif; /* Sets the font family */
    font-size: clamp(15px, 18px, 20px); /* Sets the font size responsively */
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition for hover effects */
}

.important-links a {
    color: #fefefe; /* Change link color */
    text-decoration: none; /* Remove underline from links */
    padding-top: 5px;    /* Adds padding to the top */
    padding-right: 45px;  /* Adds padding to the right */
    padding-bottom: 5px; /* Adds padding to the bottom */
    padding-left: 10px;   /* Adds padding to the left */
    margin-top: 0px;     /* Adds margin to the top */
    margin-right: 15px;   /* Adds margin to the right */
    margin-bottom: 0px;  /* Adds margin to the bottom */
    margin-left: 15px;    /* Adds margin to the left */
}

.important-links a:hover {
    text-decoration: underline; /* Underline links on hover */
    color: #ebc20d; /* Darker color on hover */
}







/* Responsive adjustments for different screen sizes */

/* Styles for screens larger than 1200px */
@media (min-width: 1201px) {
    body {
        /* Example styles for large screens */
        background-color: #f0f0f0; /* Light gray background */
        font-size: 18px; /* Larger font size */
    }

    h1 {
        font-size: 60px; /* Heading size for large screens */
        margin-bottom: 20px; /* Space below heading */
    }

    h2 {
        font-size: 40px; /* Subheading size for large screens */
        margin-bottom: 15px; /* Space below subheading */
    }

    .seemore {
        font-size: 24px; /* Button text size for large screens */
        padding: 12px 20px; /* Button padding for large screens */
        position: fixed; /* Fixed position for button */
        top: 1%; /* Distance from the bottom */
        right: 1%; /* Distance from the right */
    }

    .important-links {
        font-size: 20px; /* Font size for important links */
        padding: 10px; /* Padding for links */
    }

    .important-links a {
        color: #efe2e2; /* Link color for large screens */
        text-decoration: none; /* No underline for links */
        margin-right: 5px; /* Space between links */
    }
}



/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) 
{
  /* Style for the entire body of the webpage */
body {
  /* Set a background with a linear gradient at a 45-degree angle 
     and a background image */
  background: linear-gradient(rgba(250, 255, 255, 0.5),
      /* Semi-transparent white as the starting color */ hsl(103, 65%, 61%)
        /* A shade of green as the ending color */
    ),
    url(images/sele5.png); /* The background image URL */

  /* Ensure the background covers the entire viewport */
  background-size: cover;

  /* Keep the background image fixed in place when scrolling */
  background-attachment: fixed;

  /* Center the background image within the viewport */
  background-position: center;

  /* Prevent the background image from repeating */
  background-repeat: no-repeat;

  /* Set the body height to cover the full viewport height */
  height: 100vh;

  /* Remove any default margin around the body */
  margin: 0;

  /* Remove any default padding inside the body */
  padding: 0;

  /* Set the font family to Tahoma, with sans-serif as a fallback */
  font-family: "Tahoma", sans-serif;
}

  .seemore {
    /* Increase the font size and padding on large screens */
    font-size: 22px;
    padding: 10px 14px;
  }

  h1 {
    font-size: 100px;
  }

  h2 {
    font-size: 70px; /* Use rem for scalable font size */
  }
  
  .important-links {
        font-size: clamp(10px, 3vw, 18px); /* Responsive font size */
        padding: 6px 2%; /* Adjust padding for small screens */
    }

    .important-links a {
        font-size: 18px; /* Font size for important links */
        padding: 6px 8px; /* Reduce padding to fit in one line */
        margin-right: 3px; /* Smaller margin between links */
        display: inline-block; /* Keep the links inline */
        white-space: nowrap; /* Prevent links from breaking into multiple lines */
    }
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px)
{
 
  /* Style for the entire body of the webpage */
body 
{
  /* Set a background with a linear gradient at a 45-degree angle 
     and a background image */
  background: linear-gradient(rgba(250, 255, 255, 0.4),
      /* Semi-transparent white as the starting color */ hsl(103, 65%, 61%)
        /* A shade of green as the ending color */
    ),
    url(images/sele5.png); /* The background image URL */

  /* Ensure the background covers the entire viewport */
  background-size: cover;

  /* Keep the background image fixed in place when scrolling */
  background-attachment: fixed;

  /* Center the background image within the viewport */
  background-position: center;

  /* Prevent the background image from repeating */
  background-repeat: no-repeat;

  /* Set the body height to cover the full viewport height */
  height: 100vh;

  /* Remove any default margin around the body */
  margin: 0;

  /* Remove any default padding inside the body */
  padding: 0;

  /* Set the font family to Tahoma, with sans-serif as a fallback */
  font-family: "Tahoma", sans-serif;
}


  .seemore {
    /* Adjust font size and padding for large screens */
    font-size: 20px;
    padding: 8px 12px;
  }
  h1 {
    font-size: 140px; /* Use rem for scalable font size */

    /* Position the button 35% from the bottom of the viewport */
    bottom: 58%;

    /* Position the button 7% from the right edge of the viewport */
    right: 17%;
  }

  h2 {
    font-size: 50px; /* Use rem for scalable font size */
    /* Position the button 35% from the bottom of the viewport */
    bottom: 28%;

    /* Position the button 7% from the right edge of the viewport */
    right: 17%;
  }
  
  .important-links {
        font-size: clamp(10px, 3vw, 18px); /* Smaller font size for very small devices */
        padding: 6px 2%; /* Adjust padding for small screens */
    }

    .important-links a {
        font-size: 18px; /* Font size for important links */
        padding: 4px 6px; /* Reduce padding to fit in one line */
        margin-right: 3px; /* Smaller margin between links */
        display: inline-block; /* Keep the links inline */
        white-space: nowrap; /* Prevent links from breaking into multiple lines */
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) 

  
{
  /* Style for the entire body of the webpage */
body {
  /* Set a background with a linear gradient at a 45-degree angle 
     and a background image */
  background: linear-gradient(rgba(250, 255, 255, 0.4),
      /* Semi-transparent white as the starting color */ hsl(103, 65%, 61%)
        /* A shade of green as the ending color */
    ),
    url(images/sele5.png); /* The background image URL */

  /* Ensure the background covers the entire viewport */
  background-size: cover;

  /* Keep the background image fixed in place when scrolling */
  background-attachment: fixed;

  /* Center the background image within the viewport */
  background-position: center;

  /* Prevent the background image from repeating */
  background-repeat: no-repeat;

  /* Set the body height to cover the full viewport height */
  height: 100vh;

  /* Remove any default margin around the body */
  margin: 0;

  /* Remove any default padding inside the body */
  padding: 0;

  /* Set the font family to Tahoma, with sans-serif as a fallback */
  font-family: "Tahoma", sans-serif;
}


  .seemore {
    /* Reduce the font size and padding for medium screens */
    font-size: 18px;
    padding: 6px 10px;
  }
  h1 {
    font-size: 40px; /* Use rem for scalable font size */
  }

  h2 {
    font-size: 40px; /* Use rem for scalable font size */
  }
  
  .important-links {
        font-size: clamp(10px, 3vw, 18px); /* Smaller font size for very small devices */
        padding: 8px 2%; /* Adjust padding for small screens */
    }

    .important-links a {
        font-size: 16px; /* Font size for important links */
        padding: 6px 8px; /* Reduce padding to fit in one line */
        margin-right: 5px; /* Smaller margin between links */
        display: inline-block; /* Keep the links inline */
        white-space: nowrap; /* Prevent links from breaking into multiple lines */
    }
  
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) 
{
  /* Style for the entire body of the webpage */
body {
  /* Set a background with a linear gradient at a 45-degree angle 
     and a background image */
  background: linear-gradient(rgba(250, 255, 255, 0.4),
      /* Semi-transparent white as the starting color */ hsl(103, 65%, 61%)
        /* A shade of green as the ending color */
    ),
    url(images/sele5.png); /* The background image URL */

  /* Ensure the background covers the entire viewport */
  background-size: cover;

  /* Keep the background image fixed in place when scrolling */
  background-attachment: fixed;

  /* Center the background image within the viewport */
  background-position: center;

  /* Prevent the background image from repeating */
  background-repeat: no-repeat;

  /* Set the body height to cover the full viewport height */
  height: 100vh;

  /* Remove any default margin around the body */
  margin: 0;

  /* Remove any default padding inside the body */
  padding: 0;

  /* Set the font family to Tahoma, with sans-serif as a fallback */
  font-family: "Tahoma", sans-serif;
}


  .seemore {
    /* Further reduce the font size and padding for small screens */
    font-size: 16px;
    padding: 5px 9px;
  }
  h1 {
    font-size: 40px; /* Use rem for scalable font size */
  }

  h2 {
    font-size: 40px; /* Use rem for scalable font size */
  }
  
  .important-links {
        font-size: clamp(10px, 3vw, 18px); /* Smaller font size for very small devices */
        padding: 10px 2%; /* Adjust padding for small screens */
    }

    .important-links a {
        font-size: 16px; /* Font size for important links */
        padding: 6px 8px; /* Reduce padding to fit in one line */
        margin-right: 5px; /* Smaller margin between links */
        display: inline-block; /* Keep the links inline */
        white-space: nowrap; /* Prevent links from breaking into multiple lines */
    }
  
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 480px) 

{
  /* Style for the entire body of the webpage */
body
{
  /* Set a background with a linear gradient at a 45-degree angle 
     and a background image */
  background: linear-gradient(rgba(250, 255, 255, 0.4),
      /* Semi-transparent white as the starting color */ hsl(103, 65%, 61%)
        /* A shade of green as the ending color */
    ),
    url(images/sele5.png); /* The background image URL */

  /* Ensure the background covers the entire viewport */
  background-size: cover;

  /* Keep the background image fixed in place when scrolling */
  background-attachment: fixed;

  /* Center the background image within the viewport */
  background-position: center;

  /* Prevent the background image from repeating */
  background-repeat: no-repeat;

  /* Set the body height to cover the full viewport height */
  height: 100vh;

  /* Remove any default margin around the body */
  margin: 0;

  /* Remove any default padding inside the body */
  padding: 0;

  /* Set the font family to Tahoma, with sans-serif as a fallback */
  font-family: "Tahoma", sans-serif;
}

  .seemore 
  {
    /* Set the font size to 14px for extra small screens */
    font-size: 14px;

    /* Reduce the padding for extra small screens */
    padding: 4px 8px;

    /* Adjust the position of the button to 5% from the bottom and right */
    top: 1%;
    right: 1%;
  }
  h1
  {
    font-size: 40px;
    /* Position the button 65% from the bottom of the viewport */
    bottom: 65%;

    /* Position the button 27% from the right edge of the viewport */
    right: 27%;
  }

  h2 
  {
    font-size: 25px;
    /* Position the button 35% from the bottom of the viewport */
    bottom: 35%;

    /* Position the button 7% from the right edge of the viewport */
    right: 7%;
  }
  
  .important-links {
        text-align: center; /* Center the links */
        padding: 8px 3px; /* Adjust padding for smaller screens */
        white-space: nowrap; /* Prevent wrapping */
        overflow-x: auto; /* Allow horizontal scrolling if necessary */
    }

    .important-links a
     {
        font-size: 14px; /* Smaller font size for small devices */
        padding: 6px 8px; /* Reduce padding to fit in one line */
        margin-right: 3px; /* Smaller margin between links */
        display: inline-block; /* Keep the links inline */
        white-space: nowrap; /* Prevent links from breaking into multiple lines */
    }
  
}


/* Portrait orientation */
@media (orientation: portrait) {
    .important-links {
        /* Adjustments for portrait mode */
        padding: 10px 5%; /* Adjust padding for portrait */
    }
}

/* Landscape orientation */
@media (orientation: landscape) {
    .important-links {
        /* Adjustments for landscape mode */
        padding: 10px 7%; /* Adjust padding for landscape */
    }
}

/* High-resolution screens */
@media (min-resolution: 192dpi) {
    .important-links {
        /* Styles for high-resolution displays */
        font-size: clamp(18px, 2.5vw + 1em, 22px); /* Larger font size for high-resolution */
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .important-links {
        background: #333; /* Darker background for dark mode */
        color: #fff; /* Lighter text color */
    }

    .important-links a {
        color: #fff; /* Ensure links are white in dark mode */
        text-decoration: underline; /* Optional: underlining links for visibility */
    }

    .important-links a:hover {
        color: #ffcc00; /* Change link color on hover for better visibility */
    }
}