/* Whole Homepage Section */

 html {
     scroll-behavior: smooth;
     transition: ease-in-out;
 }

 body {
     background-color: #ffffff;
     text-align: center;
     color: #3D5622;
 }

 h2,
 h3,
 h4 {
     font-family: 'Cardo', serif;
 }

 h3,
 p {
     font-family: 'lato', sans-serif;
     color: #18230F;
 }


 /* NavBar Section */

 .navbar-brand {
     margin: 0 0 0 2rem;
 }

 .navbar-nav {
     margin: 0 2rem 0 0;
 }

 .navbar-nav .nav-item .nav-link {
     transition: .30s ease-in-out;
     font-family: 'Cardo', serif;
     font-variant-caps: small-caps;
     font-size: 0.9rem;
     color: #18230F !important;
     border-top: 1px solid #18230F;
     display: inline-flex;
 }

 .navbar-nav .nav-item .nav-link:hover,
 .navbar-nav .nav-item .nav-link:focus {
     transition: .30s ease-in-out;
     border-top: 2px solid #18230F;
     transform: translateY(-5px);
     display: inline-flex;
 }

 /*   <!-- Hero Section Brief Self Intro --> */

 .Top_container {
     display: inline-block;
     text-align: center;
     width: 40%;
     height: auto;
     justify-content: center;
     margin: 2rem auto 1rem auto;
 }

 #Name_Intro {
     margin-bottom: 2rem;
     font-family: 'Cardo', serif;
     text-align: left;
     font-size: 2.2rem;
     line-height: 1.5;
 }

 /* <!-- Hero Section Animation --> */

 #Self_Short_Description {
     font-size: 1.2rem;
     line-height: 1.5;
     margin: 0;
     padding: 0;
     text-align: left;
     width: 100%;
     height: auto;
     display: inline-flex;
 }

 .Intro_Animation_Group {
     display: inline-block;
     text-align: center;
     margin-top: 2rem;
     margin-bottom: 2rem;
 }

 .Intro_Animation {
     width: 18%;
     height: auto;
     margin: 0 1.5rem 0 1.5rem;
 }

 /* Responsive Section */

 @media (min-width:577px) and (max-width:768px) {
     .Top_container {
         width: 60%;
         height: auto;
     }

     .Intro_Animation_Group {
         display: inline-block;
         text-align: center;
         width: 50%;
         margin-top: 3rem;
         margin-bottom: 5rem;
     }

     .Intro_Animation {
         width: 40%;
         height: auto;
         margin: 0 1.5rem 0 1.5rem;
     }
 }

 @media (max-width:576px) {
     .Top_container {
         width: 70%;
         height: auto;
     }

     .Intro_Animation_Group {
         display: inline-block;
         text-align: center;
         margin-top: 3rem;
         margin-bottom: 5rem;
     }

     .Intro_Animation {
         width: 40%;
         height: auto;
         margin: 0 1.5rem 0 1.5rem;
     }

     #Name_Intro,
     #Job_Title {
         width: 90%;
         height: auto;
         text-align: center;
     }

     #Self_Short_Description {
         width: 80%;
         height: auto;
         display: inline-block;
         text-align: center;
     }
 }

 /* Design Portfolio Section */

 .Big_Portfolio_Title {
     font-family: 'Cardo', serif;
     margin: 1rem auto 0 auto;
     padding: 0;
 }

 .Container {
     width: 100%;
     height: auto;
     position: relative;
 }

 .btn_area {
     position: absolute;
     bottom: 0;
     top: 0;
     left: 0;
     right: 0;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .Design_Images {
     opacity: 1;
     display: block;
     width: 100%;
     height: auto;
     position: relative;
     z-index: 1;
     transition: .5s ease;
 }

 /* Design Portfolio Hover Section */

 .Design_Images:hover {
     opacity: 0.1;
     filter: blur(6px);
     -webkit-filter: blur(6px);
     transition: .5s ease;
 }

 .Container .btn_area .btn p {
     font-size: 1.2rem;
     color: #18230F;
 }

 /* Illustration Section-Grid System */

 .Main_Container {
     width: 100%;
     height: auto;
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     grid-template-rows: repeat(3, 30vh);
     grid-gap: 2px;
 }

 .Illustration_01 {
     grid-column: 5/7;
     grid-row: 1/2;
 }

 .Illustration_02 {
     grid-column: 3/5;
     grid-row: 1/2;
 }

 .Illustration_03 {
     grid-column: 1/3;
     grid-row: 1/4;
 }

 .Illustration_04 {
     grid-column: 3/5;
     grid-row: 2/3;
 }

 .Illustration_05 {
     grid-column: 5/7;
     grid-row: 3/6;
 }

 .Illustration_06 {
     grid-column: 3/5;
     grid-row: 3/4;
 }

 .Illustration_07 {
     grid-column: 5/7;
     grid-row: 2/3;
 }

 .Illustration_08 {
     grid-column: 1/3;
     grid-row: 4/5;
 }

 .Illustration_09 {
     grid-column: 3/5;
     grid-row: 4/5;
 }

 .Illustration_011 {
     grid-column: 1/3;
     grid-row: 5/6;
 }

 .Illustration_012 {
     grid-column: 3/5;
     grid-row: 5/6;
 }

 .Illustration_015 {
     grid-column: 1/3;
     grid-row: 6/7;
 }

 .Illustration_Altar {
     grid-column: 3/5;
     grid-row: 6/7;
 }

 .Illustration_Altar_Birdview {
     grid-column: 5/7;
     grid-row: 6/7;
 }

 .Illustration_Gallery {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* Illustration Responsive Section */

 @media (max-width:576px) {
     .Illustration_01 {
         grid-column: 1/4;
         grid-row: 4/5;
     }

     .Illustration_02 {
         grid-column: 4/7;
         grid-row: 2/3;
     }

     .Illustration_03 {
         grid-column: 1/7;
         grid-row: 1/2;
     }

     .Illustration_04 {
         grid-column: 1/4;
         grid-row: 2/3;
     }

     .Illustration_05 {
         grid-column: 1/7;
         grid-row: 5/6;
     }

     .Illustration_06 {
         grid-column: 1/7;
         grid-row: 3/4;
     }

     .Illustration_07 {
         grid-column: 4/7;
         grid-row: 4/5;
     }

     .Illustration_08 {
         grid-column: 4/7;
         grid-row: 6/7;
     }

     .Illustration_09 {
         grid-column: 1/4;
         grid-row: 6/7;
     }

     .Illustration_011 {
         grid-column: 1/7;
         grid-row: 7/8;
     }

     .Illustration_012 {
         grid-column: 1/4;
         grid-row: 8/9;
     }

     .Illustration_015 {
         grid-column: 4/7;
         grid-row: 9/10;
     }

     .Illustration_Altar {
         grid-column: 1/4;
         grid-row: 9/10;
     }

     .Illustration_Altar_Birdview {
         grid-column: 4/7;
         grid-row: 8/9;
     }

     .Illustration_Gallery {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
 }

 @media (min-width:577px) and (max-width:768px) {
     .Illustration_01 {
         grid-column: 1/4;
         grid-row: 4/5;
     }

     .Illustration_02 {
         grid-column: 4/7;
         grid-row: 1/2;
     }

     .Illustration_03 {
         grid-column: 1/4;
         grid-row: 1/4;
     }

     .Illustration_04 {
         grid-column: 4/7;
         grid-row: 2/3;
     }

     .Illustration_05 {
         grid-column: 4/7;
         grid-row: 5/8;
     }

     .Illustration_06 {
         grid-column: 4/7;
         grid-row: 3/4;
     }

     .Illustration_07 {
         grid-column: 4/7;
         grid-row: 4/5;
     }

     .Illustration_08 {
         grid-column: 1/4;
         grid-row: 5/6;
     }

     .Illustration_09 {
         grid-column: 1/4;
         grid-row: 7/8;
     }

     .Illustration_011 {
         grid-column: 1/4;
         grid-row: 8/9;
     }

     .Illustration_012 {
         grid-column: 4/7;
         grid-row: 8/9;
     }

     .Illustration_015 {
         grid-column: 4/7;
         grid-row: 11/12;
     }

     .Illustration_Altar {
         grid-column: 1/4;
         grid-row: 11/12;
     }

     .Illustration_Altar_Birdview {
         grid-column: 1/7;
         grid-row: 9/11;
     }

     .Illustration_Gallery {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
 }

 /* Animation Section  */

 .iframe_container {
     background-color: white;
     width: 100%;
     height: 100%;
     padding: 4rem 0 2rem 0;
     display: block;
     justify-content: center;
     left: 2rem;
     right: 2rem;
 }

 /* Footer Section */

 .Footer {
     margin: 0;
     padding: 0;
     background-color: #f7faf9;
 }

 /* Linkedin_Insta Section */

 .footer-icon {
     color: #18230F;
     padding-top: 1rem;
     padding-bottom: 0;
 }

 .fab {
     padding: 1rem 0.5rem 0 0.5rem;
     color: #18230F;
 }

 /* Email Section */

 .My_Email {
     margin: 0;
     padding: 0;
 }

 #Email {
     font-family: 'lato', sans-serif;
     font-size: 1rem;
     color: #18230F;
 }

 /* Copy Right Section */

 .copyright .cr {
     margin: 0;
     padding: 2rem 0 0.5rem 0;
     font-size: 0.8rem;
 }

 /* Back to Top Section */

 .back-to-top-icon {
     position: fixed;
     bottom: 5%;
     right: 5%;
     z-index: 1;
 }