/* ===============================================
   Organized CSS
   - Source: styles.css (you uploaded).
   - What I did: grouped imports, separated base styles from
     media-query blocks, normalized spacing, and added
     a short table of contents for easier navigation.
   - File produced: styles.organized.css
   =============================================== */

/* Table of Contents

   1. Imports

   2. Base / Reset / Typography

   3. Layout & Components

   4. Utilities

   5. Article & Card styles

   6. Photography / Gallery styles

   7. Media Queries (grouped)

*/

/* ------------------ Imports ------------------ */
@import url(https://fonts.googleapis.com/css?family=Comfortaa:500|Poppins:500|Titillium+Web:600|Signika+Negative:300|Noto+Colr+Emoji+Glyf|Pacifico&display=swap);

/* ------------------ Base / Typography ------------------ */
/* Import google Fonts */

/* Add all the IDs here */

#devarayanadurga,
#kuntibetta,
#skandagiri,
#kodachadri,
#makalidurga,
#shivagange,
#avalabetta,
#turahalli,
#uttaribetta,
#kauravakonda,
#nijagalbetta,
#kudremukha {
    cursor: pointer;
    transition: 0.2s;
}

#devarayanadurga:hover,
#kuntibetta:hover,
#skandagiri:hover,
#kodachadri:hover,
#makalidurga:hover,
#shivagange:hover,
#avalabetta:hover,
#turahalli:hover,
#uttaribetta:hover,
#kauravakonda:hover,
#nijagalbetta:hover,
#kudremukha:hover {
    opacity: 0.7;
}

#webLogo {
    display: inline-block;
  }

#mobileLogo {
    display: none;
  }

/* Add all the CSS class here */

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Comfortaa", cursive;

/* font-family: 'Titillium Web', sans-serif;
    font-family: 'Pacifico', cursive; */

    margin: 0;
    font-size: 1.2rem;
    line-height: 2.5 !important;
    text-align: center;
}

h1, h2 {
    color: #096fc6;
    font-family: "Titillium Web", sans-serif;
    line-height: 1.5;
}

hr {
    border-top: none;
    border-style: solid;
    border-color: #07a381;
    border-width: thin;
}

.triangle-down-green {
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;

    border-top: 60px solid #a3f6ce;
    float: right;
    margin-right: 100px;
}

.triangle-down-white {
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;

    border-top: 60px solid #f8f9fa;
    float: left;
    margin-left: 100px;
}

.vector_emoji {
    font-family: "Noto Colr Emoji Glyf";
}

.webtext {
    font-family: "Comfortaa", cursive;
    font-size: 1.2rem;
    color: #267865;
    font-weight: 600;
    line-height: 4.4rem;
    padding: 0 30px 0 30px;
}

.webtext:hover {
    text-decoration: none;
    color: #31bc9e;
}

.menubar {
    padding: 0 50px;
    font-size: 1.2rem;
    text-decoration: none;
    color: #0b6041;
    font-weight: 600;
}

.currentPage:hover {
    background-color: #259d71;
    color: #f8f9fa;
    border-radius: 50px;
    padding: 14px 30px 14px 30px;
}

.menubar:hover {
    color: white;
}

.all-contents {
    background-color: #a3f6ce;
}

.body-container {

/* background-color: #a3f6ce; */

    text-align: center;
    color: rgb(0, 0, 0);
    padding-top: 85px;
}

#title-picture {
    padding-right: 6%;
}

.body-container-title {
    margin-top: 0;
    padding-top: 100px;
    font-family: "Pacifico", cursive;
    font-size: 4.5rem;
    color: #094831;
}

.profile-picture {
    width: 80%;
    margin-top: 0;
    padding-top: 160px;
    transform: rotate(2deg);
}

.body-container-text {
    font-size: 1.2rem;
    color: #0b6041;
    font-weight: 700;
    font-kerning: none;
}

.body-center-text {
    padding-left: 280px;
    margin-bottom: 50px;
}

.bike-trekker-image {
    width: 95%;
    padding-top: 22px;
}

.body-contents-one {
    background-color: #f8f9fa;
    padding: 50px 0 25px 0;
    font-kerning: none;
}

.body-contents-two {
    background-color: #a3f6ce;
    padding: 50px 0 25px 0;
    font-kerning: none;
}

.body-contents-three {
    background-color: #f8f9fa;
    padding: 50px 0 25px 0;
    font-kerning: none;
}

.body-contents-four {
    background-color: #f8f9fa;
    padding: 15px 0 15px 0;
    font-kerning: none;
}

.row-margin {
    margin-left: -100px;
    margin-right: -100px;
    margin-bottom: -100px;
    margin-top: -100px;
}

.card-content {
    border-radius: 1rem;
}

.card-background {
    background-color: #a3f6ce !important;
}

.check-project1 {
    color: #000;
    background-color: #a3f6ce;
    border-color: #71b293;
}

