@charset "utf-8";

:root {
  /* colors */
  --white: #ffffff;
  --gray:#4c4c4c;
  --yellow-light: #fff4e2;
  --yellow: #fcae2b;
  --red: #c52031;

  /* Font sizes */
  --font-size-18: clamp(0.8125rem, 0.7367rem + 0.3236vw, 1.125rem);
  --font-size-21: clamp(0.8125rem, 0.6911rem + 0.5178vw, 1.3125rem);
  --font-size-24: clamp(0.875rem, 0.7233rem + 0.6472vw, 1.5rem);
  --font-size-22: clamp(0.8125rem, 0.676rem + 0.5825vw, 1.375rem);
  --font-size-25: clamp(0.8125rem, 0.6305rem + 0.7767vw, 1.5625rem);
  --font-size-26: clamp(1rem, 0.8483rem + 0.6472vw, 1.625rem);
  --font-size-27: clamp(1rem, 0.8331rem + 0.712vw, 1.6875rem);
  --font-size-29: clamp(0.875rem, 0.6475rem + 0.9709vw, 1.8125rem);
  --font-size-33: clamp(1.25rem, 1.0528rem + 0.8414vw, 2.0625rem);
  --font-size-52: clamp(1.25rem, 0.7646rem + 2.0712vw, 3.25rem);
  --font-size-57: clamp(1.25rem, 0.687rem + 2.4019vw, 3.569375rem);
  --font-size-72: clamp(1.75rem, 1.0825rem + 2.8479vw, 4.5rem);

  /* Font weight */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-extra-bold : 800;
  --fw-black : 900;

  /* Font family */
  --primary-font:  "Poppins", sans-serif;

}

/* Common-css */
* {margin: 0; padding: 0; text-decoration: none; list-style: none; outline: none; border: none; position: relative; line-height: 1.2em;}
*,*:before,*:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body,html {width: 100%; min-width: 320px; margin: 0 auto; overflow-x: hidden;}
body {margin: 0; padding: 0; background-color: var(--white); font-weight: var(--fw-normal); font-size: 16px; letter-spacing: 0; color: var(--gray); min-width: 320px; font-family: var(--primary-font); font-weight: 400;}
img {max-width: 100%; width: auto; height: auto; display: block;}
.rows {width: 100%;}
.container{ width: 92% ; margin: 0 auto ; max-width: 1444px;}
.cover {width: 100%; height: 100%; position: fixed; background: rgba(255, 255, 255, 0.89); top: 0; left: 0; z-index: 1; display: none;}
.flex {display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;}
.align-center {align-items: center;}
.align-start {align-items: flex-start;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.align-end {align-items: flex-end;}
.justify-end {justify-content: flex-end;}
.justify-left {justify-content: flex-start;}
.flex-wrap {flex-wrap: wrap;}
.flex-column {flex-direction: column;}
.flex-column-reverse {flex-direction: column-reverse;}
.align-self-start{align-self: flex-start;}
.align-stretch{align-items: stretch;}
.text-center{text-align: center;}
.ws-nowrap {white-space: nowrap;}
.pe-none{pointer-events: none;}
br {line-height: 0;}
input::-ms-reveal,input::-ms-clear {display: none;}
.scrollToTop{bottom:2.5em;z-index:999;display:none;position:fixed;right:20px;background: var(--yellow) url(../../images/wad2024/arw-up.png) no-repeat center center;width:35px;height:35px;text-align:center;border-radius:3px;-webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.5);box-shadow:1px 1px 5px rgba(0,0,0,0.5);cursor:pointer}
.bold{font-weight: var(--fw-bold);}

h1{font-size: var(--font-size-72); font-weight: var(--fw-bold); line-height: 1.25em; color: var(--yellow);}
h2{font-size: var(--font-size-57); font-weight: var(--fw-normal); line-height: 1em; color: var(--gray);}
h3{font-size: var(--font-size-52); font-weight: var(--fw-bold); line-height: 1.125em; color: var(--red);}
h4{font-size: var(--font-size-26); font-weight: var(--fw-bold); line-height: 1em; color: var(--yellow);}
h5{font-size: var(--font-size-27); font-weight: var(--fw-bold); line-height: 1em; color: var(--white);}
p{font-size: var(--font-size-21); line-height: 1.761904761904762em; font-weight: var(--fw-normal);}
p:not(:last-of-type){margin-bottom: 1.1em;}
/* Common-css */

/* Header-css */
header{position: absolute; z-index: 1; left: 0; top: 0; width: 100%;}
header .logo img{max-width: clamp(2.625em, 1.199em + 6.0841vw, 8.5em); margin-left:60px;}
/* Header-css */

