/* Styles for the whole page*/
* {
    margin: 0;                          /* Low impact or no change */
    padding: 0;                         /* Low impact or no change */
    box-sizing: border-box;             /* If you set box-sizing: border-box; on an element, padding and border are included in the width and height: */
    text-decoration: none;              /* no craziness to texts unless overriden */
    scroll-behavior: smooth;            /* ensure smooth scrolling */
    /* font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
    font-family:"Montserrat", sans-serif;    /* best font from Google fonts */
}

/* Color and Other Variables */
:root {
    --bg-color: #ffffff;              /* Background color */
    --second-bg-color: #ffffff;
    --text-color: #000000;            /* Text color */
    --header-text-color: #1a1a1a;     /* Text color for the header */
    --footer-text-color: #2a2a2a;     /* Text color for the footer */
    --main-color: rgb(85, 85, 85); 
}

/* For the whole page */
html { 
    font-size: 60%;                     /* Generic font size, if not overriden in base classes */
    overflow-x: hidden;                 /* Hides the text out the box */
} 

/* Body */
body {
    background: var(--bg-color);        /* Generic background color for the entire page */
    color: var(--text-color);           /* Generic text color for the entire page */
}

.header {
    position:fixed;                     /* Header always stays on top */
    width: 100%;                        /* Use 100% of the screen width for the header */
    max-height: 20vh;                   /* Use 8% of the 'view port' height. Viewport = the visible portion of the webpage */
    top: 0;                             /* start the header section with no pixels above it */
    left: 0;                            /* start the header section with no pixels to the left of it */
    padding: 1.5rem 4%;                 /* 1.5rem (24 pixels) top and bottom and 4% of width of space to left and right */
    display: flex;                      /* allows you to create flexible layouts with elements that you can align and distribute vertically or horizontally */
    justify-content:space-between;      /* spacing the elements in the header horizontally */
    align-items:center;                 /* This means the flexbox items will be centered vertically */
    z-index: 1000;                      /* An element with a higher z-index value will appear in front of an element with a lower z-index value. */
    text-wrap: nowrap;                  /* ensures text with multipl words are not wrapped */
    background-color: var(--bg-color);  /* Header background color */
    backdrop-filter: blur(80px);        /* Not sure if this is useful */
    opacity: 95%;                       /* allows sections to be visible behind header when scrolled */
}

.logo{
    font-size: 3.25rem;                 /* Size of the logo (chandru murugan) */
    color: var(--text-color);
    font-weight: 500;                   /* 500 looks good for the Montserrat font */
    text-decoration-line: underline;    /* Underline for the logo text */
    text-underline-offset: 7px;         /* offsets the line below text, so there is space */
    text-decoration-thickness: 1px;     /* line thickness */
    transition: 0.3s ease-in-out;       /* 0.3seconds make the transition smooth. both focus in and focus out operations */
}

.logo:hover{
    transform: scale(1.005) translateY(-1px);   /* scale and shift logo vertically up while hovering */
}

#cspan{                                 /* This style is not being used. But can make the logo appear with gradient color if the two colors chosen are at either end of a spectrum */
    background: linear-gradient(
        90deg,
        #000000 20%,
        #000000 100%
    );
    background-clip: text;              /* The gradient color is applied to the text rather than the background box for the text. */
    color: transparent;                 /* Works with the previous attibute (background-clip) */
}

.navbar a{                              /* Changes the navbar font size, font weight, text color, transition effects. */
    font-size: 1.9rem;
    color: var(--header-text-color);
    /* margin-left: 1.25rem; */                  /* 2rem has been tested to work best across differ form factors */
    margin-left: 10px;
    margin-right: 10px;
    font-weight: 500;
    transition: 0.3s ease-in-out;
    align-content: center;
}

.navbar a:hover{                        /* Hover effect for the navbar items */
    /* color: var(--main-color); */
    border-bottom: 3px solid var(--main-color);
}