.check-project1:hover {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

.check-project2 {
    color: #000;
    background-color: #fff;
    border-color: #71b293;
}

.check-project2:hover {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

.body-contents {
    color: #094831;
    font-weight: 600;
    width: 60%;
    margin: 0 auto;
    text-align: justify;
    line-height: 240%;
}

.contact-section {
    color: #094831;
    font-weight: 600;
    width: 60%;
    margin: 0 auto;
    text-align: center;
    line-height: 2;
}

.softwaredeveloper-image {
    width: 20%;
    float: left;
    margin-right: 30px;
    margin-bottom: 100px;
}

.bikerider-image {
    width: 20%;
    float: right;
    margin-left: 30px;
    margin-bottom: 100px;
}

.photographer-image {
    width: 20%;
    float: left;
    margin-right: 30px;
    margin-bottom: 100px;
}

.contactme-image {
    margin-bottom: 2%;
}

.carousel-image {
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 20px 0 rgba(0, 0, 0, 0.5);
    border: solid 4px #dfffff;
    border-radius: 8px;
}

.card-image {
    border-color: #fff;
    width: 85%;
    margin-right: 0;
    margin-bottom: 20px;
}

.card-text-line-height {
    line-height: 1.9rem;
}

.card-text {
    text-align: left;
    font-kerning: none;
}

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

.carousel-text-color {
    color: #0b6041;
    font-weight: 700;
    padding: 20px 0 50px 0;
}

.footer-links:hover {
    text-decoration: none;
    color: white;
}

.footers {
    background-color: #63dba3;
    padding-top: 2px;
    text-align: center;
}

.footer-image-link {
    padding: 1% 1% 1% 1%;
}

.footer-links {
    text-decoration: none;
    color: #094831;
    font-weight: 600;
}

/* space for Paragraph starting */

.paragraphspacing {
    text-indent: 4rem;
}

.copyright-text {
    font-size: 0.9rem;
    margin: 0;
    padding-bottom: 10px;
    color: #626262;
    font-family: "Poppins", sans-serif;
}

/* Change the Modal popup background color */

.modal-backdrop.show {
    opacity: 0.9 !important;
}

.rowCardSpace {
    padding: 30px 30px 0 30px;
}

.justifyContents {
    justify-content: center;
}

/* Float four columns side by side */

.columnCard {
    float: left;
    width: 33.333%;
    padding: 10px 30px;
}

.mainContent {
    padding: 30px 75px 75px 30px;
}

.sidebarContent {
    padding: 30px 0px 75px 75px;
}

.columnSideBar,
.columnMainContent {
    width: auto;
    padding: 0;
}

.columnSideBar .counterCardContent {
    padding-top: 10px;
}

.columnSideBar .counterCardContent .card-body .card-text {
    font-size: 1rem;
}

.columnSideBar .counterCardContent .card-body,
.columnMainContent .counterCardContent .card-body {
    display: grid;
    justify-items: center;
}

.carouselImagesWidth {
    width: 75%;
    border: 5px solid white;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.5);
    border-radius: 6px;
}

.articleContent {
    text-align: justify;
    padding: 35px 35px 0 35px;
    font-family: "Poppins";
}

.chipForHomePage {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
    font-weight: 600;
    margin: 0 10px 20px 10px;
    color: #0b6041;
    transition: ease;
}

.chipForHomePage:hover {
    transform: scale(1.1); /* Increase size by 5% when hovered over */
    cursor: pointer;
    background-color: #0cb37d;
    text-decoration: none;
    color: #f8f9fa;
}

.chipForHomePage img {
    float: left;
    margin: 0 10px 0 -25px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

.container #newsFeed {
    justify-content: flex-end;
    padding-left: 10px;
    padding-right: 10px;
}

.newsFeedDiv1 {
    background-color: #20784e;
    border: 0 solid;
    border-radius: 35px 0 0 35px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    cursor: pointer;
}

.newsFeedDiv1 h2 {
    color: white;
    font-size: 1.8rem;
}

.newsFeedDiv2 {
    background-color: #5ddd9f;
    border: 1px solid #479d74;
    border-radius: 0 35px 35px 0;
    margin-left: 0;
    font-size: 1.5rem;
    justify-content: center;
    align-items: center;
}

.newsFeedRowHeight {
    height: 50px;
    padding: 0 0 0 10px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    -o-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

.marqueePosition {
    position: inherit;
    top: -10%;
}

#scrollToTop {
    position: fixed;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    background-color: #3498db;
    text-indent: -9999px;
    display: none;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
}

#scrollToTop span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom-color: #ffffff;
}

#scrollToTop:hover {
    opacity: 1;
    filter: "alpha(opacity=100)";
    -ms-filter: "alpha(opacity=100)";
}

/* Remove extra left and right margins, due to padding */

.rowCard {
    margin: 0 -5px;
}

/* Clear floats after the columns */

.rowCard:after {
    content: "";
    display: table;
    clear: both;
}

/* Style the counter cards */

.counterCardContent {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 10px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 0.6rem;
}

.body-contents-one .counterCardContent {
    background-color: #a3f6ce;
}

.thumbnail {
    margin-bottom: 30px;
}
.thumbnail img {
    width: 100%;
    height: 100%;
}

.galleryPage-top {
    margin-top: 15px;
    margin-bottom: 15px;
}

img.thumbnailZoom {
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    border-radius: 5px;
    border: 5px solid #fff;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    object-fit: cover;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.transition {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.fancybox-show-thumbs .fancybox-inner {
    right: 0;
    bottom: 100px;
}

.fancybox-image,
.fancybox-spaceball {
    border: 3px solid #fff;
    border-radius: 5px;
}