/* Main banner css */
.main_banner{background: var(--yellow-light)}
.main_banner h1{margin: 0.2em 0;}
.main_banner .cont_sec{padding: clamp(1.25rem, 0.3398rem + 3.8835vw, 5rem);}
.main_banner p{font-size: var(--font-size-25); line-height: 1.72em;}
.main_banner .pic{width: 60%;position: absolute;right: 0;top: 0;}
/* Main banner css */

/* Why AIDS Day css */
.why_aids_day{padding-top: clamp(3em, 0.9976em + 8.5437vw, 11.25em); padding-bottom: clamp(1.25em, -1.253em + 10.6796vw, 11.5625em);}
.why_aids_day .cont{margin-top: clamp(1.25em, 0.7949em + 1.9417vw, 3.125em);}
.why_aids_day .pic{padding-left: 1.25em; margin-top: 2em;}
.why_aids_day p span{color: var(--yellow);}
/* Why AIDS Day css */

/* YRGCARE Aligns css */
.yrg_aligns{margin-top: clamp(0em, -0.9709em + 4.1424vw, 4em); padding-bottom: clamp(1em, -0.3501em + 5.7605vw, 6.5625em);}
.yrg_aligns h3{margin-bottom: 0.5em;}
.yrg_aligns .hd_sec{margin-bottom: clamp(1.25em, 0.2184em + 4.4013vw, 5.5em); text-align: center;}
.yrg_aligns .hd_sec p{font-size: var(--font-size-29); line-height: 1.25em;}
.cards_sec .card{background-color: var(--yellow-light); border-top-right-radius: 2.2em; border-bottom-left-radius: 2.2em; margin-bottom: 1.5em;box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;}
.cards_sec .card .pic img{width: 100%;border-top-right-radius: 2.2em; border-bottom-left-radius: 2.2em;}
.cards_sec .card .cont{padding: clamp(1.25em, 1.0376em + 0.9061vw, 2.125em) clamp(1.375em, 1.2233em + 0.6472vw, 2em) clamp(1.25em, 1.0376em + 0.9061vw, 2.125em) }
.cards_sec .card h4{margin-bottom: 0.75em; line-height: 1.25em;}
.cards_sec .card h4 br{display: none;}
.cards_sec p{font-size: var(--font-size-18); line-height: 1.6em;}
/* YRGCARE Aligns css */

/* Together sec css */
.together_sec{background: var(--yellow) url(../../images/wad2024/together-bg-02.jpg) no-repeat center center; background-size: cover; text-align: center;}
.together_sec{padding: clamp(2.8125em, 1.3865em + 6.0841vw, 8.6875em) 0;}
.together_sec h3{margin-bottom: 0.5em; line-height: 1.35em;}
.together_sec h3 br{display: none;}
.together_sec p{font-size: var(--font-size-24); line-height: 1.541666666666667em;}
.together_sec::before{content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; /*background-color: rgba(252,174,43,0.8);*/ background-color:rgba(252, 212, 147, 0.8)}
/* Together sec css */