.ils{                                   /* ils = "image left section". Section with image to the left */
    min-height: 50vh;                   /* Whole section takes 50% of the viewport height - half of visible window height */
    padding-top: 10rem;                  /* This padding ensures that the section (about, for example) top is below the header section. Looks clean */
    padding-bottom: 0;                  /* Ensures not  a lot of gap remains between the last section's bottom and the footer. */
    padding-left: 5rem;                 /* Ensures the section does not stay too close to the web page's left side */
    padding-right: 5rem;                /* Ensures the section does not stay too close to the web page's left side */   
    display: flex;                      /* Makes the section responsive */
    align-items: center;                /* Align items from the center */
    justify-content: center;            /* gives even space between the items */
    gap: 2.5rem;                        /* gap between the items in this section */
}

.ils-content{
    display: flex;                      /* Makes the section responsive */
    flex-direction: column;             /* brings everything on top of each other */
    align-items: center;                /* align the items to the center */
    text-align: center;                 /* Text alignment to the center as well */
}

.ils-content h3{                        /* style for the section heading */
    margin: 0.5rem;                     
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
}

.ils-content p{
    padding: 0;
    margin: 0.5rem;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1; 
}

.ils-img img{
    width: 75vw;
    border-radius: 2px;
    border-style: solid;
    border-width: 5px;
    border-color: #ffffff;
    box-shadow: 0 0 8px var(--main-color);
    transition: 0.4s ease-in-out;
}

.ils-img img:hover{
    box-shadow: 0 0 10px #a0a0a0,
                0 0 15px #a0a0a0;
}

.irs{                                   /* irs = "image right section". Section with image to the right */
    min-height: 50vh;
    padding-top: 10rem;
    padding-bottom: 0;
    padding-left: 5rem;
    padding-right: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

.irs-content{
    display: flex;
    flex-direction: column;
    align-items:center;
    text-align: center;
}

.irs-content h3{
    margin: 0.5rem;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
}

.irs-content p{
    padding: 0;
    margin: 0.5rem;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2; 
}

.irs-img img{
    width: 75vw;
    border-radius: 2px;
    border-style: solid;
    border-width: 5px;
    border-color: #ffffff;
    box-shadow: 0 0 8px var(--main-color);
    transition: 0.4s ease-in-out;
}
.irs-img img:hover{
    box-shadow: 0 0 10px #a0a0a0,
                0 0 15px #a0a0a0;
}

.gallery{
    background-color: var(--second-bg-color);
    /* margin-top: 1rem; */
}

#national-parks,
#detail-page-top {
    padding-top: 9.5rem;
}

.gallery h2{
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;
}


.gallery h3{
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
}


.gallery h4{
    font-size: 1.5rem;
    font-weight: 300;
    text-align: center;
    vertical-align: top;
}


.gallery-section, 
.lp-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding-top: 5px;
    padding-bottom: 10px;
    place-items: center;
    justify-content: space-between;
    gap: 2rem;
    row-gap: 3rem;
    margin: 0;
}

/* .gallery-section p {
    text-wrap: nowrap;
} */

.section-item, 
.lp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* background-color: white; */
    border: 0px solid var(--main-color);
    /* border-radius: 2px; */
    gap: 1.2rem;
    padding: 0.8rem 0.8rem;
    overflow: hidden;
}

.section-item img, 
.lp-item img {
    border: 4px solid var(--second-bg-color);
    box-shadow: 0 0 8px var(--main-color);
    transition: 0.3s ease-in-out;
    cursor: pointer;
    max-width: 300px;
    max-height: 200px;
}
.section-item img:hover, 
.lp-item img:hover {
    box-shadow: 0 0 8px #a0a0a0,
                0 0 4px #a0a0a0;
    transform: scale(1.0125)
}

.section-item h3, 
.lp-item h3 {
    font-size: 18px;
}

.section-item p, 
.lp-item p {
    font-size: 14px;
}


.lp-row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding-top: 5px;
    place-items: center;
    justify-content: space-between;
    gap: 2rem;
    row-gap: 2rem;
}

.lp-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* background-color: white; */
    border: 0px solid var(--main-color);
    /* border-radius: 2px; */
    gap: 1.2rem;
    padding: 0.8rem 0.8rem;
    overflow: hidden;
}

.lp-item img{
    border: 4px solid var(--second-bg-color);
    box-shadow: 0 0 8px var(--main-color);
    transition: 0.3s ease-in-out;
    cursor: pointer;
    max-width: 300px;
    max-height: 200px;
}