.fancybox-thumbs {
    top: auto;
    width: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 95px;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
}

.fancybox-inner .fancybox-caption .fancybox-caption__body {
    border: 3px solid #fff;
    border-radius: 15px;
    width: fit-content;
    display: inline-flex;
    padding: 2px 10px;
    background-color: #0d584d;
}

.fancybox-thumbs__list a:before {
    border: 5px solid #fff;
    border-radius: 5px;
}

.fancybox-caption {
    color: #fff;
}

.thingsToCarry img {
    width: 36px;
    height: 36px;
    margin-right: 14px;
}

.thingsToCarry ul {
    list-style-type: none;
    padding-left: 0;
    text-align: -webkit-left;
}

.thingsToCarry li {
    margin-bottom: 5px;
}

.thingsToCarryFont {
    font-family: "Signika Negative", sans-serif;
    font-size: 170%;
    font-weight: bold;
    color: white;
    padding: 0px 20px 0px 20px;
    border: none;
    background: #409b8a;
    border-radius: 8px;
    line-height: 2.8rem;
    letter-spacing: 1px;
    cursor: default !important;
}

.disable-select {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
}

.container #newsFeed a:hover {
    text-decoration: none;
    font-weight: bold;
}

.counterCardContent .card-title a {
    text-decoration: none;
    color: #212529;
    transition: color 0.1s, text-decoration 0.1s, font-size 0.1s;
}

.counterCardContent .card-title a:hover {
    color: black;
    font-size: 1.5rem;
}

.back-button-container {
    position: absolute;
    left: 40px;
    top: 40px;
    z-index: 0;
}

.cardIconsSize img {
    width: 7%;
}

.cardIconsSizeBlog img {
    width: 9%;
}

.cardIconsSizeBlog {
    line-height: 3.2rem;
}

#pageLoading {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 70%);
    z-index: 9999;
}

#pageLoading img {
    width: 100px;
    height: 100px;
}

.photographyDisclaimer {
    color: cadetblue;
    font-size: 16px;
    margin: 0 20px 0 20px;
}

.visitorCount {
    border: 2px solid;
    outline: 7px solid #63dba3;
    border-radius: 5px;
    padding: 4px 10px 0px 10px;
    margin: 10px 0px 10px 0;
}

.visitorCount:focus {
    outline: 7px solid #63dba3 !important;
}

.commentCard {
    margin-bottom: 10px;
    text-align: left;
}

.commentCard .card-header {
    padding: 0.2rem 1.25rem;
    font-size: 1.1rem;
}

.commentCard .blockquote {
    font-size: 1rem;
}

.lastUpdatedOn {
    font-size: 15px;
    color: darkgray;
}

.copy-code-container {
    position: relative;
}

.copy-code-button {
    position: absolute;
    top: 50px;
    right: 25px;
    opacity: 0.7;
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 80%;
    padding: 0px 5px 0px 5px;
    border: 1px solid;
    border-radius: 10px;
}

.entry-fee-table td,
.entry-fee-table th {
    padding: 0.1rem;
    vertical-align: top;
}

/* Project template CSS */