/* Right path css */
.tab_main .hd{font-size: var(--font-size-21); font-weight: var(--fw-bold); background: url(../../images/wad2024/acc-plus.png) no-repeat center right; border-top: 2px solid var(--yellow);  padding: 1.4em 3em 1.4em 0; background-size: 1.35em; cursor: pointer}
.tab_main .hd.active{background: url(../../images/wad2024/acc-minus.png) no-repeat center right; background-size: 1.35em;border-bottom: 2px solid var(--yellow);}
.tab_main .hd span{display: -webkit-box; line-clamp:1; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.tab_main .hd.active span{ line-clamp:initial; -webkit-line-clamp: initial;}
.tab_main .tab_cont{padding: 0.875em 2em clamp(0.875rem, 0.6323rem + 1.0356vw, 1.875rem) 0;}
.tab_main .tab_cont p a{color: var(--yellow); display: inline-block;}
.tab_main .tab_cont p a:hover{text-decoration: underline;}
.right_path{padding-top: clamp(0em, -0.986em + 4.2071vw, 4.0625em); padding-bottom: clamp(3.125em, 1.4563em + 7.1197vw, 10em);}
.right_path .cont{margin-top: clamp(1.25em, 0.1123em + 4.8544vw, 5.9375em);}
.right_path .tab_main{margin-top: 2.5em;}
.right_path .tab_main .tab_cont{display: none;}
.right_path .tab_main .sec:first-child .tab_cont{display: block;}
.right_path .tab_main .sec:last-child .hd{border-bottom: 2px solid var(--yellow);}
.right_path .btn{transition: all ease-in-out 0.35s;}
.right_path .btn.act,.right_path .btn:hover{padding: 0.75em 1.35em; background-color: var(--yellow); color: var(--white); border-radius: 0.25em; font-weight: var(--fw-bold); border: 1px solid var(--yellow);}
.right_path .btn.act:hover{background-color: var(--white); color: var(--yellow); text-decoration: none;}
/* Right path css */

/* Footer css */
footer{background-color: #4f4f4f; padding: clamp(2.5em, 2.2725em + 0.9709vw, 3.4375em) 0;}
footer h5{margin-bottom: 0.74em;}
footer .social {column-gap: 1em;}
footer .social img{max-width: clamp(1.875em, 1.7233em + 0.6472vw, 2.5em);}
footer .social a img{transition: transform ease-in-out 0.2s; -webkit-transition: transform ease-in-out 0.2s;}
footer .social a:hover img{transform: scale(1.2); -webkit-transform: scale(1.2); }
footer .map_col iframe{border-radius: 1em; aspect-ratio: 16/9;}
footer .map_col iframe,
footer .map_col{width: 100%;}
footer .address_col{margin: 3.5em 0; width: 100%;}
footer .address_col p{color: var(--white);}
footer .address_col p a{color: inherit;}
/* Footer css */

/* Our videos */
.our_video h3{margin-bottom: 0.65em;}
.our_video .mcont{margin-bottom: 2em;}
.our_video {padding-bottom: clamp(3.125em, 2.8975em + 0.9709vw, 4.0625em); display: block;}
.our_video .video_cont iframe{width: 100%; aspect-ratio: 16/9; border-radius: 1em;}
/* Our videos */


@media only screen and (min-width : 480px) {
  /* Main banner css */
  .main_banner .pic{width: 50%;}
  /* Main banner css */
}
@media only screen and (min-width : 640px) {
  
  /* Footer css */
  footer .cont{flex-direction: row; justify-content: space-between;}
  footer .address_col{width: 50%; margin: 0;}
  footer .social_col{width: 50%;}
  footer .map_col{margin-top: 2em;}
  /* Footer css */


  /* Main banner css */
  .main_banner{background-size: auto;}
  .main_banner .pic{width: 46%; position: absolute; right: 0; top: 1.25em;}
  /* Main banner css */

  /* YRGCARE Aligns css */
  .cards_sec {flex-wrap: wrap; flex-direction: row;}
  .cards_sec .card{width: 48%; }
  .cards_sec .card h4 br{display: block;}
  /* YRGCARE Aligns css */
}


@media only screen and (min-width : 768px) {
  p:not(:last-of-type){margin-bottom: 2.1em;}

  /* Why AIDS Day css */
  .why_aids_day .cont{width: 52%;}
  .why_aids_day .pic{position: absolute; right: -1em; top: 12%; padding-left: 0; width: 46%; margin-top: 0;}
  /* Why AIDS Day css */

  
}

@media only screen and (min-width : 980px) {

   /* Footer css */
   footer .social_col{width: 30%; padding-right: 2em;}
   footer .address_col{width: 34.25%; padding-right: 2em;}
   footer .map_col{width: 35.75%; margin-top: 0;}
   /* Footer css */
  
   /* YRGCARE Aligns css */
   .cards_sec .card{width: 23.15%; margin-bottom: 0;}
   /* YRGCARE Aligns css */


   /* Right path css */
   .right_path .cont{flex-direction: row;}
   .right_path .pic{width: 53.7%;  padding-right: 3em;}
   .right_path .tab_main{width: 46.3%; margin-top: 0;}
   /* Right path css */

   /* Our videos */
   .our_video .cont{flex-direction: row;}
   .our_video .mcont{width: 39%; padding-right: 6%; margin-bottom: 0; margin-top: 1em;}
   .our_video .video_cont{width: 61%;}
   /* Our videos */

   /* Together sec css */
   .together_sec p{padding: 0 6.5%;}
   /* Together sec css */

   /* Main banner css */
   .main_banner p{padding-right: 6%;}
   /* Main banner css */

}


@media only screen and (min-width : 1600px) {
  /* Why AIDS Day css */
  .why_aids_day .cont{width: 53%;}
  .why_aids_day .pic{top: 15%; right: 0;}
  .why_aids_day{ background: url(../../images/wad2024/why-aids-day-bg-01.png) no-repeat left 70%; padding-top: clamp(3em, 0.0874em + 12.4272vw, 15em);}
  /* Why AIDS Day css */
}


@media only screen and (max-width : 374px) {
  
  
}