.lp-item img:hover{
    box-shadow: 0 0 10px #a0a0a0,
                0 0 15px #a0a0a0;
    transform: scale(1.025)
}

.lp-item h3{
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 500;
    justify-content: right;
}

.lp-item p{
    font-size: 1.0rem;
    font-style: italic;
    font-weight: 400;
    justify-content: right;
}

  
  /* The Modal (background) */
.modal {
    display: none;
    position:fixed;
    z-index: 1;
    /* padding-left: 10px;  */
    /* padding-right: 10px; */ 
    /* padding-top: 15px; */
    left: 0;
    top: 0;
    width: 100%;
    /* height: auto; */
    margin: auto;
    justify-content: center;
    /* overflow:hidden; */
    background-color: black;
  }
  
  /* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 0;
    padding: 0;
/*     width:auto;
    height:auto;   */           
    background-color: black;
  }

.modal-content img{
    max-width: 100vw;
    max-height: 94vh;
    border: 6px solid var(--second-bg-color);
    box-shadow: 0 0 10px var(--main-color);
    transition: 0.3s ease-in-out;
}
  
  /* The Close Button */
.close {
    color: #adadad;
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 30px;
    font-weight: 300;
    text-shadow: 1px 1px #1a1a1a;
    transition: 0.3s ease-in-out;
  }
  
.close:hover,
.close:focus {
    color: #ff0000;
    text-decoration:solid;
    cursor: pointer;
    /* transform: scale(1.005) translateY(-1px); */ 
    transition: 0.3s ease-in-out;
    text-shadow: 1px 1px #ffffff;
  }
  
  /* Hide the slides by default */
.mySlides {
    display: none;
  }
  
  /* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 6px;
    margin-top: -30px;
    color: #adadad;
    font-weight: 300;
    font-size: 20px;
    transition: 0.6s ease;
    opacity: 50%;
    user-select: none;
    -webkit-user-select: none;
  }

    /* Position the "prev button" to the left */
.prev {
    left: 6px;
    /* border-radius: 3px 0 0 3px; */
  }
  
  /* Position the "next button" to the right */
.next {
    right: 6px;
   /* border-radius: 3px 0 0 3px; */
  }
  
  /* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: var(--second-bg-color);
    color: var(--text-color);
  }
  
  /* Number text (1/3 etc) */
/* .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  } */
  
  /* Caption text */
.caption-container {
    text-align: right;
    max-width: 100vw;
    height: 25px;
    font-size: 12px;
    font-weight: 300;
    /* font-style:italic; */
    background-color: rgb(0, 0, 0);
    padding: 2px 2px;
    color: rgb(255, 255, 255);
  }



  /* Blog Page Styles */

#blog-summary {
    text-indent: 30px;
    max-width: 80vw;
    font-style: italic;
    margin-left: 10vw;
    margin-right: 10vw;
    text-align: center;
    /* text-indent: 0px; */
  }

#blog-ending {
    max-width: 80vw;
    margin-left: 10vw;
    margin-right: 10vw;
    text-align: center;
  }

.blog-content h2{
    margin-left: 5vw;
    margin-right: 5vw;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 650;
  }

.blog-content h4{
    margin-left: 5vw;
    margin-right: 5vw;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
  }

.date-length {
    display: flex;
    justify-content: space-between;
    margin-left: 5vw;
    margin-right: 5vw;
}

.blog-content h5{
    margin-left: 5vw;
    margin-right: 5vw;
    text-align: center;
    font-size: 1.0rem;
    font-weight: 700;
 }

.blog-content p{
    text-indent: 0px;
    text-align: left;
    font-size: 1.5rem;
    font-weight: 550;
    line-height: 1.8;
  }

#para {
    max-width: 85vw;
    margin-left: 7.5vw;
    margin-right: 7.5vw;
}

.blog-image{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 0px solid var(--main-color);
    gap: 1.2rem;
    padding: 0.8rem 0.8rem;
    overflow: hidden;
}

.blog-image img{
    border: 4px solid var(--second-bg-color);
    box-shadow: 0 0 15px var(--main-color);
    transition: 0.3s ease-in-out;
    cursor: pointer;
    max-width: 85vw;
    max-height: 600px;
}