.tabs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .tabs label {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    display: block;
    padding: 0.7rem 3rem;
    margin-right: 0.4rem;
    margin-bottom: 0;
    cursor: pointer;
    background: #1ccf9f;
    font-weight: bold;
    -webkit-transition: background ease 0.2s;
    transition: background ease 0.2s;
    border-radius: 15px 15px 0 0;
  }

  .tabs .tab {
    -webkit-box-ordinal-group: 100;
    -webkit-order: 99;
    -ms-flex-order: 99;
    order: 99;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 100%;
    display: none;
    padding: 1rem;
    background: #fafafa;
  }

  .tabs input[type="radio"] {
    position: absolute;
    opacity: 0;
  }

  .tabs input[type="radio"]:checked + label { background: #fafafa; }
  .tabs input[type="radio"]:checked + label + .tab { display: block; }

/* Project template CSS */

/* Media CSS for all types of screens goes here */
/* CSS for screens that are wide or less */

/* ------------------ Article / Card Styles ------------------ */
/* #region Article cards Content */

article {
    --img-scale: 1.001;
    --title-color: black;
    --link-icon-translate: -20px;
    --link-icon-opacity: 0;
    position: relative;
    border-radius: 16px;
    box-shadow: none;
    background: #fff;
    transform-origin: center;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
  }

  article a::after {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    cursor: pointer;
    content: "";
  }

/* basic article elements styling */

  article h2 {
    margin: 0 0 18px 0;
    font-family: 'Pacifico', cursive;
    font-size: 1.9rem;
    letter-spacing: 0.08em;
    color: var(--title-color);
    transition: color 0.3s ease-out;
  }

  figure {
    margin: 0;
    padding: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  article img {
    max-width: 100%;
    transform-origin: center;
    transform: scale(var(--img-scale));
    transition: transform 0.4s ease-in-out;
  }

  .article-body {
    padding: 24px;
  }

  article a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #28666e;
  }

  article a:focus {
    outline: 1px dotted #28666e;
  }

  article a:hover {
    text-decoration: none;
  }

  article a .icon {
    min-width: 24px;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    transform: translateX(var(--link-icon-translate));
    opacity: var(--link-icon-opacity);
    transition: all 0.3s;
  }

/* using the has() relational pseudo selector to update our custom properties */

  article:has(:hover, :focus) {
    --img-scale: 1.1;
    --title-color: #28666e;
    --link-icon-translate: 0;
    --link-icon-opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  }

  .back-button:hover {
    transition: filter 0.25s ease;
    filter: saturate(250%);
}

/************************
  Generic layout (demo looks)
  **************************/

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

  .articles {
    display: grid;
    max-width: 1200px;
    margin-inline: auto;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 10px;
  }

  @container card (min-width: 380px) {
    .article-wrapper {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 16px;
    }

    .article-body {
      padding-left: 0;
    }

    figure {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    figure img {
      height: 100%;
      aspect-ratio: 1;
      object-fit: cover;
    }
  }

  .sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

/* #endregion Article cards Content */

/* ------------------ Photography / Gallery Styles ------------------ */
/* Photography home page CSS starts here */

.nextPageFromPhotoHomeLinks {
    margin-bottom: 20px;
}

.nextPageFromPhotoHomeLinks a {
    text-decoration: none;
    color: white;
    border-radius: 4px;
    font-size: 20px;
    margin: 10px;
    padding: 15px;
}

.nextPageFromPhotoHomeLinks .previousPage {
    background: #7b8d88;
}

.nextPageFromPhotoHomeLinks .page1 {
    background: #267865;
}

.nextPageFromPhotoHomeLinks .page2 {
    background: #7b8d88;
}

.nextPageFromPhotoHomeLinks .page3 {
    background: #7b8d88;
}

.nextPageFromPhotoHomeLinks .nextPage {
    background: #267865;
}

.nextPageFromPhotoHomeLinks .previousPage:hover {
    background: #7b8d88;
}

.nextPageFromPhotoHomeLinks .page1:hover {
    background: #3bbd9f;
}

.nextPageFromPhotoHomeLinks .page2:hover {
    background: #3bbd9f;
}

.nextPageFromPhotoHomeLinks .page3:hover {
    background: #3bbd9f;
}

.nextPageFromPhotoHomeLinks .nextPage:hover {
    background: #3bbd9f;
}

.nextPageFromPhotoHomeLinks a:focus {
    outline: 3px solid #38b195;
}

/* Photography home page CSS ends here */
/* Photography Page 2 CSS starts here */
.nextPageFromPhotoPage2Links {
    margin-bottom: 20px;
}

.nextPageFromPhotoPage2Links a {
    text-decoration: none;
    color: white;
    border-radius: 4px;
    font-size: 20px;
    margin: 10px;
    padding: 15px;
}

.nextPageFromPhotoPage2Links .previousPage {
    background: #267865;
}

.nextPageFromPhotoPage2Links .page1 {
    background: #7b8d88;
}

.nextPageFromPhotoPage2Links .page2 {
    background: #267865;
}

.nextPageFromPhotoPage2Links .page3 {
    background: #7b8d88;
}

.nextPageFromPhotoPage2Links .nextPage {
    background: #7b8d88;
}

.nextPageFromPhotoPage2Links .previousPage:hover {
    background: #3bbd9f;
}

.nextPageFromPhotoPage2Links .page1:hover {
    background: #3bbd9f;
}

.nextPageFromPhotoPage2Links .page2:hover {
    background: #3bbd9f;
}

.nextPageFromPhotoPage2Links .page3:hover {
    background: #3bbd9f;
}

.nextPageFromPhotoPage2Links .nextPage:hover {
    background: #3bbd9f;
}

.nextPageFromPhotoPage2Links a:focus {
    outline: 3px solid #38b195;
}

/* Photography Page 2 CSS ends here */
/* Photography Page 3 CSS starts here */
.nextPageFromPhotoPage3Links {
    margin-bottom: 20px;
}

.nextPageFromPhotoPage3Links a {
    text-decoration: none;
    color: white;
    border-radius: 4px;
    font-size: 20px;
    margin: 10px;
    padding: 15px;
}

.nextPageFromPhotoPage3Links .previousPage {
    background: #267865;
}

.nextPageFromPhotoPage3Links .page1 {
    background: #7b8d88;
}

.nextPageFromPhotoPage3Links .page2 {
    background: #7b8d88;
}

.nextPageFromPhotoPage3Links .page3 {
    background: #267865;
}

.nextPageFromPhotoPage3Links .nextPage {
    background: #7b8d88;
}

.nextPageFromPhotoPage3Links .previousPage:hover {
    background: #3bbd9f;
}

.nextPageFromPhotoPage3Links .page1:hover {
    background: #3bbd9f;
}

.nextPageFromPhotoPage3Links .page2:hover {
    background: #3bbd9f;
}

.nextPageFromPhotoPage3Links .page3:hover {
    background: #3bbd9f;
}

.nextPageFromPhotoPage3Links .nextPage:hover {
    background: #7b8d88;
}

.nextPageFromPhotoPage3Links a:focus {
    outline: 3px solid #38b195;
}

/* Photography Page 3 CSS ends here */

/* ------------------ Media Queries (grouped alphabetically) ------------------ */
@media (max-width: 45em) {
    .tabs .tab,  .tabs label {
      -webkit-box-ordinal-group: NaN;
      -webkit-order: initial;
      -ms-flex-order: initial;
      order: initial;
    }
    .tabs label {
      width: 100%;
      margin-right: 0;
      margin-top: 0.2rem;
    }
    }

@media screen and (max-width: 576px) {

    #webLogo {
        display: none;
      }

    #mobileLogo {
    display: inline-block;
    }

    #title-picture {
        padding-right: 6%;
    }

    .smallScreenDevice {
        margin-left: 4%;
    }

    #scrollToTop {
        width: 45px;
        height: 45px;
    }

    .bg-light {
        background-color: #117465 !important;
    }

    .webtext {
        color: #ffffff;
    }

    hr.menubarhr {
        border-color: #e8efed;
        width: 30%;
        margin-top: 0;
        margin-bottom: 0;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .profile-picture {
        width: 65%;
        padding-top: 20px;
    }

    .bike-trekker-image {
        width: -webkit-fill-available;
        padding-top: 30px;
    }

    .body-container-title {
        padding-top: 10px;
        font-size: 3rem;
    }

    .body-container-text {
        font-size: 1rem;
    }

    body {
        font-size: 1rem;
    }

    .body-contents {
        width: 80%;
    }

    .body-contents-three {
        padding: 10% 0 10% 0;
    }

    .softwaredeveloper-image {
        width: 35%;
        margin-right: 25px;
        margin-bottom: 20%;
    }

    .bikerider-image {
        width: 35%;
        margin-right: 20px;
        margin-bottom: 18%;
    }

    .photographer-image {
        width: 35%;
        margin-right: 6%;
        margin-bottom: 18%;
        margin-left: -4%;
    }

    .contactme-image {
        width: 25%;
        margin-bottom: 5%;
    }

    .contact-section {
        width: 80%;
    }

    .smallDeviceFont {
        font-size: 1.4rem !important;
    }

    .footer-image-link {
        padding: 2% 0px 2% 8%;
        text-align: left;
    }

    .footer-images {
        width: 25%;
    }

    .columnCard {
        width: -webkit-fill-available;
        display: block;
        float: left;
        margin-bottom: 20px;
        padding: 0;
    }

    .card-text {
        text-align: left;
        font-size: 1rem;
        font-kerning: none;
    }

    .card-image {
        border-color: #fff;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .counterCardContent {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        padding: 0;
        text-align: center;
        background-color: #ffffff;
        border-radius: 0.6rem;
    }

    .triangle-down-green {
        width: 0;
        height: 0;
        border-left: 35px solid transparent;
        border-right: 35px solid transparent;
        border-top: 35px solid #a3f6ce;
        float: right;
        margin-right: 60px;
        margin-bottom: -20px;
    }

    .triangle-down-white {
        width: 0;
        height: 0;
        border-left: 35px solid transparent;
        border-right: 35px solid transparent;
        border-top: 35px solid #f8f9fa;
        float: left;
        margin-left: 60px;
    }

    .all-contents .body-container .mobileViewResponsive {
        width: -webkit-fill-available;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 0;
        margin-left: -25px;
    }

    .columnSideBar .counterCardContent .card-body .card-text {
        font-size: 1.2rem;
    }

    .columnSideBar .counterCardContent {
        padding: 0;
    }

    .columnSideBar .counterCardContent .card-body {
        display: block;
    }

    .counterCardContent .card-body h2 {
        font-size: 25px;
    }

    .sidebarContent {
        padding: 10px 15px 10px 40px;
    }

    .mainContent {
        padding: 15px 15px 10px 40px;
    }

    .articleContent {
        padding: 15px 10px 0 10px;
        line-height: 2.1 !important;
    }

    .cardIconsSizeBlog img {
        width: 8%;
    }

    .cardIconsSizeBlog {
        line-height: 2.6rem;
    }

    .newsFeedRowHeight {
        height: 35px;
    }

    .newsFeedDiv1 {
        border-radius: 10px 0 0 10px;
    }

    .newsFeedDiv1 h2 {
        font-size: 0.9rem;
        line-height: 1.3rem;
    }

    .newsFeedDiv2 {
        font-size: 0.9rem;
        border-radius: 0 10px 10px 0;
    }

    .marqueePosition {
        position: unset;
    }

    .rowCardSpace {
        padding: 15px 0 0 0;
    }
}

