/* Carousel */
@import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, demo;

@layer demo {

.carousel{
	/* prev & next buttons */
  --nav-btn-size: 40px;
  --nav-btn-bg: rgb(15, 23, 43);
  --nav-btn-txt: white;
  
	/* item markers */
  --nav-marker-bg: 20px;
  --nav-marker-bg: rgb(15, 23, 43);
  
  width: min(calc(100% - 2rem), 700px);
  list-style: none;
  padding-block: 2rem; /* create space for drop shadows */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 250px; 
  gap:0;
  /*outline: 1px dashed red;*/
  anchor-name: --carousel;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behaviour-x: contain; 
  scroll-behavior: smooth; /* keep things smooth (should probably be wihtin a prefers query) */
  scrollbar-width: none;
  

  /* empty pseudo elements to push first and last items to the middle */
  &::before,
  &::after{
      content: '';
  }
  
  
  /**************** MARKERS GROUP *******************/
  /* the item markers will be dynamically placed within this element */
  scroll-marker-group: after; /* place after elements*/
  &::scroll-marker-group{
    position: absolute;
    position-anchor: --carousel;
    inline-size: min(90cqi, 400px);
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: .25rem;
    padding-block-start: 1rem;
    top: anchor( bottom );
    left: calc(anchor(left) - 10%);
    right: calc(anchor(right) - 10%);
  }
  /* carousel item*/
  > div{
    position: relative;
    scroll-snap-align: center; /* centers snap */
    scroll-snap-stop: always; /* ensures that the scroll stops at each element */
    container-type: scroll-state; /* define container for child animations */
     
    display: grid;
    grid-template-areas: 'img' 'title' 'desc';
    text-align: center;
		
		/* scroll to this item on load */
		&.scroll-start {
				scroll-initial-target: nearest;
		}
    > h2{
      grid-area: title;
      margin: 1rem 0 0 0;
			font-size: 1.3rem;
			white-space: nowrap;
      transition: all 300ms ease-in-out;
      /* not current item */
      @container not scroll-state(snapped: inline) {
        scale: .5;
        opacity: .5;
        translate: 0 -100px;
      }
    }
    > p{
      grid-area: desc;
      margin: 0;
			white-space: nowrap;
      transition: all 300ms ease-in-out;
      @container not scroll-state(snapped: inline) {
        scale: .5;
        opacity: 0;
        /*translate: 0 100px;*/
      }
    }
    > .img{
      grid-area: img;
      width: 100%;
      /* aspect-ratio:3/4; */
      transition: all 300ms ease-in-out;
      transform-origin: center center;
      /* not current item */
      @container not scroll-state(snapped: inline) {
        scale: .5;
        opacity: .5;
      }
      & > img{
        width:100%;
        height: 100%;
        object-fit:cover;
        border-radius: 20px;
        box-shadow: 0 10px 20px  rgba(0 0 0 / .25);
      }
      
    }


    /************** MARKERS **************/
    &::scroll-marker{
      content: ' ';
      height:20px;
      aspect-ratio: 1;
      background-color: var(--nav-marker-bg);
      border-radius:50%;
      transition: 150ms ease-in-out;
      scale: .75;
      opacity: .25;
    }
    /* current item marker */
    &::scroll-marker:target-current{
      opacity: 1;
      scale: 1;
    }
    /* hover and keyboard focus */
    &::scroll-marker:where(:hover,:focus-visible){
      opacity: 1;
    }
    /* keybaord focus-*/
    &::scroll-marker:focus-visible{
      outline: 1px dashed var(--nav-marker-bg);
      outline-offset: 4px;
    }
  }

  
  /************* NAV BUTTONS(left and right) ************/
  &::scroll-button(*){
    position: absolute;
    position-anchor: --carousel;
    width: var(--nav-btn-size);
    aspect-ratio: 1/1;
    font: inherit;
    background-color: var(--nav-btn-bg);
    display: grid;
    place-content: center;
    color: #FFF;
    border:none;
    border-radius: 50%;
    opacity: 0.7;
    cursor: pointer;
    transition: all 150ms ease-in-out;
    outline: 1px dashed transparent;
    outline-offset: 0px;
  }
  /* button - prev */
  &::scroll-button(inline-start){
    content: '❮';
    left: calc(anchor(left) - var(--nav-btn-size));
  }
  /* button - next */
  &::scroll-button(inline-end){
    content: '❯';
    right: calc(anchor(right) - var(--nav-btn-size));
  }
  /* hover and keyboard focus */
  &::scroll-button(*):not(:disabled):where(:hover,:focus-visible){
    opacity: 1;
    scale: 1.1;
  }
  /* keyboard focus*/
  &::scroll-button(*):focus-visible{
    outline: 1px dashed var(--nav-btn-bg);
    outline-offset: 4px;
  }
  /* disabled */
  &::scroll-button(*):disabled{
    opacity: .25;
    cursor: unset;
  }
}
  
  /* general styling not relevant for this demo */
@layer base {
	* {
		box-sizing: border-box;
	}
	:root {
		color-scheme: light dark;
		--bg-dark: rgb(16, 24, 40);
		--bg-light: rgb(248, 244, 238);
		--txt-light: rgb(10, 10, 10);
		--txt-dark: rgb(245, 245, 245););
		--line-light: rgba(0 0 0 / .25);
		--line-dark: rgba(255 255 255 / .25);
    /*
    --clr-bg: light-dark(var(--bg-light), var(--bg-dark));
    --clr-txt: light-dark(var(--txt-light), var(--txt-dark));
    --clr-lines: light-dark(var(--line-light), var(--line-dark));
    */
	}
 
	h1 {
		margin: 0;
		font-size: 1.2rem;
	}
	.msg-supports {
		font-size: 0.8rem;
		/*
    @supports (animation-timeline: scroll()) {
			display: none;
		}
    @supports (order:sibling-index()) {
			display: none;
		}
    @supports (x: attr(x type(*))) {
			display: none;
		}
    */
    @supports selector(::scroll-marker-group) {
			display: none;
		}
	}
}