.blog-image img:hover{
    box-shadow: 0 0 10px #a0a0a0,
                0 0 15px #a0a0a0;
    transform: scale(1.005)
}

/* Blogs Landing Page Styles */
/* details > summary  */#blog-year {
    list-style:none;
    margin-left: 8vw;
    padding: 0.5rem;
    max-width: 80vw;
    align-content: center;
    background-color: #cbcbcb;
    border: none;
    box-shadow: 0px 0px 5px var(--main-color);
    cursor:default;
    text-align: center;
    font-weight: 700;
    font-size: 2.5rem;
  }

 /*  details > summary */ #blog-title {
    list-style: none;
    margin-left: 10.5vw;
    padding: 0.5rem;
    max-width: 75vw;
    align-content: center;
    background-color: var(--second-bg-color);
    border: none;
    cursor:default;
    box-shadow: 0px 0px 2px var(--main-color);
    font-weight: 700;
    font-size: 1.0rem;
  }

  #blog-title h3{
    font-weight: 650;
    font-size: 2.25rem;
    text-align: center;
    margin-left: 0.5vw;
  }

  .blog-item-left {
    /* padding: 0.25rem; */
    margin-left: 0.5vw;
    float: left;
    width: 25%;
    text-align: center;
  }

  .blog-item-right {
    margin-left: 20px;
    float: left;
    width: 70%;
    text-align: center;
  }

  .blog-item-right p{
    /* margin-left: 0.5vw; */
    text-align: left;
    font-weight: 500;
    font-size: 1.25rem;
    font-style: italic;
  } 

  .blog-item-left img{
    max-width: 150px;
    border: 4px solid var(--second-bg-color);
    box-shadow: 0 0 4px var(--main-color);
    transition: 0.3s ease-in-out;
    cursor: default;
  }

  .blog-item-left img:hover{
    box-shadow: 0 0 8px #a0a0a0,
                0 0 11px #a0a0a0;
    transform: scale(1.005)
}


details > summary::-webkit-details-marker {
    display: none;
  }


  /* Blog Style Ends Here */





::-webkit-scrollbar{
    width: 15px;
}
::-webkit-scrollbar-thumb{
    background-color: var(--main-color);
}
::-webkit-scrollbar-track{
    background-color: var(--second-bg-color);
}


@media(max-width:1285px){
    .header{
        flex-direction: column;
    }

    .logo{
        width: 100%;
        text-align: center;
    }

    section{
        min-height: 60vh;
        padding-top: 5rem;
        padding-bottom: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .ils{
        flex-direction: column;
        margin: 2rem 0;
        gap: 1rem;
    }
    .ils-content{
        align-items: center;
        text-align: center;
    }
    .ils-img img{
        width: 90vw;
    }

    .irs{
        flex-direction: column-reverse;
        margin: 2rem 0;
        gap: 2rem;
    }
    .irs-content{
        align-items: center;
        text-align: center;
    }
    .irs-img img{
        width: 90vw;
    }

    .gallery{
        padding-top: 1.5rem;
    }

    .gallery-section{
        flex-direction: column;
        margin: 2rem 0;
        gap: 1rem;
    }
    .gallery-title{
        align-items: center;
        text-align: center;
    }
    .gallery-img img{
        width: 30vw;
    }
}

@media(max-width:800px){
    .blog-item-left, .blog-item-right {
        width: 98%;
    }

    .blog-item-right {
        margin-left: 0.5vw;
    }
}



  /* Footer Styles */
.footer{
    background-color: var(--bg-color);
    padding: 20px;
    display: block;
}

.footer .social-icons{
    text-align: center;
    padding: 3px;
}

.footer img{
    width: 2rem;
    height: 2rem;
    margin-left: 5px;
    margin-right: 5px;
}

.footer ul{
    text-align: center;
    font-size: 1.8rem;
    margin-top: 15px;
}

.footer ul li{
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    font-weight: 500;
}

.footer ul li a {
    color: var(--footer-text-color);
    border-bottom: 3px solid transparent;
    transition: 0.3s ease-in-out;
}

.footer ul li a:hover{
        border-bottom: 3px solid var(--main-color);
}

.footer .copyright{
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    font-weight: 500;
}

.footer .powered-by{
    text-align: center;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 400;
}