@media screen and (max-width: 960px) {
    article {
      container: card/inline-size;
    }

    .article-body p {
      display: none;
    }

    .back-button {
        display: none;
    }
  }

@media screen and (min-device-width: 577px) and (max-device-width: 767px) {

    #webLogo {
        display: none;
      }

    #mobileLogo {
    display: inline-block;
    }

    .bg-light {
        background-color: #117465 !important;
    }

    .smallScreenDevice {
        margin-left: 4%;
    }

    .webtext {
        color: #ffffff;
    }

    hr.menubarhr {
        border-color: #e8efed;
        width: 30%;
        margin-top: 0;
        margin-bottom: 0;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .profile-picture {
        width: 50%;
        padding-top: 20px;
    }

    .body-container-title {
        padding-top: 10px;
        font-size: 3rem;
    }

    .body-container-text {
        font-size: 1rem;
    }

    body {
        font-size: 1.2rem;
    }

    .body-contents {
        width: 80%;
    }

    .body-contents-three {
        padding: 10% 0 10% 0;
    }

    .softwaredeveloper-image {
        width: 35%;
        margin-right: 25px;
        margin-bottom: 20%;
    }

    .bikerider-image {
        width: 35%;
        margin-right: 20px;
        margin-bottom: 18%;
    }

    .photographer-image {
        width: 35%;
        margin-right: 6%;
        margin-bottom: 18%;
        margin-left: -4%;
    }

    .contactme-image {
        width: 20%;
        margin-bottom: 5%;
    }

    .contact-section {
        width: 80%;
    }

    .smallDeviceFont {
        font-size: 1.5rem !important;
    }

    .footer-image-link {
        padding: 2% 0px 2% 6%;
        text-align: left;
    }

    .footer-images {
        width: 25%;
    }

    .columnCard {
        width: -webkit-fill-available;
        display: block;
        float: left;
        margin-bottom: 20px;
        padding: 0;
    }

    .card-text {
        text-align: left;
        font-size: 1.25rem;
        font-kerning: none;
    }

    .card-image {
        border-color: #fff;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .counterCardContent {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        padding: 10px;
        text-align: center;
        background-color: #ffffff;
        border-radius: 0.6rem;
    }

    .columnSideBar .counterCardContent .card-body .card-text {
        font-size: 1.2rem;
    }

    .columnSideBar .counterCardContent {
        padding: 0;
    }

    .columnSideBar .counterCardContent .card-body {
        display: block;
    }

    .counterCardContent .card-body h2 {
        font-size: 25px;
    }

    .sidebarContent {
        padding: 10px 20px 10px 20px;
    }

    .mainContent {
        padding: 15px 20px 10px 20px;
    }

    .articleContent {
        padding: 15px 10px 0 10px;
        line-height: 2.1 !important;
    }

    .cardIconsSizeBlog img {
        width: 8%;
    }

    .cardIconsSizeBlog {
        line-height: 2.6rem;
    }

    .triangle-down-green {
        width: 0;
        height: 0;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-top: 40px solid #a3f6ce;
        float: right;
        margin-right: 70px;
        margin-bottom: -30px;
    }

    .triangle-down-white {
        width: 0;
        height: 0;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-top: 40px solid #f8f9fa;
        float: left;
        margin-left: 70px;
    }

    .newsFeedRowHeight {
        height: 40px;
    }

    .newsFeedDiv1 h2 {
        font-size: 1.2rem;
    }

    .newsFeedDiv2 {
        font-size: 1rem;
    }

    .marqueePosition {
        position: unset;
    }

    #scrollToTop {
        width: 45px;
        height: 45px;
    }

    .photoDairyFont h2 {
        font-size: 28px;
    }

    .rowCardSpace {
        padding: 15px 0 0 0;
    }
}