@keyframes autoScroll {
  0%   { scroll-snap-type: none; scroll-left: 0; }
  16%  { scroll-left: 250px; }
  33%  { scroll-left: 500px; }
  50%  { scroll-left: 750px; }
  66%  { scroll-left: 1000px; }
  83%  { scroll-left: 1250px; }
  100% { scroll-left: 0; }
}



/* main */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    min-width: 100%;
    min-height: 100vh;
    background-color: #f3d22e1a;
    /* background-color: #FDF6D7; */
}


.topbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 5rem;
    padding-right: 5rem;
    background-color: #EFCB28;
    min-height: 3rem;
}

.logo_image {
    width: 70px;
    height: 70px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.right-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.right-nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    margin-bottom: 0px !important;
}


.right-nav ul li{
    list-style: none;
}

.right-nav ul li a{
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 1px;
    color: #fff !important;
    text-decoration: none !important;
    transition: transform 0.3s ease-in-out;
}

.right-nav ul li a:hover{
    transform: scale(1.2) ;
    color: #0A4833 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* body */
.container {
    max-width: 100% !important;
    margin: 0px !important;
    padding: 0px !important;
}

.section {
    padding: 100px 20px;
    margin: auto;
}

.main {
    background-color: #fff;
}

.main .row{
    background-color: #fff;
    max-width: 1200px;
    margin: auto !important;
}

label {
    font-size: 17px !important;
    color: #cdcabe;
    font-weight: 600;
}

.about-us-section {
    background-color: #fefaea;
}

.about-us-section .row{
    max-width: 1200px;
    margin: auto !important;
}

.features-section {
    background-color: #fff;
}

.features-section .row{
    max-width: 1400px ;
    margin: auto !important;
}

.features {
    list-style: disc;
    padding: 0px;
    font-size: 16px;
    font-weight: 600;
    color: #EFCB28;
}

.about-us {
    font-size: 3rem !important;
    color: #EFCB28;
}

.contact-us-section {
    background-color: #fefaea;
}

.contact-us-section .row{
    max-width: 1200px;
    margin: auto !important;
}

.contact-us {
    font-size: 3rem !important;
    color: #EFCB28;
}

.contact-us-section .content .card {
    text-align: justify;
    min-width: max-content;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.main-image {
    width: 200px; 
    height: 200px; 
    border-radius: 50%;
}

.set-image {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.app-image {
    height: 500px;
}

.carousel-app-image {
    height: 620px;
}

.app-image-titled {
    height: 520px;
}

.explore-app-heading {
    font-weight: 500;
    font-size: 3rem !important;
    color: #EFCB28;
    margin-bottom: 2rem;
    text-align: center;
}

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

.content-heading {
    /* margin-top: 3rem; */
    font-weight: 500;
    font-size: 3rem !important;
    color: #EFCB28;
}

.content-details {
    margin-top: 2rem;
    font-weight: 500;
}

.contact-us-section .card {
    min-width: 600px;
}

.buttons {
    display: flex;
    flex-direction: row;
    gap: 4rem;
}

.btn-default {
    font-size: 20px !important;
    font-weight: 600 !important;
    border: 1px solid #dfdccf !important;
    box-shadow: 2px 1px 10px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s ease-in-out;
}

.btn-default:hover {
    transform: scale(1.1);
}



/* footer */
.footer-nav {
    background-color: #EFCB28;
    color: #fff;
    text-align: center;
}

.footer-nav .container {
    padding: 30px 0px !important;
    max-width: 1200px !important;
    margin: auto !important;
}

.footer-nav .logo_image {
    width: 70px;
    height: 70px;
}

.about {
    background-color: transparent;
    text-align: justify;
    font-size: 18px;
}

.footer-nav .col-md-3 {
    padding: 10px 30px;
}

.footer-nav .top-nav {
    border-bottom: 1px solid #fff;
}

.quick-links ul, .important-links ul{
    padding-left: 0px !important;
}

.quick-links h4, .important-links h4{
    padding-left: 0px;
    padding-bottom: 4px;
    text-align: start;
    border-bottom: 1px solid #fff;
}

.quick-links ul li, .important-links ul li{
    list-style: none;
    text-align: left;
}

.quick-links ul a, .important-links ul a{
    display: inline-block;
    text-decoration: none !important;
    color: #fff !important;
    font-weight: 700;
    transition: transform 0.3s ease-in-out;
}

.quick-links ul a:hover, .important-links ul a:hover{
    transform: scale(1.2);
    color: #0A4833 !important;
    text-decoration: underline !important;
}

.bottom-nav {
    padding-top: 20px;
}

.bottom-nav p {
    font-size: 20px;
}