@media screen and (min-device-width: 768px) and (max-device-width: 991px) {
    a#logoText:hover {
        padding: 0 10px;
        color: #31bc9e;
    }

    .smallScreenDevice {
        margin-left: 4%;
    }

    .webtext {
        font-family: "Comfortaa", cursive;
        font-size: 1.2rem;
        color: #267865;
        font-weight: 600;
        line-height: 4.4rem;
        padding: 0 10px 0 10px;
    }

    .webtext:hover {
        text-decoration: none;
        color: #ffffff;
        font-weight: 600;
        line-height: 4.3rem;
        padding: 14px 10px 14px 10px;
    }

    hr.menubarhr {
        border-style: none;
        margin-top: 0;
        margin-bottom: 0;
    }

    .profile-picture {
        width: 30%;
        padding-top: 60px;
    }

    .body-container-title {
        padding-top: 10px;
        font-size: 3rem;
    }

    .body-container-text {
        font-size: 1rem;
    }

    body {
        font-size: 1.2rem;
    }

    .body-contents {
        width: 80%;
    }

    .body-contents-three {
        padding: 10% 0 10% 0;
    }

    .softwaredeveloper-image {
        width: 35%;
        margin-right: 25px;
        margin-bottom: 16%;
    }

    .bikerider-image {
        width: 35%;
        margin-right: 20px;
        margin-bottom: 16%;
    }

    .photographer-image {
        width: 35%;
        margin-right: 6%;
        margin-bottom: 16%;
        margin-left: -4%;
    }

    .contactme-image {
        width: 16%;
        margin-bottom: 5%;
    }

    .contact-section {
        width: 80%;
    }

    .smallDeviceFont {
        font-size: 1.75rem !important;
    }

    .footer-image-link {
        padding: 2% 0px 2% 8%;
        text-align: left;
    }

    .footer-images {
        width: 25%;
    }

/* Float three columns side by side */

    .columnCard {
        width: 33.33%;
        display: block;
        float: left;
        margin-bottom: 20px;
        padding: 10px 30px 10px 30px;
    }

    .card-text {
        text-align: left;
        font-size: 0.75rem;
        font-kerning: none;
    }

    .card-image {
        border-color: #fff;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .counterCardContent {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        padding: 10px;
        text-align: center;
        background-color: #ffffff;
        border-radius: 0.6rem;
    }

    .rowCardSpace {
        padding: 20px 15px 0 15px;
    }

    .triangle-down-green {
        width: 0;
        height: 0;
        border-left: 45px solid transparent;
        border-right: 45px solid transparent;
        border-top: 45px solid #a3f6ce;
        float: right;
        margin-right: 75px;
        margin-bottom: -40px;
    }

    .triangle-down-white {
        width: 0;
        height: 0;
        border-left: 45px solid transparent;
        border-right: 45px solid transparent;
        border-top: 45px solid #f8f9fa;
        float: left;
        margin-left: 75px;
    }

    .newsFeedRowHeight {
        height: 45px;
    }

    .newsFeedDiv1 h2 {
        font-size: 1.5rem;
    }

    .newsFeedDiv2 {
        font-size: 1.2rem;
    }

    #scrollToTop {
        width: 50px;
        height: 50px;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
    .profile-picture {
        width: -webkit-fill-available;
        padding-top: 115px;
    }

    hr.menubarhr {
        border-style: none;
        margin-top: 0;
        margin-bottom: 0;
    }

    body {
        font-size: 1.2rem;
    }

    .body-container-title {
        padding: 15px 50px 0 50px;
    }

    .body-contents {
        width: 70%;
    }

    .body-contents-three {
        padding: 10% 0 10% 0;
    }

    .softwaredeveloper-image {
        width: 25%;
        margin-right: 25px;
        margin-bottom: 16%;
    }

    .bikerider-image {
        width: 25%;
        margin-right: 20px;
        margin-bottom: 16%;
    }

    .photographer-image {
        width: 25%;
        margin-right: 6%;
        margin-bottom: 16%;
        margin-left: -4%;
    }

    .contactme-image {
        width: 10%;
        margin-bottom: 2%;
    }

    .contact-section {
        width: 80%;
    }

    .smallDeviceFont {
        font-size: 1.75rem !important;
    }

    .footer-image-link {
        padding: 1% 0px 2% 7%;
        text-align: left;
    }

    .footer-images {
        width: 50%;
    }

/* Float three columns side by side */

    .columnCard {
        width: 33.33%;
        display: block;
        float: left;
        margin-bottom: 20px;
        padding: 10px 30px 10px 30px;
    }

    .card-text {
        text-align: left;
        font-size: 0.9rem;
        font-kerning: none;
    }

    .card-image {
        border-color: #fff;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .counterCardContent {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        padding: 10px;
        text-align: center;
        background-color: #ffffff;
        border-radius: 0.6rem;
    }

    .triangle-down-green {
        width: 0;
        height: 0;
        border-left: 55px solid transparent;
        border-right: 55px solid transparent;
        border-top: 55px solid #a3f6ce;
        float: right;
        margin-right: 90px;
        margin-bottom: -45px;
    }

    .triangle-down-white {
        width: 0;
        height: 0;
        border-left: 55px solid transparent;
        border-right: 55px solid transparent;
        border-top: 55px solid #f8f9fa;
        float: left;
        margin-left: 90px;
    }

    .newsFeedDiv1 h2 {
        font-size: 1.5rem;
    }

    .newsFeedDiv2 {
        font-size: 1.3rem;
    }
}

@media screen and (min-width: 1400px) {
    hr.menubarhr {
        border-style: none;
        margin-top: 0;
        margin-bottom: 0;
    }

    .profile-picture {
        width: 80%;
        padding-top: 80px;
        padding-bottom: 60px;
    }

    .footers {
        font-size: 1.3rem;
    }
}

@media screen and (min-width: 360px) and (max-width: 380px) {
    .body-container-title {
        padding-top: 0;
        font-size: 2.4rem;
    }

    .card-text {
        font-size: 0.8rem;
    }

    .photoDairyFont h2 {
        font-size: 20px;
    }

    .rowCardSpace {
        padding: 15px 0 0 0;
    }
}

@media screen and (min-width: 360px) and (max-width: 575px) {
    #title-picture {
        padding-right: 4%;
    }

    .smallScreenDevice {
        margin-left: 4%;
    }

    .bg-light {
        background-color: #117465 !important;
    }

    .webtext {
        color: #ffffff;
    }

    hr.menubarhr {
        border-color: #e8efed;
        width: 30%;
        margin-top: 0;
        margin-bottom: 0;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .profile-picture {
        width: 60%;
        padding-top: 20px;
    }

    .bike-trekker-image {
        width: -webkit-fill-available;
        padding-top: 30px;
    }

    .body-container-text {
        font-size: 1rem;
    }

    body {
        font-size: 0.95rem;
    }

    .body-contents {
        width: 80%;
    }

    .body-contents-three {
        padding: 10% 0 10% 0;
    }

    .softwaredeveloper-image {
        width: 35%;
        margin-right: 25px;
        margin-bottom: 20%;
    }

    .bikerider-image {
        width: 35%;
        margin-right: 20px;
        margin-bottom: 18%;
    }

    .photographer-image {
        width: 35%;
        margin-right: 6%;
        margin-bottom: 18%;
        margin-left: -4%;
    }

    .contactme-image {
        width: 25%;
        margin-bottom: 5%;
    }

    .contact-section {
        width: 80%;
    }

    .smallDeviceFont {
        font-size: 1.4rem !important;
    }

    .footer-image-link {
        padding: 2% 0px 2% 8%;
        text-align: left;
    }

    .footer-images {
        width: 25%;
    }

    .columnCard {
        width: -webkit-fill-available;
        display: block;
        float: left;
        margin-bottom: 20px;
        padding: 0;
    }

    .card-text {
        text-align: left;
        font-size: 0.9rem;
        font-kerning: none;
    }

    .card-image {
        border-color: #fff;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .counterCardContent {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        padding: 0;
        text-align: center;
        background-color: #ffffff;
        border-radius: 0.6rem;
    }

    .triangle-down-green {
        width: 0;
        height: 0;
        border-left: 35px solid transparent;
        border-right: 35px solid transparent;
        border-top: 35px solid #a3f6ce;
        float: right;
        margin-right: 60px;
        margin-bottom: -25px;
    }

    .triangle-down-white {
        width: 0;
        height: 0;
        border-left: 35px solid transparent;
        border-right: 35px solid transparent;
        border-top: 35px solid #f8f9fa;
        float: left;
        margin-left: 60px;
    }

    .all-contents .body-container .mobileViewResponsive {
        width: -webkit-fill-available;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 0;
        margin-left: -20px;
    }

    .columnSideBar .counterCardContent .card-body .card-text {
        font-size: 1rem;
    }

    .columnSideBar .counterCardContent {
        padding: 0;
    }

    .columnSideBar .counterCardContent .card-body {
        display: block;
    }

    .counterCardContent .card-body h2 {
        font-size: 25px;
    }

    .sidebarContent {
        padding: 10px 15px 0 35px;
    }

    .mainContent {
        padding: 15px 15px 15px 35px;
    }

    .articleContent {
        padding: 15px 10px 0 10px;
        line-height: 2.1 !important;
    }

    .carouselImagesWidth {
        width: -webkit-fill-available;
    }

    .newsFeedRowHeight {
        height: 35px;
        padding: 0 0 0 2px;
    }

    .newsFeedDiv1 h2 {
        font-size: 0.9rem;
    }

    .newsFeedDiv2 {
        font-size: 0.9rem;
    }

    .marqueePosition {
        position: unset;
    }

    .chipForHomePage {
        margin: 0px 10px 16px 10px;
    }

    .photoDairyFont h2 {
        font-size: 22px;
    }

    .nextPageFromPhotoHomeLinks a {
        text-decoration: none;
        color: white;
        border-radius: 4px;
        font-size: 15px;
        margin: 7px;
        padding: 10px;
    }

    .nextPageFromPhotoPage2Links a {
        text-decoration: none;
        color: white;
        border-radius: 4px;
        font-size: 15px;
        margin: 7px;
        padding: 10px;
    }

    .nextPageFromPhotoPage3Links a {
        text-decoration: none;
        color: white;
        border-radius: 4px;
        font-size: 15px;
        margin: 7px;
        padding: 10px;
    }

    .rowCardSpace {
        padding: 15px 0 0 0;
    }
}

@media screen and (min-width: 381px) and (max-width: 400px) {
    .body-container-title {
        padding-top: 0;
        font-size: 2.5rem;
    }
}

@media screen and (min-width: 401px) and (max-width: 419px) {
    .body-container-title {
        padding-top: 0;
        font-size: 2.6rem;
    }
}

@media screen and (min-width: 420px) and (max-width: 575px) {
    .body-container-title {
        padding-top: 0;
        font-size: 2.8rem;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    hr.menubarhr {
        border-style: none;
        margin-top: 0;
        margin-bottom: 0;
    }

    .profile-picture {
        width: -webkit-fill-available;
    }

    body {
        font-size: 1.2rem;
    }

    .body-contents {
        width: 80%;
    }

    .body-contents-three {
        padding: 10% 0 10% 0;
    }

    .softwaredeveloper-image {
        width: 25%;
        margin-right: 25px;
        margin-bottom: 16%;
    }

    .bikerider-image {
        width: 25%;
        margin-right: 20px;
        margin-bottom: 16%;
    }

    .photographer-image {
        width: 25%;
        margin-right: 6%;
        margin-bottom: 16%;
        margin-left: -4%;
    }

    .contactme-image {
        width: 12%;
        margin-bottom: 2%;
    }

    .contact-section {
        width: 80%;
    }

    .smallDeviceFont {
        font-size: 1.75rem !important;
    }

    .footer-image-link {
        padding: 2% 0px 0px 7%;
        text-align: left;
    }

    .footer-images {
        width: 50%;
    }

/* Float three columns side by side */

    .columnCard {
        width: 33.33%;
        display: block;
        float: left;
        margin-bottom: 20px;
        padding: 10px 30px 10px 30px;
    }

    .card-text {
        text-align: left;
        font-size: 0.75rem;
        font-kerning: none;
    }

    .card-image {
        border-color: #fff;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .counterCardContent {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        padding: 10px;
        text-align: center;
        background-color: #ffffff;
        border-radius: 0.6rem;
    }

    .rowCardSpace {
        padding: 20px 20px 0 20px;
    }

    .triangle-down-green {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 50px solid #a3f6ce;
        float: right;
        margin-right: 85px;
        margin-bottom: -40px;
    }

    .triangle-down-white {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 50px solid #f8f9fa;
        float: left;
        margin-left: 85px;
    }

    .newsFeedRowHeight {
        height: 45px;
    }

    .newsFeedDiv1 h2 {
        font-size: 1.5rem;
    }

    .newsFeedDiv2 {
        font-size: 1.2rem;
    }

    #scrollToTop {
        width: 55px;
        height: 55px;
    }
}